6

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>

  1. Yes i tried with ./Images/... but it still not worked.

  2. Following is my hierarchy of folders 

    Solution -> Content
               Site.css
               Images
                      logo.jpg
                      leftbarlightblue.jpg
       ->Controllers
       -> Models
       ->Views
             Home
             Shared
                     Site.Master
Gripsoft
  • 2,570
  • 7
  • 27
  • 30

6 Answers6

5

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');
Mark79
  • 233
  • 1
  • 2
  • 7
4

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;

John_
  • 2,931
  • 3
  • 32
  • 49
  • Thanks for help, I have Firebug in FF and Developer Tools in IE too, again i checked ur suggestion by putting that leftbarlightblue.jpg in html page itself. THE SAME PROBLEM EXIST AGAIN, IT IS BEING SHOWN IN FIREFOX PROPERLY BUT NOT IN IE 6/7/8 – Gripsoft Jan 13 '09 at 12:00
  • If you browse to the image directly in IE does it show? I've only ever seen a image showing in one browser but not in another when an image has been a bit "dodgy". Open the image in an editor and resave it then try and load the image again, making sure the cache is clear. – John_ Jan 13 '09 at 12:16
2

I guess the display depends on the url.

Where is your master.css located?

Have you tried url('Images/leftbarlightblue.jpg') instead?

Ole Lynge
  • 4,457
  • 8
  • 43
  • 57
2

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.

Gripsoft
  • 2,570
  • 7
  • 27
  • 30
  • See also http://stackoverflow.com/questions/17469/ie6-cant-load-a-normal-jpg Firefox 2 was not able to display CMYK jpegs, but Firefox 3 can. – David Kolar Jan 13 '09 at 13:57
0

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

Andrew G. Johnson
  • 26,603
  • 30
  • 91
  • 135
0

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)

Andrew G. Johnson
  • 26,603
  • 30
  • 91
  • 135