CSS Border Problem (IE vs. Everything else)

[briguyd]

I'm having a problem where the top and bottom borders aren't showing up as I want them to in IE, where they work fine in Firefox and Opera. You can see the page at http://209.7.3.209/index-new.php

The Tabs for the navigation all have side borders in all browsers, but the top and bottom borders don't show up in IE6 or IE7. The CSS file that applies is http://209.7.3.209/tabber.css (but there are 2 more CSS files used, the main one being http://209.7.3.209/fenwick.css).

Thanks for the help!

[koyama]

The Tabs for the navigation all have side borders in all browsers, but the top and bottom borders don't show up in IE6 or IE7.
There is a bug in IE6/7 where an element that hasLayout (http://www.satzansatz.de/cssd/onhavinglayout.html) will clip content that should really be rendered outside. Your ul element hasLayout because you have given it an explicit width. In many respects hasLayout is the same as overflow: hidden.

Fortunately, you can neutralize the bug by setting position: relative for the child element. In your case:

div.tabberlive ul.tabbernav li a {
padding: 3px 0.5em;
margin-left: 3px;
border: 3px solid #778;
background-color: #000000;
text-decoration: none;
color: #fff;
z-index: 999;
position: relative; /* IE6/7 fix for clipped content */
}

[briguyd]

Awesome, that did it, thanks!