File Tabs
using CSS and Tables

Hey, kids! Let’s see if we can use CSS background-image to create navigation tabs that have real text in them!

Advantages

• Loads much faster than conventional implementations because there’s only one image in the whole thing.
• Tab text is selectable, searchable.
• To change the style of buttons across several documents, only need to change one gif, and maybe a CSS page, as opposed to re-generating multiple gifs for each button.
• Works in non-CSS browsers, but doesn’t look like tabs, of course.

Other ideas

• Of course, nothing here rules out JavaScript. To implement buttons that change on mousedown, you’ll still have to use it. But rather than n × 3 separate gif’s for normal, hover, and mousedown, you only need 3 gifs.
• Might also use JS to pre-load the images.
• Can make buttons with backgrounds that change on hover using JS. Only trouble is, as this is implemented, it is only easy in DOM- savvy browsers.
• SVG images would be even better, at the cost of reducing funcionality in more primative browsers.

Problems

• A little of the body color shows between the tabs. This could be fixed by introducing more tab gif’s. Is there a solution that doesn’t require extra gif’s?

A wish

• No success re-loading background on hover. Would like to put an element with a background inside an anchor element, but only block elements can take a background, and a block element can’t be inside the inline anchor. Defining the anchor as a CSS block display allows the background image, but only displays partially in NS 6, and not at all in Opera.
• It would be nice if somehow block elements could be inside an anchor, or if general elements could take pseudo-selectors such as :hover.