The final result
What it does
Just a basic markup and CSS which create an imageless button. It support zooming / changing font-size. But it is true that imageless button is bad in semantic markup compare to <a> / <input>, as the construct of the button is layers of <div>. If you compare the semantic to buttons using sliding window, it is pretty much the same.
Tested in Firefox 3, IE 6, IE 7, Safari 3.1
The source code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css">
<style>
body{text-align:left;}
.imageless-button {display:inline-block;_display:inline;zoom:1;overflow:hidden;padding:1px;}
.imageless-button .imageless-button-outer {position:relative;display:inline-block;zoom:1;_display:inline;margin:-1px 0px;border:solid #bbb;border-width:1px 0px;}
.imageless-button .imageless-button-inner {position:relative;display:inline-block;zoom:1;_display:inline;margin:0px -1px;border:solid #bbb;border-width:0px 1px;_overflow:hidden;background:#ddd;_left:-1px;}
.imageless-button .imageless-button-top-shadow {width:100%;background:#F9F9F9;border-bottom:0.2em solid #EEEEEE;height:0.75em;overflow:hidden;position:absolute;left:0px;right:0px;}
.imageless-button .imageless-button-label {position:relative;display:inline-block;zoom:1;_display:inline;padding:0px 5px;line-height:1.5em;cursor:pointer;}
</style>
<body>
<div class="imageless-button">
<div class="imageless-button-outer">
<div class="imageless-button-inner">
<div class="imageless-button-top-shadow"></div>
<div class="imageless-button-label">Label 1</div>
</div>
</div>
</div><div class="imageless-button">
<div class="imageless-button-outer">
<div class="imageless-button-inner">
<div class="imageless-button-top-shadow"></div>
<div class="imageless-button-label">Lorem ipsum</div>
</div>
</div>
</div>
</body>
</html>
I have included the YUI reset-fonts-grids.css in the sample, but the imageless button works without it too. I just used to have YUI with me, so i put it in there to make sure it works with YUI.
Brief explaination
The way i create the imageless button is by stacking 4 div elements. As you can see in the source code above, <div class=”imageless-button”> is the base container of the 4 div element. Each div element inside create part of the imageless button.
- imageless-button-outer is top and bottom border
- imageless-button-inner is left and right border, plus the dark grey background which act less a shade
- imageless-button-top-shadow create the top shadow with a light background color and a darker border bottom
- imageless-button-label is top most layer contain the label of the button
There are two major problem in creating this, so when you adopting the code, you need to pay attention to it.
IE 6/7 inline-block hack
Except the imageless-button-top-shadow, the other 3 layer are all inline-block. IE 6/7 ignore display inline-block which it will still render the div element as block element. To make IE render inline-block, you need to use a block element, setting the display to inline, then use zoom:1 to trigger hasLayout. Then IE will magically create the inline-block
.inlineBlock {display:inline-block; *display:inline; *zoom:1;} /* this must be applied to block element, apply it on <a> or <span> will not work */
A mysterious gap
As you can see below, the line highlighted in red is not properly indented. This is intended to not to put a line break there as adding a line break will create a 5px gap between the buttons in Firefox 3.0 and Safari 3.1. I have no idea how and why a line break creates this problem. That will be great is someone can tell me…
<div class="imageless-button-label">Label 1</div>
</div>
</div>
</div><div class="imageless-button">
<div class="imageless-button-outer">