IE 6 issue

Get Started
1

My test page seems to be working ok in later versions of ie and it’s also working in firefox, however, when tested in ie6 the menu seems to cause a shift below and to the right.

I’d appreciate any help in fixing this issue.

Here’s the code I’m using:

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
    
<style type = "text/css">
body{
min-width: 900px;
text-align: center;
background-color: lightblue;
}
#wrapper{
width:900px;
margin:0 auto;
text-align: left;
background-color: white;
}
clear{
clear:both;
margin:0;
padding:0;
}
#navcontainer ul
{
margin:10px;
padding:0;
background-color: #036;
color: White;
float: left;
width: 880px;
font-family: arial, helvetica, sans-serif;
}

#navcontainer ul li {display: inline; margin:0; padding:0; }

#navcontainer ul li.active{background-color:lightblue; margin:0; padding:0; }

#navcontainer ul li a
{
/*padding: 0.2em 1em;*/
margin:0;
padding: 10px 18px;
background-color: #036;
color: White;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}

#navcontainer ul li a:hover
{
margin-bottom:0px;
background-color: #369;
/*margin-bottom: 5px solid lightblue;
border-right: 1px solid #fff;
color: #fff;*/
}

#content{
margin:10px;
padding:0;
}

#content_left
{
float:left;
width:600px;
margin:0;
padding:0;
}

#content_left img
{
margin:0;
padding:0;
}
.imagery_1,.imagery_2{
float:left;
width:295px;
margin-top:0px;
padding-top:0px;
}
.imagery_1{
margin-right:5px;
}
.imagery_2{
margin-left:5px;
}

#right_content
{
float:right;
margin-left:10px;
padding:0;
width:270px;
height:600px;
background-color:yellow;
}
    


</style>
</head>
<body>
    
<div id = "wrapper">  
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
<div id = "content">
<div id = "content_left">
    
    <div><img src = "pic1.jpg" /></div>
    <div class="clear"></div>
    <div style = "margin:0;padding:0;"><h4 style = "margin:0;padding:0;">Heading One</h4></div>
    <div class="clear"></div>
    <div class="imagery_1">
        <h5 style = "margin:0;padding:0;">Heading 2</h5>
        <img src = "pic2.jpg" />
        <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like </p>
        <hr style = "height:7px;border-width:0;color:gray;background-color:gray" />
    </div>
    <div class="imagery_2">
        <h5 style = "margin:0;padding:0;">Heading 3</h5>
        <img src = "pic2.jpg" />
        <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like </p>
        <hr style = "height:7px;border-width:0;color:gray;background-color:gray" />
    </div>
    <div class="clear"></div>
    <div><img src = "pic1.jpg" /></div>  
</div>
<div id = "right_content">
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
2

nothing changes, I still have the same issue after I’ve taken out this top line

3

It would be good to have a live link for this, but the first thing I notice is this at the top of the page:

<?xml version=“1.0” encoding=“UTF-8”?>

That won’t play well with IE6. What happens if you remove it?