469,954 Members | 1,773 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,954 developers. It's quick & easy.

DIV not recognized by Firefox - It works only in IE - How to replace it for Firefox?

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

May 8 '07 #1
28 6437
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">
May 8 '07 #2
ASM
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
May 8 '07 #3
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)
May 8 '07 #4
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?

May 8 '07 #5
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/
May 8 '07 #6

"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

May 8 '07 #7
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

May 9 '07 #8
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


May 9 '07 #9
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.
May 9 '07 #10
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).
May 9 '07 #11
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.
May 9 '07 #12
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
May 9 '07 #13
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

May 9 '07 #14
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
May 9 '07 #15
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.
May 9 '07 #16
Daz
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).

May 9 '07 #17
Daz
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?

May 9 '07 #18
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
May 10 '07 #19
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
May 10 '07 #20
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
May 10 '07 #21
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.
May 10 '07 #22
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.
May 10 '07 #23
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.
May 10 '07 #24
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
May 10 '07 #25
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>
May 10 '07 #26
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
May 11 '07 #27
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>.
May 11 '07 #28
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
May 12 '07 #29

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by =?Utf-8?B?anVuaW9yLWdlZWtldHRl?= | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.