|
HTML Tip:
Radio Buttons on a Colored Background
by Tom Dahm,
Chief Operations Officer,
NetMechanic, Inc.
If you've ever tried placing an HTML form inside a colored table, then you've probably run into an annoying bug in many browsers. When you place a radio button on a colored table background, some browsers show a white square around the button, ruining the colored table effect.
To see what we mean, look at this sample code:
<form action="nothing.cgi" method="GET">
<b>What's your favorite color?</b>
<table bgcolor="#FFCC00" width="200"
border="0" cellspacing="0">
<tr>
<td>
<input type="radio"
name="color" value="red">Red
</td>
</tr>
<tr>
<td>
<input type="radio"
name="color" value="blue">Blue
</td>
</tr>
</table>
</form>
|
This creates a simple form with two radio buttons set against a gold background. If you view this form under any version of Netscape Navigator, it will look like this:
Notice the white square around each radio button. You'll also see this problem under some versions of the AOL browser, and older versions of Opera.
The easiest way to avoid this bug is to tie an inline style sheet to your radio buttons, like this:
<input type="radio" name="color" value="blue"
style="background : #FFCC00; color : black">
|
This technique uses the cascading style sheet "background" property to set the color of the radio button so that it blends with our colored table. Figure 2 shows how our table now looks.
That's much better.
Under CSS, every page element resides within a block whose properties can be manipulated. In this example, the "background" attribute sets the background color of the block, while the "color" attribute sets the foreground color used in the element's lettering.
In our example, we don't really need to set the "color" property, since this displays in black by default. But you'll need to set this property if you want to place a light-colored form against a dark background. Of course, you could get the same effect by wrapping the INPUT tag inside a FONT element.
Using a style sheet to correct the radio button bug works only under 4th and 5th generation browsers. So, while this fixes the problem for most people using Netscape, the bug will still appear under Navigator 3, plus older versions of the AOL and Opera browsers. These browsers make up less than 5% of the browser market though, so this correction should make your forms looks good for the vast majority of your audience.
|
