Workaround for radio-button color problem

Posted on September 20, 1999

in Code

by Isaac (isaac)

Rated 4.37 (Ratings: 7) (Add your rating)

Want more?

More articles in Code
More articles by isaac

Isaac

Member info | Full bio

User since: December 13, 1998

Last login: October 27, 2007

Articles written: 67

If you've been working as a web developer for any length of time, then the chances of you having come across this bug/feature, are fairly high. Most developers will know exactly what I'm talking about - you might have a black page background color (using body bgcolor=000000), and then a form within a table cell with td bgcolor=ffffff, but instead of inheriting the bgcolor of the nearest environment (in this case, the table cell), the radio button appears in a small box (some Windows and Mac browsers) or beside a small line (Mac only), the color of which is identical to the page background.

It looks ugly.

Netscape, and other browers which suffer from this problem, are not entirely to blame for this unintentional error - the HTML specs don't exactly specify details with regards to displaying form fields. None of this, however, really matters now that the browsers have been released, and we're trying to code around the problem - all we need to worry about is that there is a problem, and we require the workaround.

Here it is: (insert desired color in place of #xxxxxx)

Insert this attribute into your radio button tag:

style="background : #xxxxxx; color: #000000;"

For example:

<input type="radio" name="fish" value="trout" style="background : #xxxxxx; color: #000000">

Or alternatively, insert this into your stylesheet code, and apply a class=radio to your input tag:

input.radio { background : #xxxxxx; color: #000000; }

So exactly which browsers does this problem effect? Well, here's the list (taken from OTIVO Inc):

Netscape 4.01 - 4.5 (Mac) - these browsers show the line instead of the box
AOL 2.7 and AOL 3.0 (Mac)
iCab 1.2p (Mac)
Netscape 4.06 (Windows 3.1)
Internet Explorer 3.03 (Windows 3.1)
Netscape 4.0 - 4.5 (Windows 9x/NT)
Opera 2.12 (Windows 9x/NT)

(Please note that this workaround will not work in Netscape when JavaScript or Stylesheets are disabled.)

Isaac is a designer from Adelaide, South Australia, where he has run Triplezero for almost a decade.

He was a member and administrator of evolt.org since its founding in 1998, designed the current site, and was a regular contributor on evolt.org's direction-setting discussion list, theforum.

On the side, he runs Opinion, Hoops SA, Confessions, Daily Male, and Comments, as well as maintaining a travel gallery at Bigtrip.org.

27 comments on this article. Log in to add your comment | Rate this article:

Submitted by pedro on September 21, 1999 - 11:53.

Thanks for a good tip to a frustrating problem. For older non-CSS capable browsers, I have tried setting the page background color to whatever I want the button background color to be. Then, I use a solid-colored gif (of a different color) as the background image. It adds a touch more load time to the page - but hardly noticeable. The only drawback of this method is that you are out-of-luck if you have multiple buttons with different colored backgrounds.

Submitted by theuiguy on November 15, 1999 - 13:15.

I've occasionally had problems getting Netscape 4.x on Windows to replace an existing color, especially with nested tables. As a workaround, I use a color almost the same, such as #FFFFFE to replace white. Anyone else seen this problem?

Submitted by ilyah on December 29, 1999 - 01:11.

I've run into the exact same problem before (if i specify the same color as the background color with nested tables, the radio button doesn't show) and had to use an off-by-one color as well.

Submitted by jaylard on January 21, 2000 - 12:44.

theuiguy and ilyah, I had just run into this and was wondering what I was doing wrong. Tried your suggestion, and it works like a charm. It would be interesting to know the cause behind this... Thanks.

Fix not working in NS 4.7

Submitted by ghurtado on April 12, 2001 - 09:37.

I tried the fix described above and Netscape 4.7 still displays the body background color as the bgcolor for the radio button. Here is the code I used: Netscape background color in radio buttons test Regular radio button: (cell with HTML background color) CSS radio button: (cell with CSS background color) Am I doing something wrong? Thanks for your help!

code not working

Submitted by ghurtado on April 12, 2001 - 09:39.

About my post above, the code didnt show up, so let me try again: (angle brackets replaced) {body bgcolor="#ff8c00"} {h2}Netscape background color in radio buttons test{/h2} {form} {table border="2" bgcolor="#FFFFFF"} {tr} {td}Regular radio button: (cell with HTML background color) {input type="radio" name="testRadio" value="Test button"}{/td} {/tr} {tr} {td}CSS radio button: (cell with CSS background color) {input style="background: #ffffff; color : #000000" type="radio" name="testRadio" value="Test button"}{/td} {/tr} {/table} {/form} {/body}

Figured it out

Submitted by ghurtado on April 12, 2001 - 09:53.

This is one of the oddest bugs I have ever seen. I finally got the above workaround to work, and figured out that the only way that NS 4.7 would render the button properly is if the "color" specified (content color, not background color), was anything different from #000000 (black). Here is the code I used fot the style sheet. input.testRadio { background : #ffffff; color : #000001; } I hope this helps someone out there dealing with the same quirky bug.

RE: code not working

Submitted by jaylard on April 12, 2001 - 10:01.

ghurtado: the problem with your original effort was that the background-color of the radio element needs to be slightly different from the background-color of the table. For instance, since the background-color of your table is #ffffff, you could make the background-color of your radio element #fffffe.

The alternative solution that you provided (slightly offsetting the foreground color value) also seems to work, so should be equally valid.

Somebody see if you can fix this radio button prob

Submitted by freddie on June 11, 2001 - 12:10.

No Matter what I do the background color shows through. Need to keep the bgcolor up as well as the background gif any suggestions I believe I tried them all already If you can get it to work from source code let me know thanks

continued from above

Submitted by freddie on June 11, 2001 - 12:11.

http://gobaylorbears.fansonly.com/ Here is the link

Re: Somebody see if you can fix this radio button

Submitted by ghurtado on June 11, 2001 - 12:57.

Freddie, I fixed your problem, all you have to do is add this to your stylesheet:

input { background : #ffffff; color : #336600; }

thanks that works great in the stlye sheet

Submitted by freddie on June 11, 2001 - 13:19.

but can you put it in the tag ex: style="background : #ffffff; color : #336600;" then this doesn't work ???

Radio button problem

Submitted by jaylard on June 11, 2001 - 14:04.

freddie,

Set the background-color so that it is slightly different than the background-color of the table. Your table background-color is #ffffff; set the input background-color to something like #fffffe
Place your style declarations within the embedded style sheet at the top of the page (within the <style> element), rather than inline within each radio input using style attributes. Netscape can stumble over inline declarations, especially if embedded or external declarations are competing for attention.

code is not working for my problem...

Submitted by nikhil on November 29, 2001 - 13:38.

Hi, I am trying to fetch some data from an access table, which has html tags in the records as follows: Mathematics INPUT value=Mathematics:1: name=Mathematics type=radio checked None.

Of course the above code is in between html tags. I am able to see everything in a netscape 4.7 environment except the radio buttons, i tried putting in the :'style="background : #xxxxxx; color: #000000;" in the radio button tag, but still the radio button is invisible, i can see radio buttons in the IE environment, but we want the apllication to work in both the browsers. I would appreciate if anyone could comment on the above problem. thanks,

Can you show me a working URL?

Submitted by ghurtado on November 29, 2001 - 15:15.

Nikhil,

I would be happy to try and help you, even though it sounds as though your problem is not exactly what the topic is about. If you can send me a web address of somewhere where I can look at your code, I may be able to give you a hand.

Thanks.

FORM tag?

Submitted by isaac on November 29, 2001 - 16:25.

Nikhil,

Your question would be more appropriately asked on the evolt.org discussion list: thelist. There are many people there who, given a URL with your code, would be able to promptly suggest a solution.

Netscape 6.x compatability

Submitted by dbowne on January 15, 2002 - 14:50.

Netscape 6.x (Windows, NT) If you are using this fix you will have a problem with Netscape 6.x Browsers. When you assign a background color to a radio button, it also fills the inside circle of the radio button, making the radio button very hard to use with dark bgcolors. Anyone found a way around this?

Javascript styles workaround

Submitted by LittleAlbinoGirl on July 11, 2002 - 17:08.

With that nested tables and Windows Netscape 4.7 problem, I found that if I use Javascript styles for the offending radio button, and also make the color slightly off from the one I want it works. But it doesn't work if there is also an inline style applied. [style type="text/javascript"] if(document.layers){ tags.input.backgroundColor = "#ffcc00"; //I really wanted ffcc33 } [/style]

RE: Javascript styles workaround

Submitted by jaylard on July 11, 2002 - 17:36.

LittleAlbinoGirl,

Of course, Javascript styles are strictly a Netscape 4.x technology destined for extinction. Instead, I recommend that you use the fix cited above rather than resort to the method you used (although it does provide a way to apply the fix only to Netscape 4.x).

Additionally, inline style declarations -- especially when combined with another style sheet techniques -- are notoriously problematic in Netscape 4.x, and should be avoided.

RE: Javascript styles workaround (Corrected Link)

Submitted by jaylard on July 11, 2002 - 17:45.

When I added the link in my previous post, I failed to take into account the <base> element embedded in the page that points links to the Evolt home page. The correct link is right here.

Javascript styles workaround

Submitted by AZRN on November 23, 2002 - 20:35.

I have a form within a table (w/ bg image) inside another table (w/ bg image, too). In IE 5.5, all is well, but in NN 4.7 the radio buttons and check boxes were hosed. I did try all the workaround ideas I could find as well as several variations of the solution mentioned here, but only the JavaScript style worked. I really did not want the radio buttons in IE to change--they were fine as is, and the solution listed here changes them in all browsers. Plus, the rendering of background color across the whole button in later versions of browsers is a problem.

Since it is only NN 4.7 that's giving me fits, that's the only browser I need the workaround for! I await the day when everything NN 4.7 truly is extinct. With this JavaScript (if it's true that only NN 4x sees it?), I am a happy camper for now!!!

Thanks LittleAlbinoGirl!

Start of page header

Other Fine Evolt.org Sites

Navigation Starts

Article Categories

Highest rated articles

Submit

Recent comments

Main Page Content

Workaround for radio-button color problem

Want more?

Isaac

Fix not working in NS 4.7

code not working

Figured it out

RE: code not working

Somebody see if you can fix this radio button prob

continued from above

Re: Somebody see if you can fix this radio button

thanks that works great in the stlye sheet

Radio button problem

code is not working for my problem...

Can you show me a working URL?

FORM tag?

Netscape 6.x compatability

Javascript styles workaround

RE: Javascript styles workaround

RE: Javascript styles workaround (Corrected Link)

Javascript styles workaround

When I added the link in my

Nice tip, Thanks

Netscape, and other browers

turn off bold style

What is problems with bold

style="background : #xxxxxx;