Why does my ASP.NET page add the prefix 'ctl00_ctl00' to html element IDs and break the design?

Question

I don't understand it.

The ids of html elements in the master page are changed by the same id but with a prefix and it's breaking the css design.

In the master page I have:

<div id="container" runat="server">

    <asp:ContentPlaceHolder ...

...

The above code is rendered

<div id="ctl00_ctloo_container">

     ...

And the CSS styles are gone obviously.

How do I stop it?

Thanks!

Answer 1

WebForms should only rewrite the ID's of server controls (like <asp:ContentPlaceHolder />, not ordinary HTML element like <div id="container"> without runat="server"

You cannot prevent the framework from rewriting ID's on server controls. You can use class names instead, though.

Answer 2

AFAIK you cannot do this. This is the default behaviour because of the control tree.

If you would like to use CSS then set the CSS class directly, don't depend on IDs, like

<asp:Whatever runat="server" id="whatever" CssClass="whateverClass">

Update: Here is a similair thread, but it won't help on your CSS problem.