Button Samples: As TDs, DIVs, and INPUT Buttons

This link is in a TD with class="buttons bnetwork"
This one is inside a DIV with class="buttons bemail"
Notice how these TDs with class, make buttons that will stretch to fit the cell size. This is because the style has display:block. Without this, they will be text-sized. This form input button needs onmouseover and onmouseout events to set the class, rather than relying on a hover property to change on rollovers. The button is just wide enough to fit the text (it is not sized by the display:block property, though that property does prevent multiple input buttons from displaying side by side in a single TD. The text does not adopt the hover properties. This form input button needs onmouseover and onmouseout events to set the class, rather than relying on a hover property to change on rollovers. The button is just wide enough to fit the text. The text does not adopt the hover properties. This form input button has an additional class that specifies width to equal 100%. If I write enough text here, the cell should get big enough to emphasize this difference.
the TR below has valign="top"
This link is in a TD with class="buttons bnetwork"
This one is inside a DIV with class="buttons bemail"
Notice how these TDs with class, make buttons that will stretch to fit the cell size. This is because the style has display:block. Without this, they will be text-sized. This form input button needs onmouseover and onmouseout events to set the class, rather than relying on a hover property to change on rollovers. The button is just wide enough to fit the text (it is not sized by the display:block property, though that property does prevent multiple input buttons from displaying side by side in a single TD. The text does not adopt the hover properties. This form input button needs onmouseover and onmouseout events to set the class, rather than relying on a hover property to change on rollovers. The button is just wide enough to fit the text. The text does not adopt the hover properties. This form input button has an additional class that specifies width to equal 100%. If I write enough text here, the cell should get big enough to emphasize this difference.

Below is a copy of the buttons portion of the style sheet. It's a bit clunky with the extra styles for form input buttons, but I suppose they prove useful. The background images are just 1 pixel wide, so have nothing special on the right or left edges to get distorted with sizing. The black outline is a border style. If you want these styles applied to all the input buttons that have the style "button" applied, we just need to add "input.button," to the beginning of the first line.

The button background images are 18px tall. We can add "height:18px;" to the first style below, but this will only affect non-INPUT buttons (TDs and DIVs).

input.buttons, .button A, .buttons A {display:block; color:#000000; font-size:14px; text-align:center; text-decoration:none; font-weight:bold; border: 1px solid #000000; background-repeat:repeat-x;}

input.buttonsover, .button A:hover, .buttons A:hover {color:#333333; border: 1px solid #333333;}

input.bns {width:100%}

/* Color-coded Styles -- Buttons */
input.bnetwork, .bnetwork A {background-image:url(bn-netw-off.gif);}
input.bnetworkover, .bnetwork A:hover {background-image:url(bn-netw-on.gif);}

input.bemail,.bemail A {background-image:url(bn-email-off.gif);}
input.bemailover,.bemail A:hover {background-image:url(bn-email-on.gif);}

input.bhelp,.bhelp A {background-image:url(bn-help-off.gif);}
input.bhelpover,.bhelp A:hover {background-image:url(bn-help-on.gif);}

input.bpreferences,.bpreferences A {background-image:url(bn-pref-off.gif);}
input.bpreferencesover,.bpreferences A:hover {background-image:url(bn-pref-on.gif);}

input.bcommunity,.bcommunity A {background-image:url(bn-comm-off.gif);}
input.bcommunityover,.bcommunity A:hover {background-image:url(bn-comm-on.gif);}

input.bblocking,.bblocking A {background-image:url(bn-block-off.gif);}
input.bblockingover,.bblocking A:hover {background-image:url(bn-block-on.gif);}

The following row contains the code as above, but the TDs have been merged into one. The DIV maintains its own style, but the yellow TD-based button adopts the class of the merged TD.
This link is in a TD with class="buttons bnetwork"
This one is inside a DIV with class="buttons bemail"
Notice how these TDs with class, make buttons that will stretch to fit the cell size. This is because the style has display:block. Without this, they will be text-sized. This form input button needs onmouseover and onmouseout events to set the class, rather than relying on a hover property to change on rollovers. The button is just wide enough to fit the text (it is not sized by the display:block property, though that property does prevent multiple input buttons from displaying side by side in a single TD. The text does not adopt the hover properties. This form input button needs onmouseover and onmouseout events to set the class, rather than relying on a hover property to change on rollovers. The button is just wide enough to fit the text. The text does not adopt the hover properties. This form input button has an additional class that specifies width to equal 100%. If I write enough text here, the cell should get big enough to emphasize this difference.
The following row has INPUT buttons all in one TD. Because they have the display:block style, they line up vertically instead of horizontally.