Borders and bugs

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.

Jack wrote:

There's a testcase here, in which the border of the tabs is red for clarity:
http://www.jackpot.uk.net/jackpot/testlayout.html

That's a good one.

It is related somehow to line-height in ".tabsul li". There is space
around the <li> that defies all attempts to remove it, and is a function
of line-height.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Jim Moe wrote:

Jack wrote:
There's a testcase here, in which the border of the tabs is red for clarity:
http://www.jackpot.uk.net/jackpot/testlayout.html

That's a good one.
It is related somehow to line-height in ".tabsul li". There is space
around the <li> that defies all attempts to remove it, and is a function
of line-height.

OK, I'm still getting brainache with borders.

In Opera 8.54, the presence or absence of a bottom border on a DIV seems
to screw-up the vertical positioning of whatever follows it. In IE6 and
Firefox 1.5 this isn't happening. Is this a known bug? Is there a known
remedy? Google doesn't seem to know.

Example:
http://www.jackpot.uk.net/jackpot/op...tomborder.html

--
Jack.

Jim Moe wrote:

There's a testcase here, in which the border of the tabs is red for clarity:
http://www.jackpot.uk.net/jackpot/testlayout.html

That's a good one.
It is related somehow to line-height in ".tabsul li". There is space
around the <li> that defies all attempts to remove it, and is a function
of line-height.

I have a solution:

- add "line-height: 100%;" to "div.tabs"
- remove "margin-bottom: -1px"

It solves the positioning of the bottom of the <li>s. The z-index is
needed to have the tab list stack above navmain. Unfortunately not many
browsers support z-index. Neither IE6 nor Opera7 does.
Based on your test case there is no need for all that positioning,
either relative or absolute. It can as easily be done with margins or
padding. In general it is best to avoid positioning where possible since
IE does not do it very well.
Your code looks like a modified version of
<http://css.maxdesign.com.au/listamatic/horizontal05.htm>. I suggest
staying true to that code before introducing other factors.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Jim Moe <jmm-list.AXSPAMGN (AT) sohnen-moe (DOT) com> wrote:

Unfortunately not many
browsers support z-index. Neither IE6 nor Opera7 does.

Horse manure.

Unfortunately not many people understand absolute positioning and stack
levels, including you apparently. If you don't understand something,
please refrain from giving "advice".

--
Spartanicus

Jim Moe wrote:

Jim Moe wrote:
There's a testcase here, in which the border of the tabs is red
for clarity: http://www.jackpot.uk.net/jackpot/testlayout.html

That's a good one. It is related somehow to line-height in ".tabsul
li". There is space around the <li> that defies all attempts to
remove it, and is a function of line-height.

I have a solution: - add "line-height: 100%;" to "div.tabs" - remove
"margin-bottom: -1px"

Thanks, I'll look at this. I currently have some rather different code
that seems to be working in Firefox, IE6 and Opera8; but I don't really
understand it, and I have a deep loathing of voodoo programming. I
reached this point late last night, and when I understand why it's
working, I'll post an update.

It solves the positioning of the bottom of the <li>s. The z-index is
needed to have the tab list stack above navmain. Unfortunately not
many browsers support z-index. Neither IE6 nor Opera7 does.

IE6 "differently supports" z-index; positioned elements start a new
stacking context with a z-index of zero, in violation of specs, even in
standards mode. I only introduced the use of z-index after encountering
problems, and I'm now backtracking, not just because of IE, but simply
because it was a kludge.

Based on your test case there is no need for all that positioning,
either relative or absolute. It can as easily be done with margins or
padding. In general it is best to avoid positioning where possible
since IE does not do it very well.

Thanks for this advice.

Your code looks like a modified version of
http://css.maxdesign.com.au/listamatic/horizontal05.htm>. I suggest
staying true to that code before introducing other factors.

Possibly that code may be some kind of ancestor of the code I started
with, but I've never seen that particular sample before. The page layout
started with something from Position Is Everything, and the tabs
themselves are very similar to this:

http://unraveled.com/projects/css_tabs/css_tabs.html

I can't right now locate the page I actually started with, but that is
roughly the same tabs code (it seems to be fairly widely reproduced).
The use of UL isn't necessary, and I've now dispensed with it.

FWIW I did have code that was working in Firefox and IE at one time;
some subsequent change broke it in IE, and in an effort to determine
whether IE or Firefox was responsible I downloaded Opera8 and tried it
in that, which (predictably) showed different behaviour again.

--
Jack.

Spartanicus wrote:

Unfortunately not many
browsers support z-index. Neither IE6 nor Opera7 does.

Unfortunately not many people understand absolute positioning and stack
levels, including you apparently. If you don't understand something,
please refrain from giving "advice".

My comment was based on observation of how it z-index operated with

those browsers rather than actual knowledge of how it is supposed to work.
Could you offer a reference that clearly explains this?

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Jim Moe <jmm-list.AXSPAMGN (AT) sohnen-moe (DOT) com> wrote:

My comment was based on observation of how it z-index operated with
those browsers rather than actual knowledge of how it is supposed to work.

You can't tell jack shit about how it works in browsers if you haven't
got a clue of how it's supposed to work.

Could you offer a reference that clearly explains this?

http://www.w3.org/TR/CSS21/zindex.html
http://www.w3.org/TR/CSS21/visuren.html#z-index

--
Spartanicus