PDA

Click to See Complete Forum and Search --> : IE 6 margin error

birdy247
08-10-2008, 12:00 PM
Hi guys, i have uploaded an image to demonstrate my problem.

Basically i.e. 6 is adding in extra margins :-(

Here my CSS sheet with the relevent code

###########css###############

*{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

html{
margin:0;
padding:0;
}

body{
width:1000px;
background:#333333;
margin-left:auto;
margin-right:auto;
}

/*main container */
#main_container{
margin-left:auto;
margin-right:auto;
background: url(../images/holbrook_main_bg.jpg);
width:968px;
padding-left:15px;
padding-right:16px;
}

#header{
height:120px;
width:968px;
}

#header .left{
background:url(../images/header/holbrook_header_left.gif);
height:120px;
width:15px;
float:left;
}

#header .right{
background: url(../images/header/holbrook_header_right.gif);
height:120px;
width:15px;
float:left;
}

#header .center{
height:120px;
background: url(../images/header/holbrook_header_bg.jpg);
width:938px;
float:left;
}

.menu_container{
display:inline;
float:left;
width:156px;
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

.menu_container .menu_box{
background-image: url(../images/menus/holbrook_containers_bg.gif);
background-repeat: repeat-y;
width:118px;
padding: 0 19px;
clear:both;
}


.menu_container .menu_box .top{
background:url(../images/menus/holbrook_containers_top.gif);
width:156px;
height:19px;
margin: 0 -19px;
}

.menu_container .menu_box .bottom{
clear:both;
background:url(../images/menus/holbrook_containers_bottom.gif);
width:156px;
height:19px;
margin: 0 -19px;
}


#content_container{
display:inline;
clear:both;
}

#content{
float:left;
display:inline;
width:665px;
}

#bottom{
width:961px;
clear:both;
margin-left:3px;
}

#bottom .grass{
height:105px;
background-image:url(../images/holbrook_bottom_grass.gif);
background-repeat:repeat-x;
margin-bottom:5px;
}

#bottom .grey{
clear:both;
height:50px;
background: #CCCCCC;
margin-bottom:6px;
}

.clearfix:after {
clear: both;
content: ".";
display: block;
font-size: 0; /* Fixes FF */
height: 0;
visibility: hidden;
}

.clearfix {
display: inline-block;
}

img.title{
display:block;
float:left;
margin-top:12px;
}


#alert_box{
width:350px;
height:38px;
background:url(../images/alert_box/bg.gif);
float:right;
margin-top:9px;
margin-right:20px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
text-align:center;
font-weight:bold;
}

#alert_box .left{
float:left;
background-image:url(../images/alert_box/left.gif);
height:38px;
width:9px;
}

#alert_box .right{
float:right;
background-image:url(../images/alert_box/right.gif);
height:38px;
width:10px;
}


##########HTML#############
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>
</head>

<body>
<!-- START MAIN CONTAINER -->
<div id = "main_container" class = "clearfix">

<!-- Header -->
<div id = "header">
<div class = "left"></div>

<div class = "center"><img class = "title" src="images/holbrook_main_title.jpg" width="279" height="90" />
<div id = "alert_box">
<div class = "left"></div>
<div class = "right"></div>
Next Fixture Will Be Displayed Here </div></div><div class = "right"></div>
</div>


<!-- content container -->
<div id = "content_container">


<!-- Left Menu -->
<div class = "menu_container">
<div class = "menu_box">
<div class = "top"></div>
<ul id="nav">

<li><a href="#">Home</a>
<ul>
<li class = "second"><a href="#">Remoras</a>
<ul>
<li><a href="#">Echeneis</a>
<ul>
<li><a href="#">Sharksucker</a></li>
<li><a href="#">Whitefin Sharksucker</a></li>
</ul>
</li>
<li><a href="#">Phtheirichthys</a>
<ul>
<li><a href="#">Slender Suckerfish</a></li>
</ul>
</li>
<li><a href="#">Remora</a>
<ul>
<li><a href="#">Whalesucker</a></li>
<li><a href="#">Spearfish remora</a></li>
<li><a href="#">Marlinsucker</a></li>
<li><a href="#">Remora</a></li>
<li><a href="#">Ceylonese remora</a></li>
</ul>
</li>
<li><a href="#">Remorina</a>
<ul>
<li><a href="#">White suckerfish</a></li>
</ul>
</li>
<li><a href="#">Rhombochirus</a>
<ul>
<li><a href="#">R. osteochir</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Tilefishes</a>
<ul>
<li><a href="#">Caulolatilus</a></li>
<li><a href="#">Lopholatilus</a></li>
<li><a href="#">Malacanthus</a></li>
</ul>
</li>
<li><a href="#">Bluefishes</a>
<ul>
<li><a href="#">Pomatomus</a></li>
<li><a href="#">Scombrops</a></li>
<li><a href="#">Sphyraenops</a></li>
</ul>
</li>
<li><a href="#">Tigerfishes</a>
<ul>
<li><a href="#">Amniataba</a></li>
<li><a href="#">Bidyanus</a></li>
<li><a href="#">Hannia</a></li>
<li><a href="#">Hephaestus</a></li>
<li><a href="#">Lagusia</a></li>
<li><a href="#">Leiopotherapon</a></li>
<li><a href="#">Mesopristes</a></li>
<li><a href="#">Pelates</a></li>
<li><a href="#">Pelsartia</a></li>
<li><a href="#">Pingalla</a></li>
<li><a href="#">Rhyncopelates</a></li>
<li><a href="#">Scortum</a></li>
<li><a href="#">Syncomistes</a></li>
<li><a href="#">Terapon</a></li>
</ul>
</li>
</ul>
</li>

<li><a href="#">News</a>
<ul>
<li><a href="#">Climbing perches</a>
<ul>
<li><a href="#">Anabas</a></li>
<li><a href="#">Ctenopoma</a></li>
</ul>
</li>
<li><a href="#">Labyrinthfishes</a>
<ul>
<li><a href="#">Belontia</a></li>
<li><a href="#">Betta</a></li>
<li><a href="#">Colisa</a></li>
<li><a href="#">Macropodus</a></li>
<li><a href="#">Malpulutta</a></li>
<li><a href="#">Parosphromenus</a></li>
<li><a href="#">Pseudosphromenus</a></li>
<li><a href="#">Sphaerichthys</a></li>
<li><a href="#">Trichogaster</a></li>
<li><a href="#">Trichopsis</a></li>
</ul>
</li>
<li><a href="#">Kissing gouramis</a></li>
<li><a href="#">Pike-heads</a></li>
<li><a href="#">Giant gouramis</a></li>
</ul>
</li>
<li><a href = "#">Fixtures</a></li>
<li><a href = "#">Results</a></li>
<li><a href = "#">Signing Up</a></li>
<li><a href="#">The Players</a>
<ul>
<li><a href="#">Burrowing gobies</a></li>
<li><a href="#">Dartfishes</a></li>
<li><a href="#">Eellike gobies</a></li>
<li><a href="#">Gobies</a></li>
<li><a href="#">Loach gobies</a></li>
<li><a href="#">Odontobutidae</a></li>
<li><a href="#">Sandfishes</a></li>
<li><a href="#">Schindleriidae</a></li>
<li><a href="#">Sleepers</a></li>
<li><a href="#">Xenisthmidae</a></li>
</ul>
</li>
<li><a href = "#">The Teams</a></li>
<li><a href = "#">Our Policies</a></li>
<li><a href = "#">Photos</a></li>
</ul>

<div class = "bottom"></div>
</div>

<div class = "menu_box">
<div class = "top"></div>

<h1 class = "menus">Our Sponser</h1>
<img src="images/holbrook_sponser.jpg" width="118" height="84" />
<div class = "bottom"></div>
</div>




</div>

<!-- content -->
<div id = "content">

<p>
<!-- end content -->
</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

</div>



<!-- Right Menu -->
<div class = "menu_container">
<div class = "menu_box">
<div class = "top"></div>


<p>Man Of The Match</p>
<p>df</p>
<p>df</p>
<p>df</p>
<p>df</p>
<p>df </p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div class = "bottom"></div>
</div>

<div class = "menu_box">
<div class = "top"></div>


<h1 class = "menus">Interested In Joining</h1>
<form>
<table class = "home_join">
<tr>
<td>Your Name</td>
</tr>
<tr>
<td><label>
<input type="text" name="join_name" id="join_name" />
</label></td>
</tr>
<tr>
<td>Your E-Mail</td>
</tr>
<tr>
<td><input type="text" name="join_email" id="join_email" /></td>
</tr>
<tr>
<td>Your Telephone</td>
</tr>
<tr>
<td><input type="text" name="join_tel" id="join_tel" /></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td><label>
<input type="submit" name="button" id="button" value="Submit" />
</label></td>
</tr>
</table>
</form>
<div class = "bottom"></div>
</div>


</div>

<!-- end content_container -->
</div>


<div id = "bottom">
<div class = "grass"></div>
<div class = "grey">vbn</div>

</div>

<!-- END MAIN CONTAINER -->
</div>
</body>
</html>
birdy247
08-10-2008, 12:03 PM
heres the screen shot
ray326
08-10-2008, 04:52 PM
The normal work around for this bug is to replace the margins with padding on the containing elements.