Internet explorer version HTML/CSS problem?

  • Thread starter Thread starter krklapp
  • Start date Start date
K

krklapp

Guest
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>
 
Back
Top