Sent by Jamie Macdonald on 30 September 2002 18:06
Eric - thanks for your help.
On Monday, September 30, 2002, at 11:32 AM, Eric A. Meyer wrote:
>
> I can think of two ways to fix this. The first is to move the tabs
> up on the z-index without actually moving the element along the x or y
> axes.
>
> #tabs {position: relative; z-index: 10;}
While this fixed the problem in IE5, it caused the tabs to move upwards
1px in Moz (so that the tabs' bottom border was resting on the main
div's top border).
> The second fix involves being tricky with your borders. Since the
> tabs' 'ul' and the main 'div' should be the same width, both being
> block-level elements with the same parent and no margins, set a bottom
> border on the 'ul' and remove the top border on the 'div'. Thus:
>
> #tabs {border-bottom: 1px solid black;}
> #main {border: 1px solid; border-width: 0 1px 1px;}
>
> ...or something along those lines. That ought to work, as the borders
> and backgrounds of the 'li' elements should overwrite any borders or
> backgrounds of the 'ul'.
>
This worked perfectly on both browsers. The only change I had to make
was to position the <ul> with its padding instead of its margin to
avoid a blank border to the left of the first tabs.
Thanks again,
Jamie