SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    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!

    graham
    Last edited by hamstand; Aug 11, 2006 at 07:37.

  2. #2
    SitePoint Member
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •