CSS Tabs bug in IE7 from CSS Ant 3rd

Here is the link: http://rip-rugga.com/index.html
It is from the 3rd Edition of CSS Anthology & copied it straight from the book.
Not sure what is wrong.

Any help will be highly appreciated.

/* Start Nav-Bar */

#nav-bar {
float: right;
width: 958px;
border-bottom: 5px solid #2582b6;
border-left: 2px solid #2582b6;
}

#nav-bar ul {
margin: 0;
padding: 2em 10px 0 10px;
list-style: none;
}

#nav-bar ul li {
display:inline;

}

#nav-bar li {
float: right;
background-image:url(…/images/tab_left.gif);
background-repeat: no-repeat;
list-style:none;
margin: 0 1px 0 0;
padding: 0 0 0 8px;
}

#nav-bar a {
float: right;
display:block;
background-image:url(…/images/tab_right.gif);
background-repeat: no-repeat;
background-position: right top;
padding: 0.2em 10px 0.2em 0;
text-decoration: none;
font-weight: bold;
color: #155070;
}
#recipes #nav-bar li.recipes,
#contact #nav-bar li.contact,
#articles #nav-bar li.articles,
#buy #nav-bar li.buy {
background-image:url(…/images/tab_active_left.gif);
}
#recipes #nav-bar li.recipes a,
#contact #nav-bar li.contact a,
#articles #nav-bar li.articles a,
#buy #nav-bar li.buy a {
background-image:url(…/images/tab_active_right.gif);
background-color: transparent;
color:#FFFFFF;
}

/* End Nav-Bar */

  <div id="nav-bar">                     <ul>
<li class="buy"><a href="contact-us.html">Contact Us</a></li>
<li class="articles"><a href="rates.html">Rates</a></li>
<li class="contact"><a href="feedback.html">Guest Feedback</a></li>
<li class="buy"><a href="gallery.html">Gallery</a></li>
<li class="articles"><a href="cape-town.html">Cape Town</a></li>
<li class="contact"><a href="accommodation.html">Accommodation</a></li>
<li class="recipes"><a href="index.html">Home</a></li>

</ul>
</div>

Thanks
peacD

To append to what Paul said, the REAL solution is to not try and make the LI part of the styling for the anchor. That’s almost always a miserable failure cross-browser. I would reduce the styling on the LI to just display:inline or JUST a float, height and overflow state - and add a dummy span inside the anchor to use as the right-side image. It sucks to use the extra element, it sucks even MORE to have it broken.

I also would implement sliding doors on that so that you can use one image for all your hover states, instead of four separate ones. This means no pre-caching worries and less handshakes to the server.

The link in your original post is 404 now - if you toss it back up so I can see the appearance you are trying for, I can show you how to better handle that using sliding doors and a trick to make implementing the hover states WAY easier.

ALSO, if you are going to have a image interaction behind your links, don’t use EM padding or dynamic fonts, it WILL BREAK on large font/120dpi systems (like mine).

Sounds to me like that book is trash - but I say that about 99% of books on shelves these days. Styling LI is such a total headache I always advise against even trying it.

— edit —

Looking deeper at your CSS, you shouldn’t be needing to float your outer div, and you don’t need to float right the anchors to stack them right - float right the UL, float LEFT the anchors. (putting them back in ‘normal’ order in the markup) – that should deliver the behavior you want.

Thanks it work much appreciated

Thanks to this thread I put together a little tutorial on how I’d approach doing that:

http://battletech.hopto.org/html_tutorials/hoverMenuBackground/template.html

Uses just one image to pull it off, works all the way back to IE 5.

Good example Jason :slight_smile:

Hi,

Thanks Paul will try that later when I get home & the problem is that it displays the tabs one undernearth each other not next to it like in FF & Chrome.

it just displays fine in everything besides ie 6/7.

Hopefully this will help.
& do u know what the bug is called?
So i could look for & learn more about it.

Thanks
Sadiq

& do u know what the bug is called?

It’s called IE :slight_smile:

I documented the basic bug here but only mention it in passing.

It is most often seen in a widthless left floated element that has a right floated child and the parent float then expands to 100% width. The same effect happens in a widthless float when a child element is in haslayout mode. Unfortunately there are exceptions and complications to confuse things but the main problem is width less floated elements with floated children.

Hi,

It would help if you said what was wrong as it looks fine in Firefox/safari as far as I can tell.:slight_smile:

It’s broken in IE6 and IE7 due to its float bug with multiple right floated elements.

Change the anchor to float left and it should cure it.


#nav-bar a {
    float: left;
}

IE does prefer floats to have widths unless they are floated left only and have no un-floated chidren with haslayout.