CSS Divs not showing up properly in IE6

[herrjosua]

Hello

I am having a problem with div's on my Portfolio website when viewing in Internet Explorer 6. It appears that all my images are being distorted and some of the div's placement are being offset. When I view in Firefox, Opera, IE7 (I seem to remember it working when viewed in a new IE) the placement and images are being displayed correctly.

I do not know how to go about fixing this issue, nor do I know which part if any of my code is creating this issue. My website cane be viewed at: <snip>

On a side note I have just ran the W3C markup validater and going to fix the errors as these might be causing some of my issues.

Any help will greatly Appreciated.

Thanks
Josh

[edited by: swa66 at 5:30 pm (utc) on Feb. 12, 2009]
[edit reason] No personal URLs, please see ToS! [/edit]

[swa66]

A few tips:

• make sure you're not using IE6 is quirks mode, it misbehaves even more there than usual.
  
• IE's box model is often causing trouble with things not fitting inside it and/or elements expanding due to content (treating height and width as if it were min-height and min-width)
  
• validation really is a good step as it'll clean up your code a lot and in reduces the amount of guessing the browser does as to what you meant to happen.
  

Personal URLs aren't allowed, but posting relevant code is OK. See the pinned topics in the forum for details:

• Guide to Posting your HTML and CSS [webmasterworld.com]
  
• CSS Troubleshooting refresher.. [webmasterworld.com]
  

[herrjosua]

I have tried viewing my website on various different computers all with IE6 and the issue appears on all of them. Using Google Analytics I see that half of my viewers are still using IE6. How would I force IE6 to realize that the height and width of my images are not the mid-height, and mid-width?

[herrjosua]

Update: Here is a shorten version of my CSS Code:

body{
margin:5px;
padding:5px;
background-color:#E8E8E8;
font-family: Arial, Helvetica, sans-serif;
font-size:8pt;
}

#container{
width:800px;
margin-left: auto;
margin-right: auto;
}

#subcontainer{
width:800px;
height:600px;
float:left;
}

#title{
width:800px;
height: 98px;
}

#left_logo{
width:156px;
height:151px;
}

#right_content{
width:644px;
height:481px;
float:right;
}

#nav_subcontainer{
width:156px;
height:720px;
float:left;
}

#left_nav{
width:156px;
height:569px;
padding:0px;
}

#right_top_submenu_watermill{
width:644px;
overflow-x:hidden;
/*overflow-x:scroll;*/
overflow-y:hidden;
padding:0;
}

#right_image_window{
width:644px;
padding:0;
}

#right_bottom_submenu_watermill{
width:644px;
overflow-x:hidden;
overflow-y:hidden;
/*overflow-y:scroll;*/
padding:0;
}

#footercontainer{
width:800px;
height:21px;
margin: 0;
padding: 0;
}

#footer{
width: 700px;
height: 21px;
float:left;
}

#footerlinked{
width:100px;
height:21px;
float:right;
padding:0;
}

#nav{
margin:0;
padding:0;
}