[prev in list] [next in list] [prev in thread] [next in thread]
List: mozilla-layout
Subject: Re: content not obeying z-index
From: "mike caines" <anon () anon ! com>
Date: 2004-04-21 18:57:12
Message-ID: c66fu3$8bc1 () ripley ! netscape ! com
[Download RAW message or body]
[Attachment #2 (multipart/alternative)]
Solved my own problem. It is in no way a bug. For those that are =
interested:
The green 'six' div shows through the yellow div because it actually =
appears later in the flow (It is the next sibling of the green 'five' =
div, which contains the yellow div). My issue was resolved by giving the =
green 'five' div, a z-index of one higher than the green 'four' and =
green 'six' div's. (an all other areas affected).
I've attached the modification.
"mike caines" <anon@anon.com> wrote in message =
news:c66f8t$8qf1@ripley.netscape.com...
Would someone please take a look at the attached (my apologies) HTML
document and tell me why the content of the green and blue div's, =
shows
through the yellow div? I assume this is according to spec since both =
moz
and IEWin render it the same. If it is according to spec, is there an
alternate method I could use to prevent this behavior (while keeping =
the
same element hierarchy)?
Thank-you,
Mike Caines
[Attachment #5 (text/html)]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.2800.1400" name=GENERATOR>
<STYLE></STYLE>
</HEAD>
<BODY bgColor=#ffffff>
<DIV><FONT face=Arial size=2>Solved my own problem. It is in no way a bug.
For those that are interested:</FONT></DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV>
<DIV><FONT face=Arial size=2>The green 'six' div shows through the yellow div
because it actually appears later in the flow (It is the next sibling of the
green 'five' div, which contains the yellow div). My issue was resolved by
giving the green 'five' div, a z-index of one higher than the green 'four'
and green 'six' div's. (an all other areas affected).<BR><BR>I've attached the
modification.</FONT></DIV>
<BLOCKQUOTE
style="PADDING-RIGHT: 0px; PADDING-LEFT: 5px; MARGIN-LEFT: 5px; BORDER-LEFT: #000000 \
2px solid; MARGIN-RIGHT: 0px"> <DIV>"mike caines" <<A \
href="mailto:anon@anon.com">anon@anon.com</A>> wrote in message <A
href="news:c66f8t$8qf1@ripley.netscape.com">news:c66f8t$8qf1@ripley.netscape.com</A>...</DIV>Would \
someone please take a look at the attached (my apologies) HTML<BR>document and
tell me why the content of the green and blue div's, shows<BR>through the
yellow div? I assume this is according to spec since both moz<BR>and IEWin
render it the same. If it is according to spec, is there an<BR>alternate
method I could use to prevent this behavior (while keeping the<BR>same element
hierarchy)?<BR><BR>Thank-you,<BR>Mike
Caines<BR><BR><BR></BLOCKQUOTE></BODY></HTML>
["possibleLayoutBug.html" (text/html)]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>possible layout bug</title>
</head>
<body>
<div style="background-color:gainsboro; float:left;">
<div style="background-color:maroon; float:left;">one</div>
<div style="background-color:darkgreen; float:left; position:relative;">
<div style="z-index:1; background-color:lime; position:absolute; top:100%; \
left:0; width:20ex;"> <div style="z-index:1; position:relative;">four four four \
four</div>
<div style="z-index:2; position:relative;">
<div style="z-index:1; background-color:cyan; position:absolute; top:0; \
left:100%; width:20ex;"> <div style="z-index:1; position:relative;">seven seven \
seven</div>
<div style="z-index:2; position:relative;">
<div style="z-index:1; background-color:yellow; position:absolute; top:0; \
right:50%; width:20ex;"> <div style="z-index:1; position:relative;">ten ten ten \
ten</div> <div style="z-index:1; position:relative;">eleven eleven</div>
<div style="z-index:1; position:relative;">twelve twelve</div>
</div>
eight eight eight
</div>
<div style="z-index:1; position:relative;">nine nine nine</div>
</div>
five five five five
</div>
<div style="z-index:1; position:relative;">six six six six six</div>
</div>
two
</div>
<div style="background-color:navy; float:left;">three</div>
</div>
</body>
</html>
_______________________________________________
mozilla-layout mailing list
mozilla-layout@mozilla.org
http://mail.mozilla.org/listinfo/mozilla-layout
[prev in list] [next in list] [prev in thread] [next in thread]
Configure |
About |
News |
Add a list |
Sponsored by KoreLogic