Wednesday, December 17, 2008

ASP.NET Radio Button List Styling problem with IE 6

Hey friends.
Another strange problem. I'm having an ASP.NET control RadioButtonList on my page which is having some background color other than white. now when i see the page in firefox it was looking proper. but when i see the same in IE 6 its was not looking proper. see this:
So as you can see the output, i was not not happy at all and wondering why my page is displayed like that in IE.
So I started analyzing it by IEDeveloper tool bar plugin.

here is my markup of the drop down:

<asp:RadioButtonList ID="rdoSize" runat="server" CellPadding="3" class="rdo" RepeatDirection="Horizontal">
<asp:ListItem Value="1" Selected="True"><br/><span class='rdoItem'>12"x18"<br/>Rs. 349</span></asp:ListItem>
<asp:ListItem Value="2"><br/><span class='rdoItem'>16"x20"<br/>Rs. 449</span></asp:ListItem>

<asp:ListItem Value="3"><br/><span class='rdoItem'>20"x24"<br/>Rs. 549</span></asp:ListItem>
<asp:ListItem Value="4"><br/><span class='rdoItem'>20"x30"<br/>Rs. 649</span></asp:ListItem>
</asp:RadioButtonList>

so I just added this to my css and its fixed now and looking proper in both browsers.

table.rdo td /*this is only for good formating */
{
vertical-align:top;
text-align:center;
width:50px;
background-color:Transparent;
}
table.rdo td input /*this has resolved the actual problem*/
{
background-color:Transparent;
border:none;
}

and here is what I get:

Hope this will help you all as well.
wish you all happy coding :)

2 comments:

Please add your valuable comments about this post if it helped you. Thanks