more margin appearing in IE than FFox

monkeymafia · #1 (**permalink**) Mar 17th, 2008, 22:14

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: Select all

<!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: Select all

    *{
    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("http://www.webmaster-talk.com/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!

dab42pat · #2 (**permalink**) Mar 17th, 2008, 22:39

Try changing margin-left to padding- left in leftcol

Pat

moojoo · #3 (**permalink**) Mar 18th, 2008, 13:56

Alternately you can utilize a IE 6 targeted conditional comment and an ie6.css style sheet per say and modify the margins to make it work in IE.

Code: Select all

<!--[if IE 6]>
            <link rel="stylesheet" href="includes/css/ie6.css" media="screen" type="text/css" />
<![endif]-->

Generally the ie specific .css files are small compared to your global.css and doing this can save you lots of headaches such as changing for IE then it breaking in FF, Safari etc..

Aso · #4 (**permalink**) Mar 18th, 2008, 14:24

It's the IE6 Float Bug.

Add

Code: Select all

height: 1%

to any floated <div>'s.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Graphics Not Appearing	teranceh	Web Page Design	5	Sep 24th, 2007 15:00
text appearing outside <div> PLEASE HELP!	tobymather	Web Page Design	5	Jul 29th, 2007 00:31
ffox ok ie7 not behaving!	paulos72	JavaScript Forum	0	Jul 22nd, 2007 14:06
mystery non-appearing image	jessixcate	Graphics and 3D	1	Apr 14th, 2007 02:48
My URL icon isn't appearing. Waa, waa, waa!	timmytots	Web Page Design	10	Nov 13th, 2005 23:54

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
more margin appearing in IE than FFox