Topic: CSS Stacking Properties

http://www.rpi.edu/~laporj2/rtbalbany/

This is a page I'm working on for a friend of mine who is part of an organization. The problem on the page is obvious: the earth and moon, which ought to be part of the background, are rendered on top of everything else.

I have tried z-indexes, but it doesn't work, as I believe it only applies to absolutely positioned elements.

Is there any way to fix this, other than trimming the images themselves?

Thanks! IW

---
"Consider a simple room with only four walls, a ceiling and a floor. Can you see it in your mind?s eye? You better not be able to; I haven?t specified a light source yet." - Paul Nettle

You can specify that the type of position of an element without specifying its top, left properties.
Add position:absolute; to the rule of #content and voilà. I checked that in IE6.0, FF1.0.2 and OP8.0beta2

Giving them a *negative* z-index works in IE.

Unfortuntely, this hides them in Firefox. Following the solution at http://archivist.incutio.com/viewlist/css-discuss/5061 *almost* worked, but then for some reason in my pre-release version the images were aligned to the top of the content div, and not the body. I found that also putting border-top:1px solid black; into the body fixed this problem, but then of course you have a tiny black border at the top. Maybe this will help anyway.


 

in the #moon and #earth css, add z-index:0;

to #content add position:relative;z-index:1;

Worked in IE and FF for me.

Fixed. Thanks to all. Nathus's method was the one I went with since it was the minimum of fixes.

PO1: The reason why I didn't use absolute positioning for the content div was because I couldn't set the width and height properly (basically, it broke really bad in MSIE). By leaving it relative, the defaults do what I what them to.

---
"Consider a simple room with only four walls, a ceiling and a floor. Can you see it in your mind?s eye? You better not be able to; I haven?t specified a light source yet." - Paul Nettle

changing the absolute in poi's method to relative should work as well, and keep the width's ok.

It works fine in Firefox. However, in MSIE, the main content box is too large for the screen! It scales properly when you resize the window, but it's just too wide for it (it remains the same amount of pixels off no matter how wide the window is).

---
"Consider a simple room with only four walls, a ceiling and a floor. Can you see it in your mind?s eye? You better not be able to; I haven?t specified a light source yet." - Paul Nettle