Add the XHTMLfor #nav-menu, also if you have a live link of this problem post that as well
I guess the display depends on the url.
Where is your master.css located?
Have you tried url('Images/leftbarlightblue.jpg')
instead?
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;
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.
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)
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');