CSS Forum

**monkeymafia** · 03-17-2008, 07:06 PM

Hey

I have basic layout started. but when i apply the margin-left property to one of my divs (its a nested div, which may be the problem?) it works as expected in Mozilla, however in IE (version 6) it adds a little bit more. I cant seem to fix it, its driving me insane.

Any help will be greatly appreciated!

The div im having problems with is called "leftcol".

Heres the XHTML file code:

Code:

<!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></title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

</head>

<body>
<div id="container">
<div class="outerbox">
<ul id="navlinks">
<li>Home</li>
<li>About Me</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>

<div id="wrapper">
<div id="leftcol">
<p>test sentance
</p>
</div>
<div class="clear"></div>
</div>
<div id="bottombox"></div>
</div>

</body>
</html>

Heres the CSS:

Code:

    *{
    margin: 0;
    padding: 0;}
    
    body{
    margin: 0;
    padding: 0;
    text-align: center;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    background: black url(images/1.jpg);
    font-size: 0.7em;
    }
    
    #container{
    text-align: left;
    margin: 100px auto;
    width: 714px;
    }
    
    .outerbox{
    background: url('images/top.gif') no-repeat;
    width: 714px;
    height: 59px;
    }
    
    #wrapper{
    padding: 0;
    background: transparent url("images/middleouter.gif") repeat-y center;
    width: 714px;
    height: auto;
    }
    
    #leftcol{
    width: 260px;
    margin-top: 10px;
    margin-left: 20px;
    float: left;
    background: #0099CC;
    }
    
    #bottombox{
    background: transparent url('images/bottomouter.gif') no-repeat;
    height: 37px;
    width: 714px;
    }
    
    .clear{
    clear: both;
    }

    ul{
    list-style-type: none;
    padding: 30px 0 0 0;
    }
    
    #navlinks li{
    display: inline;
    margin-left: 90px;
    color: #CCFF00;
    font-weight: bold;
    font-size: 1.2em;
    }

thanks again!

**LadynRed** · 03-17-2008, 07:55 PM

The problem is you are triggering the doubled-float margin bug in IE6. This happens when you have a margin going in the same direction as the float, ie. float left with left margin and the same for the right.

To combat this, you need to use conditional comments in your html to call a separate 'fixes only' css file. In that 'iefixes' css file, add this :

.leftcol{display: inline;}

That will stop that particular bug. To read more, head to www.positioniseverything.net for more bug killing info for IE.

**monkeymafia** · 03-18-2008, 06:02 AM

thanks alot! that was definitely the problem. thanks again for spotting the bug and for the helpful link.