Ever wanted to show your visitors more stuff without scrolling your logo and links off the display.
This scheme works quite nicely in MSIE5x and in NS6x, but does not work in Opera (see the tab Notes 1). It is an extension of a pop-up menu scheme lifted from Eric Meyer's css/edge pages.
It does not validate as legal (X)HTML.
The implementation here is fragile ( mostly in matters of horizontal positioning). Fortitude and CSS experience are thus both necessary prerequisites for adaptation to your own purposes.
The label and the associated section of text are both included in a hyperlink. The labels are stacked horizontally using float:left and a fixed width. The tabbed text is made invisible by a span with display:none. When the mouse hovers over the tab, a:hover asserts display:block and the spanned section is displayed. More or less as shown below.
a {display:block; float:left; width:100px...}
a span {display:none...}
a:hover span {display:block...}
...
<A name=Tabn href=#Tabn > Label <span>Text Section</span></a>
...
The front cover of the tabbed construct is a normal text box that is not included in the hyperlink. It is overlaid by the spanned text. Due to the differences in edge handling between MSIE and NS, some care is required for the exact dimensions, especially for the 1 pixel borders.
The round-cornered tabs are background images which include the background color. If square tabs are acceptable this can be done without graphics, perhaps using border styles.
Placing a hyperlink on the front cover required additional styles to override those already established for hyperlinks, in particular float:none to turn off the float:left
The technique relies on a redisplay in response to cursor movement, which is perhaps why it does not work for Opera.
The tabbed div's cannot themselves contain hyperlinks, presumably because they are already contained in the text of a hyperlink.
The graphic tabs, even with transparent backgrounds, do not allow the container's background to be seen. This is presumably because they are themselves already background images. As a result, however, the colors of the tab graphic must be carefujlly matched to the HTML context.
I have no opinion as to which is browser is better; it just happens that I develop using MSIE and then fiddle the HTML to get something reasonable in both MSIE and NS
Adding clear:both to the front cover style persuaded NS to display the top and right border edges similarly to MSIE.
Centering the hyperlink on the front cover was ok in MSIE but perplexing in NS; adding display:inline to the hyperlink style solved the problem, but I don't think I understand why!.
Gallia est omnis divisa in partes tres, quarum unam incolunt Belgae, aliam Aquitani, tertiam qui ipsorum lingua Celtae, nostra Galli appellantur. Hi omnes lingua, institutis, legibus inter se differunt. Gallos ab Aquitanis Garumna flumen, a Belgis Matrona et Sequana dividit. Horum omnium fortissimi sunt Belgae, propterea quod a cultu atque humanitate provinciae longissime absunt, minimeque ad eos mercatores saepe commeant atque ea quae ad effeminandos animos pertinent important, proximique sunt Germanis, qui trans Rhenum incolunt, quibuscum continenter bellum gerunt. Qua de causa Helvetii quoque reliquos Gallos virtute praecedunt, quod fere cotidianis proeliis cum Germanis contendunt, cum aut suis finibus eos prohibent aut ipsi in eorum finibus bellum gerunt.