CSS link navigation browser compatability.

Question

Hello I have a horizontal linked list (implemented to look like tabs) that I'm using for a site navigation.

I checked my page today on my phone and it didn't display correctly on opera or in internet explore. I checked IE6 when I got home and it appears the same way.

HTML

<div id="navcontainer"><ul>
 <li><a href="">Home</a></li>
 <li><a href="">Projects</a></li>
 <li><a href="" id="current">Resume</a></li>
 <li><a href="">Referances</a></li>
 <li><a href="">Fun</a></li>
</ul></div>

CSS

#navcontainer>ul{
 text-align: center;
 padding: 3px 0;
 }

#navcontainer>ul>li { 
 display: inline; 
 }

#navcontainer>ul>li>a { 
 padding: 3px 0.5em;
 margin-left: 3px;
 border: 1px solid #778;
 border-bottom: none;
 background: #bbd;
 }

#navcontainer>ul>li>a:hover {
 background-color: #369;
 }

#navcontainer>ul>li>a#current {
 background: #fff;
 border-bottom: 1px solid white;
 }

What is the best way to change this so it is more browser compliant? Thanks in advance.

Answer 1

For one, Internet Explorer 6 doesn't support the immediate child selector (>) that you are using.

Answer 2

IE6 doesn't like display:inline very much. Try float:left on both your lis and your li a.

Also, IE6 does not support the > child selector.

Answer 3

For the li items you should set:

 float: left;
 display: inline;
 list-style-type: none;

Answer 4

So the problem here was this?

<div id="navcontainer"<ul>
 <li><a href="">Home</a></li>
 <li><a href="">Projects<a href="" id="current">Resume/a></li>
 <li><a href="">Referances<a href="">Fun

Which should be

<div id="navcontainer"><ul>
 <li><a href="">Home</a></li>
 <li><a href="">Projects<a href="" id="current">Resume/a></li>
 <li><a href="">Referances<a href="">Fun