"Unknown User" <me@privacy.net> wrote:
I have no idea why there is a gap between an unordered list and a
horizontal rule in my CSS tabs. This only happens in IE 5.5 and IE 6.0. It
works just fine in Opera 8 for Windows. The tabs should be stuck to the
horizontal rule without this gap: http://www.abahia.com
<hr> is a funny element and browsers treat it in various funny ways.
IE, of course, is very funny (well you have to either laugh or cry...)
In IE there is some space above the line of the <hr> that is very
difficult to remove with CSS.
In your case you seem to want a two different coloured lines beneath
your tabs. Presumably you picked a <hr> so that there would be some
separation between navigation and content when the CSS wasn't in use.
I find that in these cases it's best to wrap the <hr> in a <div> and
style that <div> and then display: none; the <hr>
..separator {
border-top: 2px solid #1569a9;
border-bottom: 2px solid #D5DDE3;
clear: both;
height: 0; padding: 0; line-height: 0;
}
..separator hr {
display: none;
}
<div class="separator"><hr></div>
A bit messy but avoids IE's funny handling of <hr> elements. And
avoids the using a background image for a solid colour.
Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor
Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>