Gap between ul and hr

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
Our CSS guru Lauri will most probably find out why
Thanks,

--
Boost the visibility of your web site in Google!
http://www.digitalpoint.com/tools/ad-network/?s=5203

Using Opera's revolutionary e-mail client: http://www.opera.com/mail/

http://www.auriance.com - http://www.auriance.net

"Unknown User" <me (AT) privacy (DOT) 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 <steve (AT) pugh (DOT) net> <http://steve.pugh.net/>

On Mon, 04 Apr 2005 11:55:57 -0300, Steve Pugh <steve (AT) pugh (DOT) net> wrote:

A bit messy but avoids IE's funny handling of <hr> elements. And
avoids the using a background image for a solid colour.

Thank you Steve, this fixed it. I have tried first to use the box model
hack, defining a negative top margin for IE 5.5, another one for IE 6, and
no margin for the good browsers. Problem is there was a light grey outline
that is visible between the blue tab and the horizontal rule, pay
attention: http://abahia.com/index-negative-margin.html (only IE for
Windows)

Then I wrapped the horizontal rule inside a division, and again, I had to
define different negative margins for IE 5.5 and IE 6, but now I don't
have the grey outline and the white gap anymore
http://abahia.com/index-wrapped.html
Thanks!

Have a great day,



--
Boost the visibility of your web site in Google!
http://www.digitalpoint.com/tools/ad-network/?s=5203

Using Opera's revolutionary e-mail client: http://www.opera.com/mail/

http://www.auriance.com - http://www.auriance.net

Nice job using the left background with the LI element and the right
background with the A element. Keep thinking outside the box like that,
hopefully it will rub off on some of the rest of us. =)

-tm