Hi.
I have a CSS tabstrip that is causing me headaches. It consists of an
unordered list, styled to display inline. It is located at the bottom of
a "topmatter" div, which overlaps by a pixel or two the "mainarea" div
that is immediately below. The Each tab has a 1px border. The mainarea
also has a 1px border that is meant to match the border of the tabs. the
bottom border of the active tab is supposed to be the same colour as the
body of the mainarea, so that it "disappears", as if the tab were an
extension of the mainarea.
There's a testcase here, in which the border of the tabs is red for clarity:
http://www.jackpot.uk.net/jackpot/testlayout.html
So the problem is to do with the vertical positioning of the tabstrip.
Gecko (Firefox 1.5.02): This is what it's meant to look like.
Opera: The tabs appear 1px higher than they should.
IE6: Two separate problems - the bottom border isn't appearing at all,
and the tabstrip is too low by 2px.
The mising border in IE6 seems to be a new problem - it used to be
there, and I'm damned if I know what I did to make it go away. That's
probably something silly.
This is supposed to be HTML 4.0 Strict, and as far as I can see, IE6 is
indeed in standards mode.
So how do I get the positioning to be consistent?
Thanks,
Jack.