Radio Buttons display incorrectly in IE7 but ok in Firefox?

Question

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).

Answer 3

I have IE 9 and had white square backgrounds on my asp RadioButtonList shown below:

<asp:RadioButtonList ID="RadioListSearchScope" runat="server" TextAlign="Right" >
<asp:ListItem Text="Include Thread & Inquiry Keywords" selected="true" Value="0"></asp:ListItem>
<asp:ListItem Text="Include Thread & Inquiry Title Text" Value="1"></asp:ListItem>
<asp:ListItem Text="Include Inquiry & Response Body Text" Value="2"></asp:ListItem>
<asp:ListItem Text="Search All the Above" Value="3"></asp:ListItem>

This looked fine in Chrome, FireFox etc. This was resolved by NOT having a CssClass attribute in the RadioButtonList HTML control, remember this is rendered as an input as a type=radio, and then adding this to my global CSS style sheet:

    input[type="checkbox"] {
        background: transparent;
        border: inherit;
        width: auto;
    }
    input[type="radio"] {
        background: transparent;
        border: inherit;
        width: auto;
    }

That seemed to heal the radio buttons! The text was O K - but the little 'button' had about a 20x20px area that was white no matter what. That is fine until the background is something other than white!

I hope that helps!