Hello,

I have an older HTML based website and have recently been adding a little CSS to try and learn more about it and to spice my website up a bit without having to create it all over from scratch.

My concern is that I'm currently having trouble with my Background image which shows up perfectly fine in IE 7, but the image is totally invisable/can't be seen when I view my webpage in the Firefox browser.

I was wondering if there is a missing line in the code I'm using below that Firefox needs in order to properly display the image or should I be using totally different code so both Browsers can view it O.K.?

(My webpage links to this code which is on a Style Sheet stored on the Ocatch Host)


body {
background-color:#FFFFFF;
background-attachment: fixed;
background-image: url(INDEX IMAGES/Infoheaven-Logo-Small-2-JPG.jpg);
background-repeat: no-repeat;
background-position: top left;
}


Just remember that CSS is very new to me so the less "technical" assistance the better.



Much Appreciated,

Dan -

You should always post your web site URL when you have a question. Posting clippings of code is usually insufficient. With a little extra searching, I did find your web site.

Your web page(s) are very well suited to converting to completely CSS enabled web site. All that really means is that you take all of the page formatting out of the HTML and put it in a style sheet. This then allows you to use a single style sheet for all of your pages, and lets you take advantage of the "Cascading" part of CSS.

It's good that you were testing with multiple browsers. That helps bring to light some of the differences and keeps the user from being lax with their syntax. IE tends to assume a PC universe, when in reality, most web servers are Unix based and do not adhere to PC standards. Firefox, on the other hand, tries to hold closer to the HTML/CSS standards, and will reject any sloppiness in the code. It is possible to satisfy both.

When your using Firefox, start up "Tools --> Error Console" and click on the "Clear" button, before you access your web page. Then put the URL of your web site in the browsers address box, and click the reload button. The first error you should get is "Error in parsing value for property 'background-image'. Declaration dropped.". When Firefox doesn't understand something, it simply throws it away. You will probably see a bunch of other errors.

The problem with the "background-image" entry is that Firefox tries to parse the line using spaces as delimiters. It sees the first parentheses and starts to process. But before it sees the closing parentheses, it sees a space. This tells Firefox that it reached the end of the declaration, but at that point it's incomplete, so it's discarded. The general rule at this point is, when in doubt, use quotes. So if you adjusted the "background-image" entry to look like this:

This will tell Firefox to assume that the space is part of the image reference. The statement will then be syntactically correct, and will work.

You might find a few other errors in your pages. One that is highlighted for me, when I view your web page source code is in one of your table definitions. There is a missing equal sign in the "cellpadding" reference.

You will also see that Firefox rejects most of your "margin" references. It completely throws out the ones with negative values, but just whines about the zero values. It's usually IE that has problems with negative "margin" values, but Firefox rejects them when they are not referenced to a "float" attribute. My guess is that both browsers are not paying attention to them. Put the string "margin-top firefox negative" in a google search and see all the problems that users are having with negative values.

Thanks for the great help Martin!

I changed the code as you had mentioned and it worked as I had intended with Firefox.

And yes, I'll be certain to include my website URL the next time I ask a question.

Thanks Again!

Dan --