Hi
I have an old problem but it is new to me, I have crawled the web this morning and to no avail. The problem is I have a navbar with consisting of ul and a with a background image set to change on hover. FF, SAFARI and OPERA view it OK but the dreaded IE6 still plagues me. I can get all the li's to display the correct widths but they are all underneath each other, I am sure it is something simple. Here is the code:

<div id="header">
<div id="h_left"></div>
<div id="h_middle">
<div id="logo"><img src="../images/commlogo.png" alt="communiq8" width="188" height="22" /></div>
<div id="nav">
<ul>
<li><a href="sorry.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">CONTACT</a></li>
<li><a href="pc_support.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">PC SUPPORT</a></li>
<li><a href="sorry.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">WEB DESIGN</a></li>
<li><a href="sorry.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">GRAPHIC DESIGN</a></li>
<li><a href="index.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">HOME</a></li>
</ul>
</div>
</div>
<div id="h_right"></div>
<div class="push"></div>
</div>

#nav {
height: 34px;
margin: 0px;
padding: 0px;
float: right;
width: 72%;
}
#nav ul {
list-style-type: none;
padding: 0px;
margin: 0px;
display: block;
}
#nav li {
display: block;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #CCCCCC;
height: 34px;
margin: 0px;
padding: 0px;
float: right;
}
#nav a {
font-size: 0.7em;
color: #000000;
text-decoration: none;
background-image: url(../images/nav_grad.png);
background-repeat: repeat-x;
background-position: left top;
padding-right: 20px;
padding-left: 20px;
margin: 0px;
padding-top: 10px;
padding-bottom: 0px;
text-align: center;
height: 24px;
float: right;
display: block;
width: auto;
}
#nav a:hover, #nav a:active {
font-size: 0.7em;
color: #000000;
text-decoration: underline;
background-image: url(../images/nav_grad_hover.png);
background-repeat: repeat-x;
background-position: left top;
padding-right: 20px;
padding-left: 20px;
display: block;
margin: 0px;
padding-top: 10px;
padding-bottom: 0px;
text-align: center;
height: 24px;
float: right;
width: auto;
}

There maybe a few sloppy mistakes in there as I have been messing with it but any help or explaination would be appreciated. Thanks Chris

more like:


| link
| link
| link
| link

as opposed to:

| link | link | link | link

The '|' indicates the border on the right and it is visible in IE. I am at a loss. I really hate these IE bugs.

If you want to look it is: communiq-8 dot co dot uk

DOH! just gone back and it works in IE on the mac but now has the stepped problem you described on your previous post. damn it!

HElp!

yeah, auto wasn't working right!

I ended up putting in fixed widths, which I didn't really want to do. But that seemed to work, although my HOME navigation is now too wide and one of the others is a wee bit too short. Maybe I will have another go later.

Right tent, wrong Desert!

Thanks for the tip

Hi Kari.patila,

I have a problem with a ul in IE7 that is staircased like you mentioned. Do you have any ideas - (or should I start a new thread and post my code)

Ok thanks kari.patila - here goes guys. It would be great if you could help me. The whole site I have built validates XHTML 1.0 Transitional except IE 8 shows a strange stepped menu (staircase as referenced above). Here is the HTML:

<div id="banner" ><img src="most-subscribed-images/header.jpg" width="960" height="81" alt="Most Subscribed title" />
<div id="navDiv">
<ul id="nav">
<li id="nav_hom"><a href="home.php?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">home</a></li>
<li id="nav_map"><a href="about.php?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">about</a></li>
<li id="nav_jou"><a href="slideshow.php?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">photos</a></li>
<li id="nav_his"><a href="models.php?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">cast</a></li>
<li id="nav_ref"><a href="behind-the-scenes.php?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">on location</a></li>
</ul>
</div>
</div>

and the relevant CSS:

#nav {
margin: 0;
padding: 0;
list-style-type: none;
}

#navDiv {
margin: 0px auto;
width: 635px;
/*width: 635px;*/
}



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

#nav a {
float: left;
width: 127px;
color: #d00;
text-decoration: none;
line-height: 44px;
text-align: center;
background-image: url(most-subscribed-images/tab.gif);
background-repeat: no-repeat;
}

#nav #nav_con a {
border: none;
}

#nav a:hover {
background-position: -127px 0;
color: #fff;
}