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

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.

Answer 2

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 3

Do you need the runat="server" tag? If you do not do anything with the div element in your code-behind, remove it.

Answer 4

I do not need the runat="server" tag and have removed it. Don't know why it was there ... Ids are not changed now. Thanks