Hey, kids! Let’s see if we can use
background-image to create
navigation tabs that have real text in them!
- 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.
NS 4.x doesn’t honor the
a:hoverselector. Lots of extra effort to get spacing and sizing of tabs reasonable.
- Works in non-CSS browsers, but doesn’t look like tabs, of course.
- 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?
- 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
- 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.
- Firefox Linux: Perfect
- NS 6–7 Linux, Windows: Perfect
- Opera 6+ Linux, Windows: Perfect
- IE 6–7 Windows: Perfect
- Konqueror Linux: Perfect
- IceBrowser: Perfect
- Chrome: Perfect
- Amaya 7.1, 8.5, 9.51 Linux: Images don’t load. Should.
- Links Linux: Works correctly, tabs positioned correctly
- Lynx Linux: Works correctly. Tabs lose positioning (no surprise).
- iCab 2.8.2 Mac: No hovering, text underlined, not centered; spacing wrong.
- NS 4.79 Linux, Windows: No hovering, sizing and spacing problematic.
- NS 4.08 Mac: Similar to 4.77, but more touchy, I think.
- IE 5.2.1 Mac: Perfect
- IE 4.01 Mac: Nearly perfect, but wants to emboss all the table cells, even though borders are turned off.
- HotJava 3.1 Linux, Windows: No images, but no surprises.