Topic: CSS Stacking Properties (Page 1 of 1) Pages that link to <a href="http://ozoneasylum.com/backlink?for=25445" title="Pages that link to Topic: CSS Stacking Properties (Page 1 of 1)" rel="nofollow" >Topic: CSS Stacking Properties <span class="small">(Page 1 of 1)</span>\

 
Iron Wallaby
Paranoid (IV) Inmate

From: USA
Insane since: May 2004

IP logged posted posted 04-06-2005 20:45 Edit Quote

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

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

IP logged posted posted 04-06-2005 20:57 Edit Quote

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

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 04-06-2005 21:02 Edit Quote

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.


Nathus
Bipolar (III) Inmate

From: Minnesota
Insane since: Aug 2003

IP logged posted posted 04-06-2005 21:14 Edit Quote

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.

Iron Wallaby
Paranoid (IV) Inmate

From: USA
Insane since: May 2004

IP logged posted posted 04-06-2005 21:40 Edit Quote

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

Nathus
Bipolar (III) Inmate

From: Minnesota
Insane since: Aug 2003

IP logged posted posted 04-06-2005 22:10 Edit Quote

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

Iron Wallaby
Paranoid (IV) Inmate

From: USA
Insane since: May 2004

IP logged posted posted 04-07-2005 02:42 Edit Quote

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



Post Reply
 
Your User Name:
Your Password:
Login Options: Remember Me On This Computer
 
Your Text:
Loading...
Options: Show Signature
Enable Slimies
Enable Linkwords

« BackwardsOnwards »

Show Forum Drop Down Menu