Radio Buttons display incorrectly in IE7 but ok in Firefox?

Question

Hi, I have a site setup that is working fine in ie8 and firefox but as you can see here:

Is this an issue with some css or a png transparency? Or is this just something with IE7.

Thanks in advance :)

Answer 1

To anyone with a similar issue, the way around this was to add a

background-image: none;

To the css for the radio buttons :) Hope that helps.

Answer 2

I'm not sure if this is the phenomenom you're experiencing, but it does strongly seem that way, so:

Radio buttons are <input> tags like any other. If you have a CSS rule that applies to all input tags, they'll fire for radio buttons (and submit buttons and checkboxes, et cetera) right along with input text fields. IE is particularly notorious about this one, ironically.

What I tend to do is use the following kind of HTML snippets:

<input type="radio" class="radio" ... />

And then define my CSS rules like this:

input {
  // stuff for most input fields goes here, e.g.
  background-image:url(fancy.png);
}
input.radio {
  // reverting the rules I don't want applied, e.g.
  background-image:none;
}

While that doesn't utilise fancy selectors like one could argue one ought to, it does makes for excellent compatability with legacy browsers, especially IE6 (which, as long as Windows 2000 is still in use, likely won't vanish from the internet all too soon).