IE6 & IE7 z-index (non absolute) issue
This code currently works for all modern browsers instead of IE6/IE7. Any advice? I can't absolutely positioned any of this: all of it needs to be adaptable to content. Again, I believe this works perfectly in modern browsers.
http://www.webdevout.net/test?02h&raw
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Test</title>
<style type="text/css">
body { padding: 0; margin: 0; }
#first { background: blue; padding: 0px 25px 25px 25px; margin-bottom: -10px; position; relative; z-index: 7; }
#second { background: #DDD; border: 1px dashed gray; height: 200px; position: relative; z-index: 8; display: block; }
#precedence { float: right; hei开发者_开发问答ght: 40px; width: 40px; background-color: #f09; z-index: 9; position: relative; }
</style>
</head>
<body>
<div id="first">
<div id="precedence"></div>
</div>
<div id="second"></div>
</body>
</html>
- Again, this cannot use absolute positioning.
Your question is not quite clear but I think you are trying to do something like this? change your css to:
body {
padding: 0; margin: 0; }
#first {
background: blue;
padding: 0px 25px 25px 25px;
margin-bottom: -10px;
z-index: 7;
}
#second {
position: relative;
background: #DDD;
border: 1px dashed gray;
height: 200px;
z-index: 8;
display: block;
}
#precedence {
height: 40px;
width: 40px;
background-color: #f09;
z-index: 9;
position: absolute;
left: 100%;
margin:0 0 0 -65px;
}
does the same as what you have but also works in ie6/7
yes there is an absolutely positioned element there. I know you specified non absolute but see how it works as I think it's what you want.
Also, in your css there is a mistake in the #first properties
position; relative;
should be
position: relative;
but that div didn't need to be positioned anyway
so the link that you posted has nothing to do with this? great explanation after the fact.
your ie6/7 issues stem from margin/padding issues, as well as the positioning conflicts you are declaring that Chris J pointed out. you did mention the absolute positioning, which Chris overlooked, however his solution is viable, you either shot it down because it violated your rule or because you didn't see its value. Chris' logo box is flexible to accommodate a logo size change, its just that its position wouldn't change. lastly....why are you setting the second div to display:block? thats its default.
this is so easy dude
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>Test</title> <style type="text/css"> body { padding: 0; margin: 0; } #first { background: blue; padding:0 0 15px 25px; margin:0} #second { background: #DDD; border: 1px dashed gray; height: 200px} #precedence { float: right; height: 40px; width: 40px; background-color:#f09; margin-right:25px} </style> </head> <body> <div id="first"> <div id="precedence"></div> </div> <div id="second"></div> </body> </html>
加载中,请稍侯......
精彩评论