Internet explorer version HTML/CSS problem?

Question

I have some compatibility problems with HTML and CSS. Ive been given an assignment to do a 12 page website and have been doing it on a version 6 Internet explorer but now im on a version 8 and i had a menu on the side that i had floated left and a bordered section for content that i had floated right and so they were right next to eachother. Now on version 8 the border is placed below and the section to the right of the menu is left blank. ill add in the css and html for both

CSS

.border {
clear: both;
border-right: 5px solid #333333;
border-bottom: 4px solid #333333;
border-top: 1px solid #666666;
border-left: 1px solid #666666;
float: right;
width: 80%;
}

#navcontainer2
{
float: left;
width: 12em;
border-right: 1px solid #000;
padding: 0;
margin-bottom: 1em;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #90bade;
color: #333;
}

#navcontainer2 ul
{
list-style: none;
margin-left: 0;
padding: 0;
border: none;
}

#navcontainer2 li
{
border-bottom: 1px solid #90bade;
margin: 0;
}

#navcontainer2 li a
{
display: block;
padding: 5px 5px 5px 5px;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}

html>body #navcontainer2 li a { width: auto; }

#navcontainer2 li a:hover
{
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}

#navcontainer2 li li
{
border-top: 1px solid #90bade;
border-bottom: 0;
margin: 0;
}

#navcontainer2 li li a
{
display: block;
padding: 5px 5px 5px 20px;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #5ba3e0;
color: #fff;
text-decoration: none;
width: 100%;
}

HTML


<div id="navcontainer2">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a>
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">Subitem one</a></li>
<li><a href="#">Subitem two</a></li>
<li><a href="#">Subitem three</a></li>
<li><a href="#">Subitem four</a></li>
</ul>

</li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
</ul>
</div>

<div class="border">

Container (i just put this in here so the border would show up on all 4 sides)

</div>

Answer 1

Best Answer - Chosen by Asker

Most likely you've fallen foul of the Microsoft Box Model Bug. It's too complicated to explain concisely here so I'll just provide some additional reading for you and let you figure it out for yourself (you'll learn a lot more that way anyway). Microsoft change the behaviour of this bug with each release of Internet Explorer, but they never really fix it.

Source(s):

http://en.wikipedia.org/wiki/Internet_Ex…
http://tantek.com/CSS/Examples/boxmodelh…
http://info.com.ph/~etan/w3pantheon/styl…
http://www.communitymx.com/content/artic…
http://webdesign.about.com/od/css/a/aabo…
http://www.glish.com/css/hacks.asp

Asker's Rating:

Asker's Comment:

Thank you, i read a couple of those and finally decided the side menu was not worth it and removed it.