SitePoint Sponsor |
|
User Tag List
Results 1 to 2 of 2
Thread: Divs and negative z-index
-
Aug 11, 2006, 07:08 #1
- Join Date
- Aug 2006
- Posts
- 2
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Divs stacking order and negative z-index
Ok. I have coded loads of sites in CSS but have never come across this problem before, and have hit a big bloody brick wall on it! Any help would be greatly appreciated.
So.... i have an outer div with a 1px border and other divs inside of this outer div, one of which i want to give a negative margin to so that it sits under the border of the outer div.... I thought i could just give the div i want to sit under the outer div a negative z-index, and this does actually work on FF, however IE6 and Safari 1.3.2 dont like it and it just appears above the border. does that make sense?
here's the code so you can see what i'm waffling on about....
HTML Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Untitled</title> <style type="text/css"> #outer { border:1px dashed green; border-bottom:0px; width:750px; position:relative; z-index:1000; } #outerbtm { width:730px; border:1px dashed green; border-top:0px; position:relative; background:pink; padding:10px; } #box1, #box2, #box3 { width:200px; position:relative; padding:10px; } #box1 { background:red; height:100px; } #box2 { background:cyan; margin-left:-10px; z-index:-1; } #box3 { background:silver; } </style> </head> <body> <div id="outer"> <div id="box1">box1</div> <div id="box2">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div> <div id="box3">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div> </div> <div id="outerbtm">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.</div> </body> </html>
thanks in advance for any help!
grahamLast edited by hamstand; Aug 11, 2006 at 08:37.
-
Aug 11, 2006, 07:52 #2
- Join Date
- Aug 2006
- Posts
- 2
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
hi there,
thanks for the quick reply...
So you mean wrap the outer div in another div? it doesn't seem to have any effect.....
Bookmarks