IE 6 some how expands div.

Hello,

I have a problem with a fixed size div expanding in IE 6 and below.
The div is centered with a fixed width.I know divs expand in IE to fit their content but the child div is seen as being the actual correct width, with the parent going beyond this by about 12px so basically something else is stretching the parent. It may help to know that the child div has a nav bar in it that is made up from a list with the a elements floated.
Anyway in short the basic problem is that the parent div is being stretched by something in IE 6 and below but in no other browsers.

Below is some HTML and CSS. Sorry I can't make this sound more simple.

HTML:

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

</head>
<body id="home">

</div>

<ul>

<li><a href="http://www.google.co.uk">Home</a></li>
<li><a href="http://www.google.co.uk">Services</a></li>
<li><a href="http://www.google.co.uk">Commercial</a></li>
<li><a href="http://www.google.co.uk">Pests</a></li>
<li id="righty"><a href="http://www.google.co.uk">Contact Us</a></li>

</ul>

</div>

<p>Our company was established in 1996 etc......
</p>
<p>

Feel free to browse our site and
find out more about our
range of innovative and enviromenatly
conscientious services.
</p>

</div>

</div>

</div>
</div>
</div>

<div id="footer">
<p>Footer</p>
</div>

</body>

</html>

CSS

body{
background: #5f80c5 url(images/back_grad.jpg) 0 0 repeat-x;
text-align: center;
font-family: tahoma, helvetica, sans-serif;
margin: 0;
padding: 0;
}

#footer{
background: #5f80c5 url(images/footer.jpg) top center no-repeat;
width: 780px;
height: 26px;
margin: 0 auto;
padding: 2px 0;
font-size: .8em;
color: #fff;
/*border: 1px dashed white;*/
}

#wrap1{
background: #3446a2 url(images/header_shadow.jpg) left top no-repeat;
width: 780px;
margin: 0 auto;
/*border: 1px dashed red;*/
}

#wrap2{
background: url(images/right_shadow.jpg) right top no-repeat;
width: 780px;
margin: 0;
/*border: 2px solid green;*/
}

#wrap3{
background: url(images/left_shadow.jpg) left top no-repeat;
color: #fff;
width: 780px;
padding: 10px 0 0 0;
height: 595px;
margin: 0;
border: 1px dashed white;
text-align: left;
}

h3{
color: #d1cd6e;
}

#header {
margin-left: 10px;
/*border: 1px dashed green;*/
}

#header img {
display: block;
/*border: 1px solid red;*/
}

#nav_bar {
line-height: 24px;
width: 627px;
text-align: center;
margin: 0 10px 0 10px;
padding: 0 0 0 133px;
/*border: 1px solid yellow;*/
color: #fff;
background: #17204e url(images/nav_back.jpg) left center repeat-x;
}

ul{
margin: 0;
padding: 0;
width: 100%;
}

ul li{
list-style-type: none;
/*border: 1px dashed green;*/
display: inline;
float: left;
}

ul li a {
text-decoration: none;
color: #fff;
display: block;
/*border: 1px solid pink;*/
width: 8em;
font-size: 75%;
font-weight: 700;
border-left: 1px solid #17204e;/*TESTER*/
}

ul li a:hover {
background: url(images/nav_back_hover.jpg) left center repeat-x;
}

#righty{
border-right: 1px solid #17204e;
}

#clear_trap {
clear: both;
}

#van_container {
float: right;
display: inline;
border: 1px dashed white;
margin: 30px 10px 0 0;
}

#content {
margin-left: 10px;
padding: 0 0 0 1em;
border: 1px dashed green;
font-size: 78%;
line-height: 1.5em;
width: 43%;
display: inline;
float: left;
}

*****************

Sorry about so much code but unfortunately I don't have a clue which part of this is causing the problem so I had to include it all.

Thanks

Erdy.

IE 6 some how expands div.

Div expands in IE but not other browsers

erdy

mep00

erdy

cmarshall

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week