CSS issue: Top border not displaying in IE

Question

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 comment 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.

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

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.

Answer 5

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.