FireFox removes header image [SOLVED]

[marshy]

I have encountered a problem where my header image has been removed.
I have used Firebug to examine the HTML/CSS and I have traced the problem to the CSS.
My CSS look like this:

Code: Select all

div#header h1 a {
   background: #000 url(images/Classic Logo Silver.jpg) no-repeat center center;
   display: block; 
   height: 145px;             /* adjust according your image size */
   text-indent: -999em;  /* this hides the text */
   text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

But when viewed in FireFox the CSS changes to this:

Code: Select all

div#header h1 a {
   display:block;
   height:145px;
   text-decoration:none;
   text-indent:-999em;
}

The background tag has gone.  The image is displayed in IE but not FireFox.
Anybody got any ideas why?

[RonnyK]

marshy,

two things,

you might use a name for the header that doesn't have spaces in the name, so either combine the words, with "-" or make it a short name.

The second, both the height of the "DIV#HEADER" and "DIV#HEADER h1 a"  have to hold the same height, as IE and FF interpret it differently, make both heights similar.

Ronny

[marshy]

I replaced the spaces with _ and it has worked.

Thanks.