Missing Background Image with Firefox/Safari

[noen]

Here is my background image code:

#main1 { width: 755px;background: url("/images/leftbg.gif") top left repeat-y; }

Which works perfectly in IE5/6 and Opera. But in Mozilla, Firefox and Safari it doesn't display the background image at all.

I have had this happen previously in developing this page, but was able to resolve the problem by fixing page errors.

Does anyone have any clue why this is not working in Mozilla based browsers?

[drbrain]

The validator seems to be broken, It rearranges the rule properly, but gives no warnings.

The correct order for the background shorthand property is:

[<'background-color'> ¦¦ <'background-image'> ¦¦ <'background-repeat'> ¦¦ <'background-attachment'> ¦¦ <'background-position'>] ¦ inherit

You have position before repeat, try:

#main1 { width: 755px; background: url("/images/leftbg.gif") repeat-y top left; }

You may have to add 'scroll' between the -repeat and -position values.

PS: Safari is not a Gecko-based browser

[choster]

Also try removing the quotation marks. Browsers seem to be finicky about url() notation.

[noen]

I made that change.

After some fiddling, I notice the background *is* there, but it is only about 1/5th the size of the full cell.

Why is it stopping and not repeating for the entire height of the containing div? I use no absolute positioned elements at all, just floats for a 2 column layout.

Thanks

[drbrain]

How tall is #main? (Put a border around it to tell.)

[noen]

It's basically 0px for height;

I don't understand why though, all my block elements are relatively positioned, so it *should* encompass them right?

How can I fix this so the main parent div expands its height to include it's children?

[noen]

Fixed the problem. One too many </div> tags.

Thanks guys!