handling CSS & Images in ASP.NET MVC - asp.net

Question

Hi I am developing a simple application based upon ASP.NET MVC. I have altered the default master.css to my have my own styles. Now the only problem is that i am adding background-image property to my one of my UL->Li->A to create menus. It is working fine in firefox but the images are not showing up at all in Internet explorer (IE7/8).
Does anyone has clue what is going wrong ?
my CSS is following;
#nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
color:White;
}
#nav-menu li
{
/*float: left;*/
margin: 0.15em 0.15em;
display:block;
}
#nav-menu li a
{
background-image: url('/Images/leftbarlightblue.jpg');
background-repeat:no-repeat;
background-position:bottom;
height: 2em;
line-height: 2em;
width: 12em;
display: block;
text-decoration: none;
text-align: center;
color: white;
}
#nav-menu li a:hover
{
background-image: url('./Images/leftbardarkblue.jpg');
background-repeat:no-repeat;
background-position:bottom;
height: 2em;
line-height: 2em;
width: 12em;
display: block;
color: white;
text-decoration: none;
text-align: center;
}
#nav-menu
{
width:15em
}
while XHTML is
<div id="menucontainer">
<div id="nav-menu">
<ul>
<li><%= Html.ActionLink("Home", "Index", "Home")%></li>
<li><%= Html.ActionLink("About Us", "About", "Home")%></li>
</ul>
</div>
</div>
Yes i tried with ./Images/... but it still not worked.
Following is my hierarchy of folders
Solution -> Content
Site.css
Images
logo.jpg
leftbarlightblue.jpg
->Controllers
-> Models
->Views
Home
Shared
Site.Master

Answer 1

your stylesheet needs to use the literal path as follows:
background-image: url('/Content/Images/leftbarlightblue.jpg');
and not
background-image: url('/Images/leftbarlightblue.jpg');

Answer 2

If your working with CSS a lot I really recommend getting FireFox and FireBug, it will enable you to look at your stylesheets on the fly and see exactly why certain things aren't working.
Next have you double checked that the URL is correct for the image? A quick way of checking is to get the absolute URL (browse to it in the browser to be sure, it should be something similar to http://myapp/content/images/leftbarlightblue.jpg) and place that in your code instead of your old image URL. If that loads then it is probably your relative paths are wrong (the ../ part), because I don't know your folder structure I cannot help you with what it should be.
On a seperate note background-position should have the horizontal position followed by the veritcal position.
background-position: left bottom;

Answer 3

I guess the display depends on the url.
Where is your master.css located?
Have you tried url('Images/leftbarlightblue.jpg') instead?

Answer 4

I Got the issue, the images were created using CMYK. So FF was showing them using approximate colors while Internet explorer was totally ignoring them. Changing the format solve the issue. Thanks for your help guys.

Answer 5

Add the XHTMLfor #nav-menu, also if you have a live link of this problem post that as well

Answer 6

Try starting the image paths without all the extra dot's and slashes. For example:
/images/image.jpg
Instead of
../../images/image.jpg
I'm still not sure how the files are stored on your actual webserver so you may need to add a directory or two but usually it is not wise to use dot's to tell the server how many levels up to go in the directory tree (plus a lot of people forget that you need to specify where the image is as seen from the CSS file's location not necessarily the HTML/ASP file's location)