Gildner Solutions

ClientIDMode in ASP.NET 4.0

Filed under CSS

I have some CSS that was set up for me by a graphics artist.  One of CSS elements is an ID that is used to format a <div> tag all nice and pretty.  I decided I needed to manipulate this <div> through code, so I thought I would change it to an <asp:Panel> as I've done in the past.  The problem I found was that the panel control has a property called CssClass, where you can specify some css to use, but what if I wanted to use my existing css ID and not a css class?  Confused about the difference, check this out.

The problem is that ASP.NET will auto generate your control ID's and the ID is what needs to be specified in order to use my css!  If I change my <div> to a <asp:Panel>, the ID will be generated something like:

<div id="MainContent_productImage">

It prefixes the ID with the parent container, in this case, a MainContent div.  Well, I want the ID to be productImage so my styling is applied.

In ASP.NET 4.0, there is a new ClientIDMode property.  I set the ClientIdMode to "Static" and I get the exact ID I want.  That is,

 <asp:Panel id="productImage" runat="server" ClientIDMode="Static">

will render out as:

<div id="productImage">

I get the benefit of manipulating the <div> in code behind before it's rendered AND I get to keep the ID I want!

I could go into a long tuturial here, but Rick Strahl has an excellent-as-always post here

Here's an MSDN link

CSS Tip : Image Borders

Filed under CSS

Who wants the ugly default border around an image? 

Instead of adding: 

style="border: none"

to every image, just add:

a img { border: none;}

to one of your css files.

I can't believe how simple this is.  CSS is not one of my strengths, but as I work more and more, I find great tips that make my site look great.

Scott