The Container background image is not showing on FF but shows on IE anyone know why? www.dragonstardesign.com

I don't see any obvious difference between firefox and IE7. Am I missing something? One thing I could point out is that the #container div is not expanding to hold the floats, but I tried changing it in Firebug by setting its overflow to hidden, and I didn't see anything show up.

It will only show up at the bottom of the pages where the layers you helped me with earlier

If you're going to use floats, you need to CLEAR those floats - which is what Wayfarer was pointing out.

http://css-discuss.incutio.com/?page=ClearingSpace

Tried these did not work the layers end up all over the place any other ideas?

Don't clear every float, no. But it is proper to clear the floats when a new row is needed.

Ok, audiomad, I'm looking at your CSS. You have got a LOT of extraneous stuff in there that simply won't work. You've got z-index all over the place, as well as top and left definitions, and you're putting this on elements that are NOT positioned. Z-index, along with the top and left properties ONLY work and apply to elements that are positioned absolutely or relatively, so applying them to other elements is a waste of time as they do NOTHING.

You have <divs> stuck inside of <li></li> - that's improper coding, divs cannot be inside of lists that way.

You're using deprecated code like <div align="center"> on an XHTML Transitional doctype - this, again, shouldn't be. Alignment like that is PRESENTATIONAL and should be specified in your CSS.

To clear the floats and make the bg image on #container 'wrap' properly, you need ONE clearing element on your home page, right after the closing </div> for #footer and before you close the container. Like this:

</div>
<br class="brclear" />
</div>

</body></html>

.brclear { /* Use a break with this class to clear float containers on both sides. */
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}

This works, I downloaded your page and did it.