CSS Style Not Working With ID

Question

I am using asp.net/C# for my project.Currently i have a default.aspx page and a master page.The default.aspx page has many controls , and

Answer 1

The client ID is not equal to the ID property of a runat="server" control. To get the ID on the client, you can use the ClientID property.

On newer ASP.NET versions (starting with version 4), there is also a ClientIDMode property to control the generation.

So to solve your issue, you could either set ClientIDMode to ClientIDMode.Static or somehow access the ClientID property from code behind and put this value into your CSS definition.

Alternatively you could also:

• Put the text box in some container control (e.g. a div) that has no runat="server" and put an ID into this container control, changing your CSS to e.g. #txtContainer input{border:1px solid red}
• Use the CssClass property of your text box and use this class in your CSS file, instead of the ID.

Answer 2

The ID on server controls is automatically generated and is not the same as the generated ID on the client side.

You can find what the generated ID with be with this: <%# txtCustNo.ClientID %>

ASP.NET 4 supports a new ClientIDMode property on the Control base class. The ClientIDMode property indicates how controls should generate client ID values when they render. The ClientIDMode property supports four possible values:

1. AutoID—Renders the output as in .NET 3.5 (auto-generated IDs which will still render prefixes like ctrl00 for compatibility)
2. Predictable (Default)— Trims any “ctl00” ID string and if a list/container control concatenates child ids (example: id=”ParentControl_ChildControl”)
3. Static—Hands over full ID naming control to the developer – whatever they set as the ID of the control is what is rendered (example: id=”JustMyId”)
4. Inherit—Tells the control to defer to the naming behavior mode of the parent container control

When using ASP.Net before 4.0 you have to live with the auto generated ID's.

For more info on the 4.0 features see this link.

http://weblogs.asp.net/scottgu/archive/2010/03/30/cleaner-html-markup-with-asp-net-4-web-forms-client-ids-vs-2010-and-net-4-0-series.aspx

Answer 3

1. If you are using Visual Studio 2010 you can set the clientID mode of the control toClientIDMode="Static"
2. I would advise you to use CSS along with a skin file

3. Also, if you are trying to style a control via CSS, just wrap a div around it & then apply styles like (these get applied to all inputs inside that div)

   divId input {

             width: 100px;
        }
   

   ASP.NET Themes and Skins Themes & Skins