runat="server" breaks my jquery / css functionality

Question

I have a page that changes media on a page, like pictures or PDF's, using JQuery so that each user click doesn't require a page refresh / new database access.

I have a DIV container that holds all this activity. It works and looks great! When I add runat="server" to the DIV tag, all my nice behaviour breaks. This is without any code written yet to manipulate the object server side. For some reason, my styles / behaviours do not get applied correctly.

I'm guessing there is something simple, but I'm tired of guessing. I'm hoping someone on here knows why that might be happening?

Edit: This is for an ASP.Net application.

  <div id="slidingContent" runat="server" >
    <div class="item" id="media3" name="media3">
       My media here.
    </div>
  </div>

Answer 1

I'm assuming you have this in the context of a .net application. If so you should specify that somewhere in your question. runat="server" will mangle id; view the HTML source in your browser to see exactly what it does. You need to add classes to your markup and modify your CSS and JavaScript to use the classes instead of ids.