The HTML source of one of my web pages starts simplified with a code like:
----
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
.....
<BODY BACKGROUND="images/myback.gif">
<div id="content" style="position: absolute; top: 0; left: 255px; width: 700px; z-index:-1; background-color: transparency;">
Blah blah blah
</DIV>
</BODY>
----
The page is displayed correctly in InternetExplorer but NOT in Firefox.
Is DIV really a pure IE extension?
How can I embed a similar code for Firefox as well ?
Wladimir 28  6652 
On 2007-05-08, Wladimir Borsov <wl*******@gmx.netwrote:
The HTML source of one of my web pages starts simplified with a code like:
----
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
....
<BODY BACKGROUND="images/myback.gif">
<div id="content" style="position: absolute; top: 0; left: 255px; width: 700px; z-index:-1; background-color: transparency;">
Blah blah blah
</DIV>
</BODY>
----
The page is displayed correctly in InternetExplorer but NOT in Firefox.
Is DIV really a pure IE extension?
The problem is not with DIV but with z-index: -1, which should put the
div behind various things but not behind the root element.
But which element is the root element exactly? HTML or #document? Even
giving HTML and BODY background: transparent (which by the way is the
correct value, not "transparency") doesn't make the text visible in FF.
How can I embed a similar code for Firefox as well ?
Add 'style="position: relative; z-index: 0;"' to BODY. That will make it
the stacking context for the div and avoid relying on the root stacking
context.
Don't use the Transitional doctype, always use the strict one:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
Wladimir Borsov a écrit :
The HTML source of one of my web pages starts simplified with a code like:
----
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
....
<BODY BACKGROUND="images/myback.gif">
<div id="content" style="position: absolute; top: 0; left: 255px; width: 700px; z-index:-1; background-color: transparency;">
Blah blah blah
</DIV>
</BODY>
----
The page is displayed correctly in InternetExplorer but NOT in Firefox.
What do you mean by "correctly" ?
What does IE display ?
Is DIV really a pure IE extension?
With z-index: -1; as style of your unique div
this one is displayed in ground-floor
(bellow or behind the screen or the document's body, as you want)
so ... anything to see ... :-(
How can I embed a similar code for Firefox as well ?
Give to your div a correct z-index ... ( >= 0 )
Nota : the color 'transparentcy' doesn't exist, it is 'transparent'
and default background color is transparent.
--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Wladimir Borsov wrote on 08 mei 2007 in comp.lang.javascript :
The HTML source of one of my web pages starts simplified with a code
like:
"code like" so it is not the code?
----
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
....
<BODY BACKGROUND="images/myback.gif">
<body style='background-image:url("images/myback.gif");'>
<div id="content" style="position: absolute; top: 0; left: 255px;
width: 700px; z-index:-1; background-color: transparency;"Blah blah
background-color: transparent;
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
On May 8, 4:13 pm, wladim...@gmx.net (Wladimir Borsov) wrote:
The HTML source of one of my web pages starts simplified with a code like:
----
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
....
<BODY BACKGROUND="images/myback.gif">
<div id="content" style="position: absolute; top: 0; left: 255px; width: 700px; z-index:-1; background-color: transparency;">
Blah blah blah
</DIV>
</BODY>
----
The page is displayed correctly in InternetExplorer but NOT in Firefox.
Is DIV really a pure IE extension?
How can I embed a similar code for Firefox as well ?
Wladimir
Of course divs work in Firefox, but I think transparency don't. Have
you tried using a transparent GIF as the div background image?
Wladimir Borsov said the following on 5/8/2007 5:13 PM:
The HTML source of one of my web pages starts simplified with a code like:
----
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
....
<BODY BACKGROUND="images/myback.gif">
<div id="content" style="position: absolute; top: 0; left: 255px; width: 700px; z-index:-1; background-color: transparency;">
Blah blah blah
</DIV>
</BODY>
----
The page is displayed correctly in InternetExplorer but NOT in Firefox.
Is DIV really a pure IE extension?
Not even close.
How can I embed a similar code for Firefox as well ?
I won't dare ask why this is posted to comp.lang.javascript as it has
nothing to do with Javascript. At least the follow-up was set though :)
P.S. Try validating your code before blaming Firefox.
--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
"Wladimir Borsov" <wl*******@gmx.netha scritto nel messaggio
news:46***********************@newsspool4.arcor-online.net...
The HTML source of one of my web pages starts simplified with a code like:
----
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
....
<BODY BACKGROUND="images/myback.gif">
<div id="content" style="position: absolute; top: 0; left: 255px; width:
700px; z-index:-1; background-color: transparency;">
Blah blah blah
</DIV>
</BODY>
----
The page is displayed correctly in InternetExplorer but NOT in Firefox.
Is DIV really a pure IE extension?
z-index e' un livello
z-index:-1 lo hai messo SOTTO il body
>
How can I embed a similar code for Firefox as well ?
Wladimir
On May 9, 7:13 am, wladim...@gmx.net (Wladimir Borsov) wrote:
The HTML source of one of my web pages starts simplified with a code like:
----
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
....
<BODY BACKGROUND="images/myback.gif">
<div id="content" style="position: absolute; top: 0; left: 255px; width: 700px; z-index:-1; background-color: transparency;">
Blah blah blah
</DIV>
</BODY>
----
The page is displayed correctly in InternetExplorer but NOT in Firefox.
What is "correctly" to you? I wouldn't bet that where IE and Firefox
differ in the visual display of HTML that IE is right and Firefox
wrong - that is not to say that Firefox is perfect, but generally it
is more likely to be correct than IE.
Is DIV really a pure IE extension?
No, the HTML 4 specification defines a div element. Firefox is
compliant with the spec in that regard.
How can I embed a similar code for Firefox as well ?
Without knowing what you consider "correct", it's impossible to say.
Your question has nothing to do with javascript, it is related to HTML
and CSS. Ask in an HTML or CSS forum.
news:comp.infosystems. www.authoring.html
<URL: http://groups.google.com.au/group/co...ng.html?lnk=li
>
news:comp.infosystems. www.authoring.stylesheets
<URL: http://groups.google.com.au/group/co...esheets?lnk=li
>
--
Rob
RobG wrote:
On May 9, 7:13 am, wladim...@gmx.net (Wladimir Borsov) wrote:
>The HTML source of one of my web pages starts simplified with a code like:
----
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
....
<BODY BACKGROUND="images/myback.gif">
<div id="content" style="position: absolute; top: 0; left: 255px; width: 700px; z-index:-1; background-color: transparency;">
Blah blah blah
</DIV>
</BODY>
----
The page is displayed correctly in InternetExplorer but NOT in Firefox.
[cut .... ]
Some advise ought to be ignored, especially any which is a nonsense. IE
is not a CSS compliant browser. There are a number of problems in this
piece of markup and CSS values but just answering the question.
See http://www.w3.org/TR/REC-CSS2/visuren.html#z-index
"This integer is the stack level of the generated box in the current
stacking context. The box also establishes a local stacking context in
which its stack level is '0'."
By definition any element with z-index:-1 declared should not be drawn.
Firefox is compliant.
Louise
Wladimir Borsov wrote:
The HTML source of one of my web pages starts simplified with a code like:
----
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
....
<BODY BACKGROUND="images/myback.gif">
<div id="content" style="position: absolute; top: 0; left: 255px; width: 700px; z-index:-1; background-color: transparency;">
Blah blah blah
</DIV>
</BODY>
----
The page is displayed correctly in InternetExplorer but NOT in Firefox.
Is DIV really a pure IE extension?
See my comment on HTML.
How can I embed a similar code for Firefox as well ?
You first need to become familiar with HTML. A DIV is a DIV is a DIV.
Then, check your CSS and see if "transparency" is actually a valid value
for the background-color CSS declaration.
comp.infosystems. www.authoring.html
comp.infosystems. www.authoring.stylesheets
--
-Lost
Remove the extra words to reply by e-mail. Don't e-mail me. I am
kidding. No I am not.
On 2007-05-08, Vicente Raúl Plata Fonseca [XnT] <xi******@gmail.comwrote:
On May 8, 4:13 pm, wladim...@gmx.net (Wladimir Borsov) wrote:
>The HTML source of one of my web pages starts simplified with a code like:
----
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
....
<BODY BACKGROUND="images/myback.gif">
<div id="content" style="position: absolute; top: 0; left: 255px; width: 700px; z-index:-1; background-color: transparency;">
Blah blah blah
</DIV>
</BODY>
----
The page is displayed correctly in InternetExplorer but NOT in Firefox.
Is DIV really a pure IE extension?
How can I embed a similar code for Firefox as well ?
Wladimir
Of course divs work in Firefox, but I think transparency don't. Have
you tried using a transparent GIF as the div background image?
background: transparent does work in Firefox, and so does the opacity
property (from CSS3).
On 2007-05-09, boclair <bo*****@bigpond.net.auwrote:
RobG wrote:
>On May 9, 7:13 am, wladim...@gmx.net (Wladimir Borsov) wrote:
>>The HTML source of one of my web pages starts simplified with a code like:
----
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
....
<BODY BACKGROUND="images/myback.gif">
<div id="content" style="position: absolute; top: 0; left: 255px; width: 700px; z-index:-1; background-color: transparency;">
Blah blah blah
</DIV>
</BODY>
----
The page is displayed correctly in InternetExplorer but NOT in Firefox.
[cut .... ]
Some advise ought to be ignored, especially any which is a nonsense. IE
is not a CSS compliant browser. There are a number of problems in this
piece of markup and CSS values but just answering the question.
See http://www.w3.org/TR/REC-CSS2/visuren.html#z-index
"This integer is the stack level of the generated box in the current
stacking context. The box also establishes a local stacking context in
which its stack level is '0'."
By definition any element with z-index:-1 declared should not be drawn.
No, boxes with z-index: -1 should be drawn, but behind other things in
their stacking context.
The details are given in Section 9.9 and Appendix E in the CSS 2.1 spec.
But the main point is that the scope of the z-index property is limited
to its stacking context.
If an element has z-index of anything except auto, it starts a "stacking
context". _None of its descendents, whatever value they have for
z-index, can get stacked behind their stacking context box_.
e.g.
<div style="z-index: 4" id="A">
<div style="z-index: -2" id="B"</div>
<div style="z-index: 2" id="C"></div>
</div>
<div style="z-index: 1" id="D"></div>
In this example, the basic stacking order is, from back to front is D,
A, B, C. Although B has the smallest value of z-index (-2) it's second
from the front in the whole document, and certainly should get drawn.
Firefox is compliant.
In this case it depends on the definition of the root element, which
forms the root stacking context. Firefox is acting is if the root
element were above #document and as if #document had an opaque
background. Or something, perhaps internally there are seven layers of
turtles on top of each other behind #document and the text is buried
behind them somewhere. But with nothing else there, and with background:
transparent on HTML and BODY the OP's text ought to be visible I think.
boclair wrote:
RobG wrote:
>On May 9, 7:13 am, wladim...@gmx.net (Wladimir Borsov) wrote:
>>The HTML source of one of my web pages starts simplified with a code
like:
----
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
....
<BODY BACKGROUND="images/myback.gif">
<div id="content" style="position: absolute; top: 0; left: 255px;
width: 700px; z-index:-1; background-color: transparency;">
Blah blah blah
</DIV>
</BODY>
----
The page is displayed correctly in InternetExplorer but NOT in Firefox.
[cut .... ]
Some advise ought to be ignored, especially any which is a nonsense.
Since you trimmed my reply in it's entirety, which advice is that?
[...]
--
Rob
Ben C wrote:
On 2007-05-09, boclair <bo*****@bigpond.net.auwrote:
>RobG wrote:
>>On May 9, 7:13 am, wladim...@gmx.net (Wladimir Borsov) wrote:
The HTML source of one of my web pages starts simplified with a code like:
----
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
....
<BODY BACKGROUND="images/myback.gif">
<div id="content" style="position: absolute; top: 0; left: 255px; width: 700px; z-index:-1; background-color: transparency;">
Blah blah blah
</DIV>
</BODY>
----
>See http://www.w3.org/TR/REC-CSS2/visuren.html#z-index
"This integer is the stack level of the generated box in the current
stacking context. The box also establishes a local stacking context in
which its stack level is '0'."
By definition any element with z-index:-1 declared should not be drawn.
No, boxes with z-index: -1 should be drawn, but behind other things in
their stacking context.
e.g.
<div style="z-index: 4" id="A">
<div style="z-index: -2" id="B"</div>
<div style="z-index: 2" id="C"></div>
</div>
<div style="z-index: 1" id="D"></div>
This is a different case to that posited by the OP. A same case would be
to declare position:absolute on a div with a negative z-index, eg div id A
Louise
boclair wrote:
Ben C wrote:
>On 2007-05-09, boclair <bo*****@bigpond.net.auwrote:
>>RobG wrote:
On May 9, 7:13 am, wladim...@gmx.net (Wladimir Borsov) wrote:
The HTML source of one of my web pages starts simplified with a
code like:
>
----
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
....
<BODY BACKGROUND="images/myback.gif">
<div id="content" style="position: absolute; top: 0; left: 255px;
width: 700px; z-index:-1; background-color: transparency;">
Blah blah blah
</DIV>
</BODY>
----
>
>>See http://www.w3.org/TR/REC-CSS2/visuren.html#z-index
"This integer is the stack level of the generated box in the current
stacking context. The box also establishes a local stacking context
in which its stack level is '0'."
By definition any element with z-index:-1 declared should not be drawn.
No, boxes with z-index: -1 should be drawn, but behind other things in
their stacking context.
>e.g.
<div style="z-index: 4" id="A">
<div style="z-index: -2" id="B"</div>
<div style="z-index: 2" id="C"></div>
</div>
<div style="z-index: 1" id="D"></div>
This is a different case to that posited by the OP. A same case would be
to declare position:absolute on a div with a negative z-index, eg div id A
Careless of me. Omitted edit z-index: 4 to z-index:-4 in the style rules
of div id A.
Louise
On 2007-05-09, boclair <bo*****@bigpond.net.auwrote:
[...]
>>No, boxes with z-index: -1 should be drawn, but behind other things in
their stacking context.
>>e.g.
<div style="z-index: 4" id="A">
<div style="z-index: -2" id="B"</div>
<div style="z-index: 2" id="C"></div>
</div>
<div style="z-index: 1" id="D"></div>
This is a different case to that posited by the OP. A same case would be
to declare position:absolute on a div with a negative z-index, eg div id A
Yes, what I wanted to illustrate was the scope of the z-index property.
What this example is meant to show is that a negative z-index doesn't
put you behind the element that forms your stacking context.
Careless of me. Omitted edit z-index: 4 to z-index:-4 in the style rules
of div id A.
The point is in that case, what is the stacking context for div A? It
should be the root element. Div A should not go behind the root element,
no matter how negative its (div A's) z-index. So what is the root
element?
I would have thought it would be the HTML element, and so if BODY has a
transparent background, we should still see div A.
If the root element is the #document, and HTML has a transparent
background, then we should still see div A.
In Firefox we can't see div A (although in Opera you can), even if we
add html, body { background: transparent; } just to be sure. This is why
I do think there's something a bit dodgy about the way Firefox renders
the OP's example.
On May 8, 10:13 pm, wladim...@gmx.net (Wladimir Borsov) wrote:
The HTML source of one of my web pages starts simplified with a code like:
----
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
....
<BODY BACKGROUND="images/myback.gif">
<div id="content" style="position: absolute; top: 0; left: 255px; width: 700px; z-index:-1; background-color: transparency;">
Blah blah blah
</DIV>
</BODY>
----
The page is displayed correctly in InternetExplorer but NOT in Firefox.
Is DIV really a pure IE extension?
How can I embed a similar code for Firefox as well ?
Wladimir
I'm not sure if I completely understand your problem, but I believe
that IE outlines divs by default, whereas Firefox doesn't. You can use
CSS styling to add a border if you want, but as divs are mainly used
to format page contents these days, the borders tend to be invisible,
thus it's the default on most browsers (other than IE, of course).
On May 8, 10:13 pm, wladim...@gmx.net (Wladimir Borsov) wrote:
The HTML source of one of my web pages starts simplified with a code like:
----
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
....
<BODY BACKGROUND="images/myback.gif">
<div id="content" style="position: absolute; top: 0; left: 255px; width: 700px; z-index:-1; background-color: transparency;">
Blah blah blah
</DIV>
</BODY>
----
The page is displayed correctly in InternetExplorer but NOT in Firefox.
Is DIV really a pure IE extension?
How can I embed a similar code for Firefox as well ?
Wladimir
I take that back. I didn't realise the text in the div. I think the
index of -1 is behind the window itself. What exactly is it you'r
trying to do, and why do you want the z-index set to -1?
Ben C wrote:
On 2007-05-09, boclair <bo*****@bigpond.net.auwrote:
[...]
>>>No, boxes with z-index: -1 should be drawn, but behind other things in
their stacking context.
e.g.
<div style="z-index: 4" id="A">
<div style="z-index: -2" id="B"</div>
<div style="z-index: 2" id="C"></div>
</div>
<div style="z-index: 1" id="D"></div>
This is a different case to that posited by the OP. A same case would be
to declare position:absolute on a div with a negative z-index, eg div id A
Yes, what I wanted to illustrate was the scope of the z-index property.
What this example is meant to show is that a negative z-index doesn't
put you behind the element that forms your stacking context.
>Careless of me. Omitted edit z-index: 4 to z-index:-4 in the style rules
of div id A.
The point is in that case, what is the stacking context for div A? It
should be the root element. Div A should not go behind the root element,
no matter how negative its (div A's) z-index. So what is the root
element?
I would have thought it would be the HTML element, and so if BODY has a
transparent background, we should still see div A.
If the root element is the #document, and HTML has a transparent
background, then we should still see div A.
In Firefox we can't see div A (although in Opera you can), even if we
add html, body { background: transparent; } just to be sure. This is why
I do think there's something a bit dodgy about the way Firefox renders
the OP's example.
You may well be right but I would have thought the logical behaviour
would be if the div is taken out of the flow with a negative z-index it
would stack beneath.
"This integer is the stack level of the generated box in the current
stacking context. The box also establishes a local stacking context in
which its stack level is '0'."
I see nothing in this reference that places mozilla browsers
interpretation in contravention
All that apart, I fail to see the need to use negative z-index values at
all in a properly constructed document. Because some browsers will
interpret certain constructions it doesn't make those constructions
logical (in my opinion).
Louise
Ben C wrote:
>
In Firefox we can't see div A (although in Opera you can)
I do think there's something a bit dodgy about the way Firefox renders
the OP's example.
There's a long-standing bug about how gecko handles negative z-index. https://bugzilla.mozilla.org/show_bug.cgi?id=78087
--
Berg
Bergamot wrote:
Ben C wrote:
>In Firefox we can't see div A (although in Opera you can)
I do think there's something a bit dodgy about the way Firefox renders
the OP's example.
There's a long-standing bug about how gecko handles negative z-index.
https://bugzilla.mozilla.org/show_bug.cgi?id=78087
Thanks. I should have checked bugzilla before posting.
I have been relying on http://www.w3.org/TR/CSS21/zindex.html#q2, I
thought I understood, especially
"All positioned descendants with 'z-index: auto' or 'z-index: 0', in
tree order. For those with 'z-index: auto', treat the element as if it
created a new stacking context, but any descendants which actually
create a new stacking context should be considered part of the parent
stacking context, not this new one. For those with 'z-index: 0', treat
the stacking context generated atomically"
"The background of the root element is only painted once, over the whole
canvas."
But it seems not.
Is there another more to update w3 document on stacking order?
Louise
On 2007-05-10, Bergamot <be******@visi.comwrote:
Ben C wrote:
>>
In Firefox we can't see div A (although in Opera you can)
I do think there's something a bit dodgy about the way Firefox renders
the OP's example.
There's a long-standing bug about how gecko handles negative z-index.
https://bugzilla.mozilla.org/show_bug.cgi?id=78087
Thanks, that looks like the one. The main point is made there in Comment
#1 "For some reason the <bodyis not being transparent even though no
background is set". This is consistent with <htmlbeing considered the
root element, as you would expect.
On 2007-05-09, boclair <bo*****@bigpond.net.auwrote:
Ben C wrote:
>On 2007-05-09, boclair <bo*****@bigpond.net.auwrote:
[...]
>>>>No, boxes with z-index: -1 should be drawn, but behind other things in
their stacking context.
>
e.g.
>
<div style="z-index: 4" id="A">
<div style="z-index: -2" id="B"</div>
<div style="z-index: 2" id="C"></div>
</div>
<div style="z-index: 1" id="D"></div>
>
This is a different case to that posited by the OP. A same case would be
to declare position:absolute on a div with a negative z-index, eg div id A
Yes, what I wanted to illustrate was the scope of the z-index property.
What this example is meant to show is that a negative z-index doesn't
put you behind the element that forms your stacking context.
>>Careless of me. Omitted edit z-index: 4 to z-index:-4 in the style rules
of div id A.
The point is in that case, what is the stacking context for div A? It
should be the root element. Div A should not go behind the root element,
no matter how negative its (div A's) z-index. So what is the root
element?
I would have thought it would be the HTML element, and so if BODY has a
transparent background, we should still see div A.
If the root element is the #document, and HTML has a transparent
background, then we should still see div A.
In Firefox we can't see div A (although in Opera you can), even if we
add html, body { background: transparent; } just to be sure. This is why
I do think there's something a bit dodgy about the way Firefox renders
the OP's example.
You may well be right but I would have thought the logical behaviour
would be if the div is taken out of the flow with a negative z-index it
would stack beneath.
Yes, it stacks beneath everything else in its stacking context, but
above the background of the element forming its stacking context. In
this case that element is the "root element" (<html>). So the div should
be above <htmlbut behind <body>. Since <bodyhas a transparent
background, the div should be visible. That's the part Firefox is
getting wrong.
"This integer is the stack level of the generated box in the current
stacking context. The box also establishes a local stacking context in
which its stack level is '0'."
I see nothing in this reference that places mozilla browsers
interpretation in contravention
The important part there is "stack level [..] in the current stacking
context". It also says a bit later, "The root element forms the root
stacking context." So even though I set -1 on div A, it should not go
behind the root stacking context (formed by the <htmlelement).
Because some browsers will interpret certain constructions it doesn't
make those constructions logical (in my opinion).
I think it's clear that in this case there is a non-conformance in
Firefox. But I also can't see the point of the OP's markup-- why set
z-index: -1 at all? Perhaps he had a reason.
On 2007-05-10, boclair <bo*****@bigpond.net.auwrote:
Bergamot wrote:
>Ben C wrote:
>>In Firefox we can't see div A (although in Opera you can)
I do think there's something a bit dodgy about the way Firefox renders
the OP's example.
There's a long-standing bug about how gecko handles negative z-index.
https://bugzilla.mozilla.org/show_bug.cgi?id=78087
Thanks. I should have checked bugzilla before posting.
I have been relying on http://www.w3.org/TR/CSS21/zindex.html#q2, I
thought I understood, especially
"All positioned descendants with 'z-index: auto' or 'z-index: 0', in
tree order. For those with 'z-index: auto', treat the element as if it
created a new stacking context, but any descendants which actually
create a new stacking context should be considered part of the parent
stacking context, not this new one. For those with 'z-index: 0', treat
the stacking context generated atomically"
"The background of the root element is only painted once, over the whole
canvas."
But it seems not.
It is only painted once. Here is the document:
<html>
<body>
<div style="z-index: -1">
There are two stacking contexts here, one formed by <html(the root
stacking context), and one formed by the <div>. But there is nothing in
the <divso its own stacking context is not important in this example.
So the browser paints, from back to front:
1. <html(root element) background
2. <div>
3. <body>
But since body's background is transparent, we should be able to see div
A.
If the <divdid have descendents, with z-index set on some of them,
that would influence the order in which _they_ were painted _within the
div_. But overall, the painting order would still be <html>, <div>,
<bodyas above.
Is there another more to update w3 document on stacking order?
I don't think so. But it is all there in the CSS 2.1 document.
There is one subtlety which is mentioned briefly in CSS 2.1 but is part
of CSS 3 really, which is that setting opacity also starts a new
stacking context. That's really the only logical way to do it, and
implemented by Firefox.
Ben C wrote:
On 2007-05-10, Bergamot <be******@visi.comwrote:
>>
There's a long-standing bug about how gecko handles negative z-index.
https://bugzilla.mozilla.org/show_bug.cgi?id=78087
Thanks, that looks like the one. The main point is made there in Comment
#1
Note also the comments near the end of the bug report, where it says not
to expect it fixed in Firefox until release 3.0.
--
Berg
Bergamot wrote:
Ben C wrote:
>In Firefox we can't see div A (although in Opera you can)
I do think there's something a bit dodgy about the way Firefox renders
the OP's example.
There's a long-standing bug about how gecko handles negative z-index.
https://bugzilla.mozilla.org/show_bug.cgi?id=78087
Bug 78087 is fixed for Firefox 3.0, which has not yet been released.
--
David E. Ross
<http://www.rossde.com/>.
Don't ask "Why is there road rage?" Instead, ask
"Why NOT Road Rage?" or "Why Is There No Such
Thing as Fast Enough?"
<http://www.rossde.com/roadrage.html>
Ben C wrote:
On 2007-05-10, boclair <bo*****@bigpond.net.auwrote:
>Bergamot wrote:
>>Ben C wrote:
>
1. <html(root element) background
2. <div>
3. <body>
But since body's background is transparent, we should be able to see div
A.
I think I am coming grips with this. It is a matter of acceptance.
What confuses me somewhat is that if a background is declared on the
body element, the div is still painted. Take this
<body style="background:#0f0;">
<div style="z-index:-1;background:#000;color:#fff;">stacked beneath
body</div>
</body>
Louise
On 2007-05-11, boclair <bo*****@bigpond.net.auwrote:
Ben C wrote:
>On 2007-05-10, boclair <bo*****@bigpond.net.auwrote:
>>Bergamot wrote:
Ben C wrote:
>>
1. <html(root element) background
2. <div>
3. <body>
But since body's background is transparent, we should be able to see div
A.
I think I am coming grips with this. It is a matter of acceptance.
What confuses me somewhat is that if a background is declared on the
body element, the div is still painted. Take this
<body style="background:#0f0;">
<div style="z-index:-1;background:#000;color:#fff;">stacked beneath
body</div>
</body>
You left out "position: relative" on the <div>. z-index only applies to
positioned elements.
Even if you do that though, Opera still shows the div on top of the
background! I suppose it must be treating <bodyas the root stacking
context, not <html>.
Wladimir Borsov wrote:
The HTML source of one of my web pages starts simplified with a code like:
----
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
....
<BODY BACKGROUND="images/myback.gif">
<div id="content" style="position: absolute; top: 0; left: 255px; width: 700px; z-index:-1; background-color: transparency;">
Blah blah blah
</DIV>
</BODY>
----
The page is displayed correctly in InternetExplorer but NOT in Firefox.
Is DIV really a pure IE extension?
What's your definition of correctly? For a start "transparency" is not a valid colour. "transparent" is the default anyway.
Have you tried it without z-index of -1? Because in my Firefox, -1 makes it invisible.
Get, and use Firebug to examine the structure of your document.
Read: http://www.w3.org/TR/2005/WD-CSS21-2...ropdef-z-index
DIV an IE extension?
The standard: http://www.w3.org/TR/html401/ Specifically: http://www.w3.org/TR/html401/struct/global.html#h-7.5.4 This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Tim Mackey |
last post by:
hi,
i have a javascript function to highlight google search keywords in the
page. it works well on IE and mozilla browsers. for the page OnLoad, i
call the Highlight() method, and that...
|
by: christian9997 |
last post by:
Hi
I would be very helpful if someone could help me with this code.
It works fine in IE but when I display it in Netscape or Firefox and I
move the mouse from one menu to the other the gap...
|
by: Pugi! |
last post by:
I would like to obtain the the position of backgroundimage of a div because
I use it for animation. The following code works for Internet Explorer
(takes the else if) and returns positionx '10px'...
|
by: petermichaux |
last post by:
Hi,
I'm hoping for a reason I'm wrong or an alternate solution...
I'd like to be able to dynamically include some javascript files. This
is like scriptaculous.js library but their solution is...
|
by: Hoss |
last post by:
Hello all-
This is what im trying to achieve. At the top of my page there is some
search functionality, through which you cause to be loaded a string
representing an HTML page. Below this and...
|
by: evgenyg |
last post by:
Hello !
We have the following situation - when Ajax request is sent what's
being returned by the server is usually an XML (which is used for DOM
updates) but sometimes it's HTML which is a whole...
|
by: =?Utf-8?B?anVuaW9yLWdlZWtldHRl?= |
last post by:
I have seen similar questions posted here but no result for my situation so
here goes. I have a fairly new Maxtor OneTouch III Turbo Terabyte external
drive (raid) and a new Dell 690 Precision...
|
by: rjdougan |
last post by:
I am not a developer but need some help with scripts for a client.
I have a script to handle form validation and one that handle mouseover on menu.
The form validation script works fine by it...
|
by: CloudSolutions |
last post by:
Introduction:
For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
|
by: Faith0G |
last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
|
by: ryjfgjl |
last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
|
by: ryjfgjl |
last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
| |
