ASP:ListItem not formatting with CSS in a Sharepoint Webpart

[vavazoom]

Hello,

I am trying to enlarge the font-size of an ASP:ListItem object using CSS. I have tried a few different ways - but it is not rendering. Any ideas on what would cause the ListItem to not pick up the CSS?

First try: CSSClass="radioButtonList" under asp:RadioButtonList

<style type="text/css"> 
    .radioButtonList
    {
        font-size:10em;
    }
    .indenting
    {
        padding-left: 40px;
    }
</style>


<asp:RadioButtonList ID="RequestOptions" CSSClass="radioButtonList" runat="server">
    <asp:ListItem Value="0">Hello World<br/><span class="indenting">World</span></asp:ListItem>
    <asp:ListItem Value="1">Hello Again<br/><span class="indenting">Again</span></asp:ListItem>
</asp:RadioButtonList>

Second try: CSSClass="radioButtonList" under asp:ListItem

    <style type="text/css"> 
        .radioButtonList
        {
            font-size:10em;
        }
        .indenting
        {
            padding-left: 40px;
        }
    </style>


    <asp:RadioButtonList ID="RequestOptions" runat="server">
        <asp:ListItem Value="0" CSSClass="radioButtonList">Hello World<br/><span class="indenting">World</span></asp:ListItem>
        <asp:ListItem Value="1" CSSClass="radioButtonList">Hello Again<br/><span class="indenting">Again</span></asp:ListItem>
    </asp:RadioButtonList>

A few thoughts...

Is CSSClass an allowed attribute of ListItem? When not used in conjunction with Sharepoint, what is the normal way to change the layout of individual ListItems? Could Sharepoint be causing this error?

Thanks,

Brittany

[JorgeM]

Sometimes with these asp.net controls, you may need to implment the code and take a look at the source code via the browser. Remember, there is no HTML element called "RadioButtonList" or "ListItem". The ASP.NET engine will take this code and translate it to HTML.

Check the source code via the browser to see if the web server is actually assigning the target element the class name of "radioButtonList". If its not, that is why the CSS is not applying.

[vavazoom]

Oh okay. I see what you are saying. I'm new to ASP.NET - so thanks for pointing that out. I see in the source code that it turns the List into a table. It is still including the CSS Style I created though. Could the problem be because instead of saying "Class" it says "CSSClass" and therefore not picking it up? If this is correct - then how can I remedy this. Should I just put in "Class"?

Thanks.

<table id="ctl00_m_g_bed492a8_0da8_4869_af5e_ed578903ff20_ctl00_RequestOptions" class="radioButtonList" border="0">
    <tr>
        <td><span CSSClass="radioButtonList"><input id="ctl00_m_g_bed492a8_0da8_4869_af5e_ed578903ff20_ctl00_RequestOptions_0" type="radio" name="ctl00$m$g_bed492a8_0da8_4869_af5e_ed578903ff20$ctl00$RequestOptions" value="0" /><label for="ctl00_m_g_bed492a8_0da8_4869_af5e_ed578903ff20_ctl00_RequestOptions_0"><b>Transfer a material from the NIH</b><br/><span class="indenting"><em>Select this option if the NIH will <b>transfer</b> a material to an external organization</em></span></label></span></td>
    </tr>
    <tr>
        <td><span CSSClass="radioButtonList"><input id="ctl00_m_g_bed492a8_0da8_4869_af5e_ed578903ff20_ctl00_RequestOptions_1" type="radio" name="ctl00$m$g_bed492a8_0da8_4869_af5e_ed578903ff20$ctl00$RequestOptions" value="1" /><label for="ctl00_m_g_bed492a8_0da8_4869_af5e_ed578903ff20_ctl00_RequestOptions_1"><b>Transfer a material to the NIH</b><br/><span class="indenting"><em>Select this option if the NIH will <b>receive</b> a material from an external organization</em></span></label></span></td>
    </tr>
</table>

[JorgeM]

Yes try replacing it with just "class".

[vavazoom]

That has worked. Thanks.

[JorgeM]

great! thanks for the update.