CSS in ASP application 1

[oldwen]

Hello all,

I am having some difficulty with css on my site. I have a simple style.css file on an .asp page as an include. When I run the page the css does not appear to fire. Now, when I push the file to another development server, the css now fires without having modified any code. My css looks something like this:

div.NoSelectedTab{
float: left;
background-color: transparent;
background-image: url('/images/GrayTab.gif');
width: 75px;
height: 20px;
text-align: center;
vertical-align: middle;
cursor: hand;
}

My asp page codes looks like this:

<div id="divTabPA" class="NoSelectedTab" onclick="ChangeTab( 'PA' );">Annual</div>

The problem is that the GrayTab.gif does not display. Does anyone have any ideas on what the cause is?? Thanks for all your help.

 

[Tarwn]

When CSS uses an image and the image cannot be found, it just doesn't display anything. This allows the browser to fail gracefully and display a background color or something of that nature.
In this case you have specified an image with a forward slash, which means the CSS sheet expects the image to be at

http://www.yourdomain.com/images/GrayTab.gif

If the files on your local machine are not sitting in the default web folder, then the grey tab will not be displayed because it is not in that one location. The easiest way to solve this would be to use a relative path.

If you are using a <link rel="stylesheet"....> tag, then you could create a path relative to where the style sheet is for the image. For instance, say you have the stylesheet in a directory called "styles" that sits at the same level as your "images" directory. You could make the path '../images/GrayTab.gif'.
if the stylesheet is sitting in the directory that holds the images directory (ie, the top directory), then you could make the path as 'images/Graytab.gif'.

Hope this helps,
-T

PS: this type of question may be better asked in the HTML/CSS forum: forum215