Current tab in IE 6 horizontal list navigation stretching to fill rest of div

Question

I'm currently working on getting my top nav to work in IE 6 - my site is located here.

The tabbed item is the "current" selected menu, and its width is stretching to fill the rest of the space... what should I do to fix this without fixing the width, but setting it in some way that it doesn't expand like this?

Thanks!

Answer 1

Note this in your CSS:

#nav li a span.top-nav-parent {
    background: url(images/nav/MPSC_tabs2.jpg) 100% 0;
    display: block;
    line-height: 32px;
    padding-right: 9px;
    padding-top: 13px;
}

Since you're using SPAN to display as a block element, set the display to inline-block instead.
Like so:

#nav li a span.top-nav-parent {
    background: url(images/nav/MPSC_tabs2.jpg) 100% 0;
    display: inline-block;
    line-height: 32px;
    padding-right: 9px;
    padding-top: 13px;
}

This will now fix up your .top-current class from stealing the rest of the menu nav line.

Another thing is that it looks like you're including the stylesheet twice:

<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />

Remove one and you've just cut down a little on needless code.