Sent by Eric A. Meyer on 30 September 2002 16:04
At 15:07 -0400 9/29/02, Jamie Macdonald wrote:
>The tabs on this page,
>
>http://www.pipmg.com/test.html
>http://www.pipmg.com/main.css
>
>work exactly as I want them to in Moz; using an in-line list, when
>the <li>'s class is set to "active", it's bottom border's colour
>should be the same as the background colour (thus covering up some
>of the next div's top-border, giving the effect of a real tab.
That's odd. I wouldn't have expected that, since the 'div' comes
later in the document source. In fact I would have expected the
exact result you got in IE5/Mac:
>In IE5.2 (osx), however, the border remains black; or rather, the
>black border from the div below remains visible.
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;}
You actually shouldn't even need to declare a 'z-index' value, since
the mere act of positioning the 'ul' without offsets should place it
above any normal-flow elements. But better safe than sorry.
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'.
--
Eric A. Meyer (http://www.meyerweb.com/eric/), List Chaperone
"CSS is much too interesting and elegant to be not taken seriously."
-- Martina Kosloff (http://www.mako4css.com/)
