Radio Button IE6

Two different types of radio buttons.

[vol7ron]

Here is the setup (1 forms, 2 tables):
Form
» Table » Tr » Td » Input (radio button)
» Table » Tr » Td » Input (radio button)

The two buttons look completely different, and I don't know what in my CSS is throwing it off. The buttons themselves do not have styling on them, everything is inherited from somewhere else.

In FireFox both buttons look the same, in IE6 one has a faded gray to light gray circle around a solid black dot. The other one has a solid blue circle with a green gradient dot in the middle.

Does anyone know what could be throwing this off? Debugging in Firebug doesn't really help. I don't know if it is a line-size or font-size or what. I have an image, but can't post here.

[vol7ron]

Okay I found out why. The ones that have the black dots have an "onclick" event embedded into the HTML.

I'm curious if late-binding this event will solve my issue (making them all appear the same). Or if there is some other way to solve this.

[rocknbil]

Show us the HTML. An onClick shouldn't change the appearance, however, if you're not properly quoting attributes it might cause some issues.

<input type=radio name=some-name id=some-id-on onClick=some_action()>

as opposed to

<input type="radio" name="some-name" id="some-id-on" onClick="some_action()">

[vol7ron]

everything's quoted right, html validator is 100% flawless.

I'm doing debugging, you're right that it's not just the onclick, since I put one without any in the same tablecell with the others and it has the black dot too.

What I did was took off the table class, created a row w/o a class, and put some radio buttons in a cell there. The ones without the onclick looked good, the ones with it, looked like the black dots.

I think it's a combination of some styling and the onclick event in IE6 that's throwing this off. Let me look at it more before I post some code (thought the answer was something I was overlooking).

[vol7ron]

Ah ha. It was simple, only not sure how to fix it just yet.

The problem is caused by setting the border to 0.

The problem is I set a border on all input boxes. And then I gave all the radio buttons a class="radio".

CSS looks something like:
input { border: 1px solid #ccc; border-top:0; border-left:0;}
.radio {border:0;}

*btw I'm too lazy to look up the actual css for the input, but that's what the effect is, there's only a bottom and right border on all the input fields.

I'm not sure if border is the only culprit or if it's styling the radio button in general that causes it to lose form. I'm still looking into the matter.

[vol7ron]

This page - [456bereastreet.com...] - has images of what radio buttons look like in different browsers, with the following styles:

#el01 {color:#00f;}
#el02 {background-color:#ddd;}
#el03 {color:#fff; background-color:#33b;}
#el04 {color:#fff; background-color:#33b;}
#el05 {border-width:4px;}
#el06 {border-color:#00f;}
#el07 {border:2px solid #999;}
#el08 {width:40px; height:40px;}
#el09 {font-size:150%;}
#el10 {font-size:10%;}
#el11 {padding:0;}
#el12 {margin:0;}

The el## is the id of a radio input (there are twelve of them).

Just so you know, Radio 1 and 9-12 are how I want it to look in IE6 WinXP. If the site is up, you can view it there, if it is down try creating 12 radio buttons with those id's and paste the above into your css.

[edited by: tedster at 9:43 pm (utc) on May 1, 2009]

[vol7ron]

so the solution seems to be that I have to give a class to all the non-radio buttons and take out the
input {...}

or, i'll have to stylize everything with a javascript loop (which I don't want to do because it's a longer load time). there doesn't seem to be a way that i could give the radio button a style and then take it away to return it to the state it was. For instance, I can't give a style in CSS (even a 0 width border) and then set it to null in JavaScript and have it revert back to how it should look.

Fortunately, I've already created a class for the text inputs and input buttons (for cases like this) so it's easy to modify in css.

--- It's amazing how good programming fundamentals can save you a little bit of time.

[swa66]

You could style radio buttons different from other input elements with a selector like

input[type="radio"] {
 /* styling */
}

Unfortunately IE6 doesn't support that selector (either you can exploit it in other manners to create the desired effect, or IE7.js can teach IE6 a lesson in standards.)

I'm not sure adding classes everywhere is a good practice for CSS (it's referred to as "clasitis")

[penders]

Generally, if you start to style input[type="text"], buttons etc, by setting a border or background-color then you'll lose all the default browser/OS styling for that element. The same appears to be true for radio buttons as well.

If, for instance, you set a border on a button (or input[type="button"]) you will lose the nice roundness in IE6/WinXP. There is no way to get this back, as far as I'm aware, other than not trying to style it in the first place.