I'm trying to implement the purest and simplest tab
styling I can.
So I'd like each tab to be a box with left-top-right borders.
The "row of tabs" sits on top of the content box.
The content box clearly needs a left-bottom-right border.
The "line" between the tabs and the content can either
be a bottom border on the tabs (or a box containing the tabs)
or a top border on the content box.
My problem is: how do I make the "current" selected tab
run into the content box in the usual way - i.e. there
should be NO border between the current tab and the content.
It appears unavoidable that some part of the current tab
must exist opaquely-above the continuous border line
and overwrite it.
Is this possible?
Or have I made bad assumptions?
I'm aware of (and indeed, have implemented)
solutions that use background images to achieve
all this and more, but am trying to come up
with a minimalist solution, using only HTML and CSS.
Oh yeah - browser portability is important.
BugBear
styling I can.
So I'd like each tab to be a box with left-top-right borders.
The "row of tabs" sits on top of the content box.
The content box clearly needs a left-bottom-right border.
The "line" between the tabs and the content can either
be a bottom border on the tabs (or a box containing the tabs)
or a top border on the content box.
My problem is: how do I make the "current" selected tab
run into the content box in the usual way - i.e. there
should be NO border between the current tab and the content.
It appears unavoidable that some part of the current tab
must exist opaquely-above the continuous border line
and overwrite it.
Is this possible?
Or have I made bad assumptions?
I'm aware of (and indeed, have implemented)
solutions that use background images to achieve
all this and more, but am trying to come up
with a minimalist solution, using only HTML and CSS.
Oh yeah - browser portability is important.
BugBear
Comment