On my site, I'm using the JavaScript Tabifier to create tabs

In Firefox, the tabs have a top border (as desired).

In IE 6/7, the tabs do not have a top border, even though I have border-top defined for the appropriate CSS property (ul.tabbernav li a).

Any CSS ideas as to why Firefox has the top border but IE does not?

UPDATE

Per ment below, the page now w3c validates BUT I am still experiencing the CSS issue as originally outlined.

UPATE 2

Yes, I'm aware IE 6/7/8 does not support border-radius but I have removed that property and explicitly defined border-top and the border-top is still not displaying for IE 6/7.

On my site, I'm using the JavaScript Tabifier to create tabs

In Firefox, the tabs have a top border (as desired).

In IE 6/7, the tabs do not have a top border, even though I have border-top defined for the appropriate CSS property (ul.tabbernav li a).

Any CSS ideas as to why Firefox has the top border but IE does not?

UPDATE

Per ment below, the page now w3c validates BUT I am still experiencing the CSS issue as originally outlined.

UPATE 2

Yes, I'm aware IE 6/7/8 does not support border-radius but I have removed that property and explicitly defined border-top and the border-top is still not displaying for IE 6/7.

• javascript
• css
• internet-explorer
• firefox

• 2 I wouldn't bother trying to debug it while there are machine detectable errors in the HTML validator.w3/… and CSS jigsaw.w3/css-validator/… – Quentin Commented Aug 17, 2009 at 20:18
• All, I have fixed the errors that David Borward brought to my attention. The page now validates – TimJK Commented Aug 17, 2009 at 20:35
• If you're talking about the All/For Sale/etc tabs, in IE 8, the top border does show. – Nick Presta Commented Aug 17, 2009 at 20:40
• @Nick, yes, I'm talking about those tabs. Hmm, this must just be a IE 6/7 ... and not IE 8. Any ideas on how to fix IE 6/7? – TimJK Commented Aug 17, 2009 at 20:46
• Note, this problem is still not resolved based on the 1 answer below – TimJK Commented Aug 17, 2009 at 21:43

5 Answers 5

Either add margin-top:1px; to ul.tabbernav or padding-top:1px; to div.listingTabs

I know this is an IE error but Firebug in FF can still help. If you inspect your ul or the div you will see the ul is outside of the display area of the parent div.

It looks like you're using curved borders. IE 6 and 7 don't support curved borders. I think IE 8 does.

Create an IE-specific stylesheet and change the way you create the borders here.

<!--[if IE]><link rel="stylesheet" type="text/css" href="/public/stylesheets/ie.css" /><![endif]-->

You can either display regular borders or remove the borders and create a background image to make it look like there are curved borders.

Try setting the line-height for those. I had an extremely similar issue in ie7 once, except it did not show both the top and bottom borders. They were actually being cutoff.

line-height: 22px;

Not sure about the exact height that would work for you here, but try it out.

I haven't got IE with which I can test at the moment; but is there a chance of the borders being outside of the height of the containing div (.tabbernav) and hidden with an overflow rule elsewhere?

On the off chance, you might want to try addding overflow: visible to the .tabbernave class. That or increasing it's height, and reducing the height of the .tabbernave lis.

All offered solutions did not work for me in IE7, but this one did :-)

Seperate the sub-styles as follows:

border-left-style: solid;
border-left-width: 1px;
border-left-color: red;

I used the solution from this source