Navigation not working in IE6

[n000bie]

I am having some problem in navigation (IE6), please see the image

 

 

here is my css for navigation

#navigation { width:980px; height:50px; background:url(../images/nav_bg.png) no-repeat; list-style:none; line-height:50px; margin-bottom:60px; }
#navigation li { float:left; display:inline; width:auto; height:50px; background:url(../images/seperator.gif) no-repeat right center;  }
#navigation li a { display:block; height:50px; width:auto; font-size:16px; text-transform:uppercase; font-weight:bold; padding:0 15px;}
#navigation li a:hover { color:#9e6111;}

#navigation li.first { margin-left:250px;}
#navigation li.last { background:none;}

 

and my html

 

   <ul id="navigation">
    	<li class="first"><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Agents</a></li>
        <li><a href="#">Flight Details</a></li>
        <li><a href="#">Contact Us</a></li>
        <li class="last"><a href="#">Check Mail</a></li>
    </ul>

 

it works fine in FF, IE7 and chrome but not in IE 6

 

can you help me

 

[attachment deleted by admin]

[haku]

In IE6, I believe you need to float both the <li> tags AND the <a> tags.

[n000bie]

Thanks haku, it worked.

[haku]

Nice

[zerbeer]

try this

#navigation li a {font-size:16px; text-transform:uppercase; font-weight:bold; padding:0 15px;}

 

tag <a> display:block ?

I think tag <a> has a semantic structure is not suitable to add attributes 

[haku]

No, the problem was because in IE6 if list items are floated, and the <a> tag inside is not floated, the <a> tag inside takes on a 100% width. Floating the <a> tag fixes this problem.

 

...which is what I already told him, which he already said fixed it.

[neerz]

I also have similar problem. Navigation not working in IE6 but works well with others...Here is the code

 

a:focus {

outline:none;}

 

.menu {

width:1000px;

height:32px;

position:relative;

z-index:100;

font-family:arial, sans-serif;

}

 

/* hack to correct IE5.5 faulty box model */

* html .menu {

width:1000px;

 

}

 

/* remove all the bullets, borders and padding from the default list styling */

.menu ul {

padding:0;

margin:0;

list-style-type:none;

}

 

.menu ul ul {

width:149px;

}

 

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */

.menu li {

float:left;

width:149px;

position:relative;

border-top: #999 1px solid;

margin-right:10px;

}

 

.menu li:hover {

float:left;

border-top: #ff0 1px solid;

}

 

.nav-selected {

font-weight: bold;

}

 

.menu li li:hover {

float:left;

border-top: none;

color: #999;

}

 

.menu li li {

float:left;

width:149px;

position:relative;

border-top: none;

}

 

 

/* style the links for the top level */

.menu a, .menu a:visited {

display:block;

font-size:12px;

text-decoration:none;

color:#999;

width:149px;

height:26px;

line-height:29px;

}

 

/* a hack so that IE5.5 faulty box model is corrected */

* html .menu a, * html .menu a:visited {

width:149px;

w\idth:149px;

}

 

/* style the second level background */

.menu ul ul a.drop, .menu ul ul a.drop:visited {}

/* style the second level hover */

.menu ul ul a.drop:hover{}

.menu ul ul :hover > a.drop {}

/* style the third level background */

.menu ul ul ul a, .menu ul ul ul a:visited {}

/* style the third level hover */

.menu ul ul ul a:hover {}

 

/* hide the sub levels and give them a positon absolute so that they take up no room */

.menu ul ul {

 

visibility: hidden;

position:absolute;

height:0;

top:26px;

left:0;

width:150px;

 

}

 

/* another hack for IE5.5 */

* html .menu ul ul {

top:26px;

t\op:27px;

}

 

/* position the third level flyout menu */

.menu ul ul ul{

left:149px;

top:-1px;

width:149px;

}

 

/* position the third level flyout menu for a left flyout */

.menu ul ul ul.left {

left:-149px;

}

 

 

 

/* style the table so that it takes no ppart in the layout - required for IE to work */

.menu table {

position:absolute;

top:0;

left:0;

border-collapse:collapse;

}

 

/* style the second level links */

.menu ul ul a, .menu ul ul a:visited {

color:#999;

height:auto;

line-height:15px;

padding-bottom:4px;

width:149px;

}

 

/* yet another hack for IE5.5 */

* html .menu ul ul a, * html .menu ul ul a:visited {

width:149px;

w\idth:149px;

}

 

/* style the top level hover */

.menu a:hover {color:#ff0;}

.menu ul ul a:hover {color:#ccc;}

.menu :hover > a {color:#ff0;}

.menu ul ul :hover > a {color:#ccc;}

 

/* make the second level visible when hover on first level list OR link */

.menu ul li:hover ul, .menu ul a:hover ul{

visibility:visible;

width: auto;

}

/* keep the third level hidden when you hover on first level list OR link */

.menu ul :hover ul ul{

visibility:hidden;

}

/* make the third level visible when you hover over second level list OR link */

.menu ul :hover ul :hover ul{

visibility:visible;

}

 

 

Please help me as soon as possible...