DaniWeb IT Discussion Community - mac vs windows; help to resolve the problem

Hi all,

I'm already creating some new website, honestly i've some problem when viewing in Windows platform. Maybe you can check the screenshoot that i attached. I've check on IE 6 and use firefox 2 on Windows...

or you can see live preview on; this for windows or this for mac
Definetly, there is no problem and of course, its nice to viewing on mac platform, use Safari or Firefox.

Please let me know how to resolved my case. Anyway, below are the code:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<title>Bogalakon Pictures</title>

<style type="text/css" media="screen">

@import url("boga/theme/v1/assets/stylesheet/master.css");

</style>

<script src="boga/theme/v1/assets/other/fader.js" type="text/javascript"></script>

</head>    

<body id="index-body">

<div id="header">

    <div class="header-container">

        <h1><a href="index.html" title="Bogalakon Pictures"><img src="boga/theme/v1/assets/images/logo_bl.png" alt="Bogalakon Pictures" width="176" height="48" /></a></h1>

    </div>

    <!-- HEADER CONTAINER -->

</div><!-- HEADER -->

<div id="wrap">

    <div id="sideleft">

        <ul id="nav">

            <li><a href="#" title="Portfolio">Work</a></li>

            <li><a href="about/index.html" title="About us">About</a></li>

            <li><a href="#" title="Client's area">Login</a></li>

            <li><a href="#" title="Contact us">Contact</a></li>

        </ul>

    </div><!-- SIDELEFT -->

    <div id="sideright" class="clearfix">

        <div class="inner">

            <h2>News</h2>

                <div class="date">

                    <p><span class="style2"><strong>New project</strong></span> &Iota; <span class="style1">12 May</span></p>

                </div>

                <p>I am happy to announce the <a href="#">onedia</a> website being featured at their media promotion. I'd like to say many thanks to <a href="#">Elance</a> for being my &quot;middle man&quot;.</p>

                <div class="date">

                    <p><span class="style2"><strong>New project</strong></span> &Iota; <span class="style1">12 May</span></p>

                </div>

                <p>I am happy to announce the <a href="#">onedia</a> website being featured at their media promotion. I'd like to say many thanks to <a href="#">Elance</a> for being my &quot;middle man&quot;.</p>

        </div><!-- INNER -->

    </div><!-- SIDELEFT -->

</div><!-- WRAP -->

<div id="footer" class="clearfix">

    <div class="footerinner">

        <div class="address">

            <p>Bogalakon Pictures</p>

            <p>3rd and 4th floors</p>

            <p>County House</p>

            <p>33 - 34 Rathbone Place</p>

            <p>London W1T 1JN</p>

            <p>tel: +XX (X) XX XXXX</p>

            <p>fax: +XX (X) XX XXXX</p>

            <p><a href="mailto:info@bogalakonpics.com">info@bogalakonpics.com</a></p>

        </div>

        <p class="copy">&copy; 2007 Bogalakon Pictures.</p>

    </div><!-- FOOTERINNER -->

</div>

<!-- FOOTER -->

</body>

</html>

CSS
[code=css]
.style1 {color: #666666}
.style2 {letter-spacing:0.1em;}

* html body{ /*IE6 hack*/
padding: 0 0 130px 0; /*Set value to (0 0 HeightOfFrameDiv 0)*/
}
* html #footer{ /*IE6 hack*/
height: 100%; width: 100%; }

:link,:visited {text-decoration:none }
ul,ol {list-style:none }
h1,h2,h3,h4,h5,h6,pre,code {font-size:1em; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input {margin:0; padding:0 }
a img,:link img,:visited img {border:none}
a {text-decoration:none;}
address {font-style:normal }

.clearfix:after {content: "."; display:block; height:0; clear:both; visibility:hidden;}

/* Hides from IE-mac \*/

* html .clearfix {height:1%;}

.clearfix {display: block; display:inline-block;}

/* End hide from IE-mac */

body {padding-bottom:50px; font:11px "Trebuchet MS"; background:url(../images/site_bg.png) repeat-x;}
body#index-body {background-image: url(../images/site_bg800.png); background-repeat: repeat-x;}
#container { }
#header {background:url(../images/header_bg.png) 50% top no-repeat; margin-top:14px;}
#index-body #header {margin-bottom:0;}
.header-container {width:780px; height:105px; margin:0 auto; text-align:center; padding-top: 35px; position: relative;}
#wrap {width: 740px; margin:0 auto; height:200px;}
#sideleft {height: 137px; width:154px;float: left; background-image:url(../images/nav_bg.png); background-repeat:repeat-x;}
#nav {padding-top: 6px;}
#nav li a {display: block; font-size:1.9em; margin-left:14px; margin-top:1px; width:58px; color:#FFFFFF; letter-spacing:0.1em;}
#sideright {width:200px; float:right; height:200px; background-image:url(../images/news_bg.png); background-repeat:repeat-x; margin-top:15px;}
.inner {padding-left:12px; padding-top:9px; padding-right:8px;}
.date {margin-bottom:0.3em; margin-top:0.5em;}
.inner h2 {font-size:1.2em; margin-bottom:0.3em;}
.inner p {margin-bottom: 0.3em;}
.style1 {color: #666666}
.style2 {letter-spacing:0.1em;}
#footer {position:absolute; bottom:0; left:0px; width:100%; height:237px; overflow:hidden; color:white; background-image:url(../images/footer_bg3.png); background-repeat:repeat-x; background-position:left bottom;}
#index-body #footer {margin-bottom:0px;}
.footerinner {margin:0 auto; width:740px;}
.address {float:left; margin-top:25px; width:150px; padding-top:55px;}
.address p {font-size:1em;}
.address a {color:#ff6600;}
#index-body .address {float:left; margin:0;}
.copy {float:left; position:absolute; bottom:2.5em; letter-spacing:0.1em; font-size:0.9em;}
#aboutcontent {width: 525px; float: right; background-image: url(../images/news_bg.png); background-repeat: repeat-x; margin-top: 15px; overflow: auto; height: 237px;}
.innerabout {padding:9px 8px 9px 12px;}
.innerabout h2 {font-size: 1.2em; margin-bottom: 0.5em;}
.innerabout p {margin-bottom: 0.5em; margin-top: 1em;}
[code]