background images not showing in IE and Firefox

[dumbasdirt]

Hello,

I'm new here, and this is my third attempt at posting. Lets hope I get it right this time...

I'm experiencing an issue with background images not showing up in Firefox/Mozilla and IE.

My page looks fine on Mac Safari (all background images appear), but in Firefox and IE the drop shadow (background.gif) in the #container div and the background pattern (pattern.gif) in the body aren't showing up.

The XHTML and CSS both validate.

I'm new to CSS so I imagine it's a simple oversight...

Thanks.

relevant CSS:

body {
font: 8pt georgia;
color: #000;

background: url(images/pattern.gif) none repeat-y;

margin: 0px;
position: relative;
width: 664px;
top: 0px;
left: auto;
right: auto;
margin-left: auto;
margin-right: auto;
}

#container {
background-image:url(images/background.gif) repeat-y top left;
padding: 0px 0px 0px 0px;
position: absolute;
right: auto;
left: auto;
width: 664px;
background-color: #FFF;

}

[createErrorMsg]

I'm new here,

Welcome to WebmasterWorld!

background: url(images/pattern.gif) none repeat-y;

The only background property that accepts a value of "none" is background-image [w3.org]. The browser is probably reading this and applying it to that property. Since the "none" comes after the image url, it is overiding the url, resulting in no background.

Remove the "none" to fix.

background-image:url(images/background.gif) repeat-y top left;

You've used the background-image property, but given it values for background-image, background-position, AND background-repeat. Since it does not recognize these values, the browser ignores the entire rule. I'm surprised to hear that the validator didn't catch it.

Remove the "-image" part to fix.

Both of these problems relate to the shorthand property for background [w3.org], which combines all of the various background properties into one rule. It's worth reading the specs page on it linked above, which tells you what properties can be combined and in what order they should be placed when you do so.

cEM

[dumbasdirt]

Thank you for the help! My page is working well across all of the browsers I've tested it on!

It's great to learn that about the background properties and the shorthand, and I will book-mark that page for future reference.

Thanks again!