CSS - Divs 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.... 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; width:750px; position:relative; z-index:1000; } #box1, #box2, #box3 { width:200px; height:200px; position:relative; } #box1 { background:red; } #box2 { background:cyan; margin-left:-10px; z-index:-1; } #box3 { background:silver; } </style> </head> <body> <div id="outer"> <div id="box1">box 1</div> <div id="box2">box 2</div> <div id="box3">box 3</div> </div> </body> </html> Bear in mind also that this is a simplified version of the page, and there is other stuff below the outer div that flows down as the text size expands.... thanks in advance for any help! graham Similar TutorialsI'm redoing the layout of my site (www.brohawk.com) using floating divs with negative margins to produce a fluid left column and a fixed right column. I followed an article on A List Apart for the basics and got it working fairly nicely. As a matter of fact, the site works beautifull in Mozilla/Firefox and with minmal errors in NS7. I've even got all but the forums working in Opera. I haven't even begun to work on making it IE compliant. Saving the worst for last. Anyhow, on all the pages except the forums, the divs line up perfectly. However, on the forums page, the right div doesn't stay up top, instead it wraps around under the left div. However, I still get all the space to the right of the left div where the right one should go. Anybody with Opera should be able to check it out and see what I mean. Anyhow, can anybody tell me why it won't float properly on that one page, but it works on all the others? I have a Menu thats slides down when a link is clicked. In IE6, when the div slides down, it pushes everything below it, once it's hit the top of that child div. I tried setting my z-index to 9999 for the div that comes down and over the content, and setting the child z-index to 1. But for both of those, it still pushes my #SubPage down. To see what I am talking about, if you can visit: Quidel Univ. use login ID: 2097 Once you get logged in, click on "Events". Once there, hit the "Admin Menu" link on the top-right and you'll see what I'm talking about. This is my menu container code: CSS Code: Original - CSS Code #adminContainer { width: 261px; float: left; position: relative; z-index: 9999; } #adminContainer { width: 261px; float: left; position: relative; z-index: 9999; } And this is my #SubPage code: CSS Code: Original - CSS Code #SubPage { float: left; width: 553px; padding: 5px; z-index: 1; } #SubPage { float: left; width: 553px; padding: 5px; z-index: 1; } Been playing with the positioning and z-index, but can't seem to get it to my liking.... and as I typed this, I just thought to myself , I haven't even attempted to edit my iestyles.css sheet. DOH! Going to do that, but I'll leave this up in case someone knows my stupid mistake! TIA! I am having a problem with negative margins in IE7. On my website: commentsandcapers I am trying to get IE7 to display the right two boxes in the same way that Firefox displays them?? I have tried a few thing including position: relative in a whole bunch of places, none of which works. Do any of you have any idea how to correct this problem? Thanks! Hi. I have a top menu bar which is positioned below an image. The size of the image is stopping the menu bar from being further up, but I cant make the image smaller. Is there a way to put negative padding on the image to make the menu bar sit further up (effectivly on the image). To sum it up, here is an image: http://img40.imageshack.us/i/helpo.jpg/ Here is a link to the website: http://hiq.identityprojects.co.uk Here is the code for the image: Code: h1#logo a { display: block; text-decoration: none; color: #FFFFFF; font-size: 250%; width: 283px; height: 92px; padding-bottom:-20px; background: url(../images/logo.png) no-repeat; text-indent: -99999px; } The red is my stab in the dark to get it to work, which didnt work. Id really appreciate it if someone could enlighten me. In FF3 this code behaves correctly but not in IE6. The main content disappears. Any ideas why and how to fix it? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> * { margin: 0; padding: 0; } body { background-color: #00FF00; } #wrapper { font-size:0.8em; font-family:"Arial"; position: relative; min-width:960px; } #container { margin: 0 auto; width: 960px; background-color: #fff; } #header { background-color: #0033FF; width:960px; padding-bottom:50px; height: 152px; } #contentWrapper { margin-left: auto; margin-right: auto; width: 85%; margin-top: -60px; z-index: 1; position: relative; background-color:#FFF; min-height:500px; padding-left:20px; padding-top:20px; } #mainContent { float:left; width:50%; } #services { padding-left:60px; float:left; } #footer { clear:both; background-color: #CC0033; clear: both; } </style> </head> <body> <div id="wrapper"> <div id="container"> <div id="header"> <p> Header: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper, eros a iaculis elementum, nisl orci vehicula odio, in sollicitudin libero sapien ac nibh. Etiam quis arcu sit amet felis vestibulum dignissim et sed augue. Maecenas commodo ornare urna non lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent libero dui, egestas id mattis sollicitudin, suscipit eget arcu. Vestibulum aliquet tempus dui, ut laoreet dolor imperdiet at. Vivamus eu porttitor arcu. Fusce sed lorem diam, sit amet condimentum risus. Aliquam commodo mi at orci mollis et mollis tortor varius. Fusce posuere turpis non diam placerat pretium. Vestibulum porttitor tristique molestie. Suspendisse dui libero, lacinia id commodo eget, facilisis vel purus. Aliquam viverra elementum turpis ac vulputate. </p> </div> <div id="contentWrapper"> <div id="mainContent"> <p> Header: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper, eros a iaculis elementum, nisl orci vehicula odio, in sollicitudin libero sapien ac nibh. Etiam quis arcu sit amet felis vestibulum dignissim et sed augue. Maecenas commodo ornare urna non lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent libero dui, egestas id mattis sollicitudin, suscipit eget arcu. Vestibulum aliquet tempus dui, ut laoreet dolor imperdiet at. Vivamus eu porttitor arcu. Fusce sed lorem diam, sit amet condimentum risus. Aliquam commodo mi at orci mollis et mollis tortor varius. Fusce posuere turpis non diam placerat pretium. Vestibulum porttitor tristique molestie. Suspendisse dui libero, lacinia id commodo eget, facilisis vel purus. Aliquam viverra elementum turpis ac vulputate. </p> <p> Header: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper, eros a iaculis elementum, nisl orci vehicula odio, in sollicitudin libero sapien ac nibh. Etiam quis arcu sit amet felis vestibulum dignissim et sed augue. Maecenas commodo ornare urna non lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent libero dui, egestas id mattis sollicitudin, suscipit eget arcu. Vestibulum aliquet tempus dui, ut laoreet dolor imperdiet at. Vivamus eu porttitor arcu. Fusce sed lorem diam, sit amet condimentum risus. Aliquam commodo mi at orci mollis et mollis tortor varius. Fusce posuere turpis non diam placerat pretium. Vestibulum porttitor tristique molestie. Suspendisse dui libero, lacinia id commodo eget, facilisis vel purus. Aliquam viverra elementum turpis ac vulputate. </p> <p> Header: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper, eros a iaculis elementum, nisl orci vehicula odio, in sollicitudin libero sapien ac nibh. Etiam quis arcu sit amet felis vestibulum dignissim et sed augue. Maecenas commodo ornare urna non lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent libero dui, egestas id mattis sollicitudin, suscipit eget arcu. Vestibulum aliquet tempus dui, ut laoreet dolor imperdiet at. Vivamus eu porttitor arcu. Fusce sed lorem diam, sit amet condimentum risus. Aliquam commodo mi at orci mollis et mollis tortor varius. Fusce posuere turpis non diam placerat pretium. Vestibulum porttitor tristique molestie. Suspendisse dui libero, lacinia id commodo eget, facilisis vel purus. Aliquam viverra elementum turpis ac vulputate. </p> </div> <div id="services"> <ul> <li>test 1</li> <li>test 2</li> <li>test 3</li> </ul> </div> </div> <div id="footer"> <p> Footer: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper, eros a iaculis elementum, nisl orci vehicula odio, in sollicitudin libero sapien ac nibh. Etiam quis arcu sit amet felis vestibulum dignissim et sed augue. Maecenas commodo ornare urna non lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent libero dui, egestas id mattis sollicitudin, suscipit eget arcu. Vestibulum aliquet tempus dui, ut laoreet dolor imperdiet at. Vivamus eu porttitor arcu. Fusce sed lorem diam, sit amet condimentum risus. Aliquam commodo mi at orci mollis et mollis tortor varius. Fusce posuere turpis non diam placerat pretium. Vestibulum porttitor tristique molestie. Suspendisse dui libero, lacinia id commodo eget, facilisis vel purus. Aliquam viverra elementum turpis ac vulputate. </p> </div> </div> </div> </body> </html> I'm working on a set of tabs within tabs (or subtabs). My code is something like this: Code: <ul class="tabs" <li class="selected">1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <div class="tab_content"> <ul class="subtabs"> <li class="selected">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> Now, "tab_content" has padding of 10px, because the subtabs won't always be there. But I don't want the padding on the subtabs, so I was giving them a negative margin of -10px. This works in all browsers but IE, which applies everything but the right margin, leaving a white gap. See the image I'm attaching to see what the problem looks like. Anyone know of easy fixes for this? when i scroll down and up again the background color is gone... i see this happening when some of the div's inside some container get negative margin for some overlapping effect sorry i have not the source immediatly but maybe you know what can cause this behaviour in IE? otherwise i trim the code for display here.... Hello, I used a negative value for the position of a div on this site: Code: www.godynamic.nl Everything is like it have to be in mozilla browsers but in IE the image is partly beneath the upper layer and hidden. I tried z-index but this will only work with absolute position types. Is there IE hack for this? Thanks for helping. Hi. The main gallery image is pushed down from the top of the logo on the page below: http://zombiemod.com/rm/nina2/main.php?g2_itemId=14 I want to move this block on the right up. I believe this uses the main-image-container div as shown below, but when I put a negative top margin on this div it doesnt move. The is the CSS I tried for the main-image-container div: Code: margin-top: -70px; This is the HTML: Code: <div id="content"> <div id="main-image-container" {if $theme.imageCount == 0}style="display:none"{/if}> {if $theme.imageCount > 0} <div id="slideshow-controlsx"> <ul id="control-buttonsx"> <li><button id="controls-left"><img src="{g->theme url="images/controls-left.png"}" alt="{g->text text="Left"}" /></button></li> <li><button id="controls-play"><img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Play"}" /></button></li> <li><button id="controls-right"><img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Right"}" /></button></li> </ul> </div> Why didnt my negative top margin work? I've got an "IE" issue! This CSS code looks perfect in IE7 and Firefox. It is a photo box that offsets 225 pixels to the left of the text box. Code: #inside_offset_image { width: 319px; float: left; margin-left: -225px; margin-right: 30px; margin-bottom: 30px; } But when I test in IE5.5 and IE6, this photo box runs almost completely off the left side of the browser. The actual test page is located he http://penncomm.com/bean/inside.html Any ideas? Does anyone know how to get this code to display correctly in Opera?
HTML4STRICT Code: Original - HTML4STRICT Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=8"> <style type="text/css"> p { } .mouse { display: inline-block; padding: 6px; margin: -6px; } .mouse:hover { background: #888; border: 2px solid black; padding: 4px; } </style> </head> <body> <p>A <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span></p> </body> </html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" I has attached some screenshots of my results. When I hover over an element on the right or left edge of the screen, the background and border that results clips because of my negative margins. im using (stripped most) CSS: Code: h3 { margin-top:-10px; } in this HTML Code: <h1>Header</h1> <h3>subtitle</h3> i want the <h3> the overlap the <h1> partly, like defined in the CSS. It works fine in every browser, but in IE, the rest of the page is distored because of the negative margin definition. is there any workaround for this I am having trouble getting safari to recognize my negative margins. It works in IE6,7 and Firefox. I am trying to center the page but to get the first 327 pixels on the left and last 327 on the right to be a negative margin and my center column to have a 1000px fixed width. Here is my css. Any help would be great! .bkg-tile-left { background-image: url(/images/bkg-tile-left.jpg); background-repeat: repeat-y; width: 327px; text-align: left; float: left; overflow: visible; } #bkg-tile-right { background-image: url(/images/bkg-tile-right.jpg); background-repeat: repeat-y; width: 327px; background-position: right; text-align: right; float: right; clear: both; padding-right: -327px; } #bkg-right { background-attachment: scroll; background-image: url(/images/bkg-img-right.jpg); background-repeat: no-repeat; background-position: left top; height: 100%; } #bkg-left { background-attachment: scroll; background-image: url(/images/bkg-img-left.jpg); background-repeat: no-repeat; background-position: right top; height: 100%; } #box1 { margin-left: -327px; margin-right: -327px; position:relative; } AND HTML <body> <div align="center"> <table border="0" cellpadding="0" cellspacing="0" id="box1"> <tr> <td valign="top" class="bkg-tile-left" height="100%"><div id="bkg-left"><IMG SRC="images/spacer.gif" WIDTH=327 HEIGHT=718></div></td> <td valign="top"><table id="Wrapper" cellpadding="0" cellspacing="0"> <tr> <td id="print_header"><dtml-var standard_print_header ><img src="images/spacer.gif" width="1px" height="1px"></td> </tr> <tr> <td><dtml-var standard_html_header2></td> </tr> <tr> <td><table width="100%" cellspacing="0" cellpadding="0"> <tr> <td valign="top" id="BreadCrumb"><dtml-var standard_html_breadCrumb></td> </tr> </table></td> </tr> <tr> <td valign="top"><table border="0" cellspacing="0" cellpadding="0" width="100%"> <tr> <dtml-if standard_html_sidebar> <td valign="top" id="body_content2"><dtml-var body_content2></td> <td valign="top" id="Sidebar2"><dtml-var standard_html_sidebar2></td> <dtml-else> <td valign="top" id="body_content2"><dtml-var body_content2></td> </dtml-if> </tr> </table></td> </tr> <tr> <td id="Footer2" ><dtml-var standard_html_footer2></td> </tr> </table></td> <td valign="top" id="bkg-tile-right"><div id="bkg-right"><IMG SRC="images/spacer.gif" WIDTH=327 HEIGHT=718></div></td> </tr> </table> </div> </body> Hello everyone, I am working on a website redesign and I just cannot fix one certain bug that I am having in IE7. I have this layout that I made and am using which works great cross browser here mactyler.com/NEWIDF/ Now I am integrating a PHP script into it and am having a hard time to get it to display the sidebar in IE7. iphonedevforums.com/news/index.php I think it might have something to do with the margin-left: -100%; that I am using on the sidebar div to align it vertically. It works and shows up in every browser except IE. If you guys could show me any way to get it working I would greatly appreciate it. Any ideas are welcome, I will try to be as helpfull as possible in answering your questions. In Internet Explorer 6, the following HTML and CSS with negative margins causes the first letter of the heading to disappear: Code: <html> <head> <style type="text/css" media=screen> #siteBody { position: absolute; top: 100px; left: 100px; width: 700px; margin-left: 2em; } h1 { margin-left: -1em; } </style> </head> <body> <div id="siteBody"> <h1>This is the heading</h1> <p> This is the content. </p> </div> </body> </html> There are ways to get the negative margin to work in IE properly, but at a loss of functionality. For instance, if I remove the width property from the siteBody CSS, and change the position to 'relative', the letter will appear. Also, if I remove the div and just place the 'siteBody' id on the body tag, then the first letter will appear. Any help is greatly appreciated as I've been searching for a solution for a couple of days now. Thanks, ---atomgiant Hope someone can advise me what's going on. I'm trying to make a page which has a div floated to the left of another div, which is absolutely positioned. There is another one floated to the right. I am using relative positioning to accommodate for different browser resolutions. This seems to work perfectly in FF and IE7 but IE6 seems to ignore the negative margin. Funny thing is that while the page is loading it is in the right place momentarily, but then it jumps back to the position it would be in without the negative margin. The page and the CSS all validates fine. <div id="main"> <div id="leftdiv" class="floatleft"> <p class="bold">Do you... </p></div> <div id="rightdiv" class="floatright"> <p class="bold right">Would you </p> </div> </div> #main { position: absolute; height: 70%; width: 70%; left: 5%; top: 100px; overflow: auto; } #leftdiv { position:relative; margin-left: -109px; top: 50%; margin-top: -160px; left: 20%; width: 198px; height: 299px; padding: 10px; } #rightdiv { position:relative; top: 50%; margin-top: -160px; right: 20%; margin-right: -109px; width: 198px; height: 299px; padding: 10px; } .floatleft {float:left;} .floatright {float:right; } apologies if this has been asked and answered already - i did a search of the board but didn't find a clear solution. what i'm trying to do seems simple enough, but isn't turning out that way. lets say i have a page background of some color (e.g., orange). then i have a main container div that is centered with auto margins, and has a white background. i want this main container to start at 100px from the top (so 100px of orange shows above it), and the white background should expand to the bottom of the page - without scrollbars. if i set it's height to 100%, the 100px top margin is added to the 100% height of its parent (body + html), so it acts as if there's 100px of substance beneath the viewport and therefor shows scrollbars. i had assumed a negative bottom margin set for the same amount as the top margin would work, but alas it does not. obviously i don't want to just force-hide scrollbars by overflow:hidden or position:asbolute/fixed - if content in the container forces it to expand, it should do that. otherwise, even if there's very little content - or even none - it should expand to the bottom of the page. i've attached a very basic (non-working) example - any insight would be appreciate. not looking for a hack - i'm looking for the best way to handle this with best-practices. tyia Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" > <head> <style type="text/css"> html { height : 100%; } body { margin : 0; background : #F90; height : 100%; } div.wrapper { margin : 100px auto -100px auto; width : 500px; background : #FFF; height : 100%; } </style> </head> <body> <div class="wrapper"> </div> </body> </html> Is it bad css form to use negative values when you are working with relative positioning? I have a graphic intensive site that was drawn in photoshop and I am trying to code it. The graphics require exact placement but also need to move with the design if the browser window is re-sized, relative positioning will do this but I find myself having to use negative values on some of the graphics to have them place properly. I know if I move a graphic above another in the html code the relative values will change but I am having problems figuring out what should go first, second, third... I know relative positioning deals with the regular flow of the page but when you are dealing with all graphics how do you know what to put first etc... I hope I made sense and I wish I had an address for you to look at the page but I don't at the moment... Can anyone help? Thank you, Jen |