StyleSheet.css Picture Problem

.NET
1

Why StyleSheet.css is not displaying the picture depends on the situation. It displays “Taken!“ or “Available!” but no picture. I am using Ajax with asp.net

My StyleSheet.css

#UserAvailability
{
padding-left: 22px;
margin-left: 5px;
float: left;
background-position: left;
background-repeat: no-repeat;
}

.taken
{
background-image: url(Images/taken.gif);
}

.available
{
background-image: url(Images/available.gif);
}

My Users.aspx

<ajax:UpdatePanel runat=“server” ID=“upUserName” >
<ContentTemplate>

<asp:TextBox ID=“txtUserName” runat=“server” AutoPostBack=“true” OnTextChanged=“txtUserName_Changed” />
<asp:RequiredFieldValidator ID=“RequiredFieldValidator1” runat=“server” ErrorMessage=“Please Enter User Name” ControlToValidate=“txtUserName” SetFocusOnError=“True” >*</asp:RequiredFieldValidator>

<div runat=“server” id=“UserAvailability”></div>

</ContentTemplate>
</ajax:UpdatePanel>

My Users.aspx.cs

protected void txtUserName_Changed(object sender, EventArgs e)
{
if (Membership.GetUser(txtUserName.Text) != null)
{
UserAvailability.InnerText = “Taken!”;
UserAvailability.Attributes.Add(“class”, “taken”);
this.txtUserName.Text = “”;
}
else
{
UserAvailability.InnerText = “Available!”;
UserAvailability.Attributes.Add(“class”, “available”);
}

        this.UserAvailability.Visible = true; 
    }
2

First thing to check is if the path to the images are correct. Images defined in a style sheet are relative to the style sheet not the page the style sheet is called from. Next since they are background images is there room for them to show being an empty div. Does adding the single word to the InnerText make enough space? What are the dimensions of the images?

Edit - I just tested it locally and it works so I’m going to go with my first instinct and say that the path is incorrect.

3

Thank you for your replay.
Path is ok.
There is a room.
It is 16px in width and height.

4

I used Build Style… button to set the path.

5

Can I see a live link? PM if it’s private.

6

The application is not live, it is private. The application name is TicketIssuerSystem.

My StyleSheet.css is under Green

TicketIssuerSystem\App_Themes\Green

and

the images are under images folder
TicketIssuerSystem\Images\

7

Yes, as I suspected the path is incorrect. You were looking for the images at TicketIssuerSystem\App_Themes\Green\Images which looks like it doesn’t exist.

As long as you aren’t running in a virtual directory this should work:

.taken
{
background-image: url(/Images/taken.gif);
}

.available
{
background-image: url(/Images/available.gif);
}

if you are running a virtual directory use something like this: (…/…/Images/taken.gif)

This should probably be in the CSS forum as it has nothing to do with .NET. :slight_smile:

8

Thank sir, I worked.

9

The preceding virgule tells the URL to look relative to the applications root.

I seem to remember that if you have the head set to runat=“server” then you can also do (~/Images/taken.gif) which may account for using a virtual directory. I’m not certain about that though.