Question

I have some CSS elements based on ids of HTML elements. e.g.

ul#subNav div
{   
    /*top:45px !important;*/
    position: relative;
    visibility: hidden;
    margin: 0;
    padding: 0;
    background: #C6DEFF;
    border: 1px solid #5970B2;
    z-index:2020; 
}

Now, I cannot apply this style to a Webpage (ASP.NET Web form) based on a Master Page, since, at the time of rendering, The ID of UL “subnav” changes to “ctl100_subnav” and hence browser no longer applies the CSS.

Any idea to overcome this?

Thanks in advance.

Answer 1

Add a class to the SubNav div and apply CSS to the class and not to the ID.

Or you are using .net 4

In order to avoid naming conflicts in controls, ASP.NET 2.0/3.5 used ClientID’s, which made each control generate the id attribute unique to that page. However these ID’s generated were long and unpredictable. Developers who have been doing Client-Side programming using a scripting language like JavaScript, have sorrow tales to tell when it came to referencing those ClientID’s in their scripts.

ASP.NET 4.0 through the new ClientIDMode property, now gives control back to the developer over the ClientID’s generated by ASP.NET controls. In my personal opinion, this was a good design decision taken by the ASP.NET team, since a lot of ASP.NET developers are using Client-side programming to enhance their interfaces and popular JavaScript frameworks like jQuery are getting more popular.