Question

I have a master page with a .css file with some instructions. Then i have a content/child page with an image on it that i only want to have on the content page. I want to change properties on that image with css. In my content page i have declared:

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<link href="Styles/imageTest.css" rel="stylesheet" type="text/css" />
</asp:Content>
...
<asp:Image ImageUrl="" ID="imageDetails" runat="server" /> //this one in the other contentplaceholder.

in my .css-file i have:

#imageDetails
{
width:30px;
height:30px;
}

I can change properties of an image on my master page here in my css-file but not the controls on this very content page.

Why is that? Can one not have a .css for every content page and change the stuff there?

If i put my image on the master page then there is no problem, but i don´t want it there..

Answer 1

If you look at the source code you’ll probably see something like:

<img src="" id="ctl00_MainContent_ctl04_imageDetails" />

That’s not what your css is looking for, which is why it’s not working.

Two solutions:

1 you could swap the id name into a classname

.imageDetails  {  width:30px!important;  height:30px!important;  }

and try:

<asp:Image ImageUrl="Images/modellbyggeSim.jpg" ID="imageDetails" class="imageDetails" runat="server"/>

2 if you’re using .net 4 then you could use the clientmode tag to preserve your id

<asp:Image ImageUrl="" ID="imageDetails" ClientIDMode="Static" runat="server"/>

Explaination of clientmode