Page 1 of 1

FireFox removes header image [SOLVED]

Posted: Thu Mar 22, 2007 11:57 am
by 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?

Re: FireFox removes header image

Posted: Thu Mar 22, 2007 12:18 pm
by 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

Re: FireFox removes header image

Posted: Thu Mar 22, 2007 4:52 pm
by marshy
I replaced the spaces with _ and it has worked.

Thanks.