By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,882 Members | 2,453 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,882 IT Pros & Developers. It's quick & easy.

Problem positioning layers

P: n/a
Hi,

I like a demo on layers posted at
http://www.echoecho.com/csslayers.htm. It displays two text phrases in
separate layers visually overlapped, first with one on top and the
other beneath, and then vise versa.

The site also provided the code they claimed produced this
(overlapping) effect. I plugged their code into the body of a vanilla
html shown below, but the items were not overlapped, neither with
Firefox nor IE.

What mistake am I making?

TIA,
Richard

<!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>
<title>My Title</title>
</head>
<body ondblclick="MyFunction(3)">
LAYER 1 ON TOP:
<div style="position:relative; font-size:50px; z-index:2;">LAYER
1</div>
<div style="position:relative; top:-50; left:5; color:red;
font-size:80px; z-index:1">LAYER 2</div>

LAYER 2 ON TOP:
<div style="position:relative; font-size:50px; z-index:3;">LAYER
1</div>
<div style="position:relative; top:-50; left:5; color:red;
font-size:80px; z-index:4">LAYER 2</div>
</body>
</html>

Apr 2 '06 #1
Share this Question
Share on Google+
4 Replies


P: n/a
Richard wrote :
Hi,

I like a demo on layers posted at
http://www.echoecho.com/csslayers.htm.
Tutorials and demo at echoecho.com are definitely *_not_* recommendable:
they are full of markup errors, validation errors, bad coding practices,
poor semantic markup, nested tables, no doctype decl. so documents
trigger backward-compatible rendering mode and not standards rendering
mode, etc.. My recommendation: Don't learn from that site.

It displays two text phrases in separate layers visually overlapped, first with one on top and the
other beneath, and then vise versa.

The site also provided the code they claimed produced this
(overlapping) effect. I plugged their code into the body of a vanilla
html shown below, but the items were not overlapped, neither with
Firefox nor IE.

What mistake am I making?

The first thing you should do when meeting problems or difficulties like
this is to validate the markup code with a validator.

W3C markup validator
http://validator.w3.org/

WDG HTML validator
http://www.htmlhelp.com/tools/validator/

Next, you do the same with the CSS code.

W3C CSS validator
http://jigsaw.w3.org/css-validator/

I repeat: there is no other first steps to do actually.
Next, you have to fix the errors so that you can rule out parsing errors
or fallback mechanisms in browsers when meeting invalid or improperly
nested elements.
TIA,
Richard

<!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>
<title>My Title</title>
</head>
<body ondblclick="MyFunction(3)">
LAYER 1 ON TOP:
<div style="position:relative; font-size:50px; z-index:2;">LAYER
1</div>
<div style="position:relative; top:-50; left:5; color:red;
font-size:80px; z-index:1">LAYER 2</div>
top is -50; the validator will report this as an error. No units are
specified for top and left. So this is a parsing error.

CSS1 and CSS 2.1 specifications require that non-zero values must be
specified with a length unit; otherwise, the css declaration will be
ignored. Mozilla-based browsers, MSIE 6+ (in standards compliant
rendering mode), Opera 7+, Safari 2.x and other W3C standards-compliant
browsers enforce such handling of parsing error.
CSS1 Forward-compatible parsing
http://www.w3.org/TR/REC-CSS1#forwar...atible-parsing
CSS2.1 Rules for handling parsing errors
http://www.w3.org/TR/CSS21/syndata.html#parsing-errors

LAYER 2 ON TOP:
<div style="position:relative; font-size:50px; z-index:3;">LAYER
1</div>
<div style="position:relative; top:-50; left:5; color:red;
font-size:80px; z-index:4">LAYER 2</div>
Same problem here.
</body>
</html>


Finally, here, we have no idea what MyFunction(3) actually do. Post an
url and then we can figure this out.

You can try my own interactive positioning demo:

http://www.gtalbot.org/DHTMLSection/Positioning.html
(It won't perfectly work in MSIE 7 beta 2; I still need to fix a few
things). Also, the divs are either images or nested ones... which is not
the case of your html code).

Gérard
--
remove blah to email me
Apr 2 '06 #2

P: n/a
Hi Gérard,

Thank you VERY much for your analyis of the problem(s) and your
extensive guidance of how to code in this application area.
Tutorials and demo at echoecho.com are definitely *_not_* recommendable It's a sin that people so ill prepared have the temerity to offer advice to all the programmers on the planet. The first thing you should do when meeting problems or difficulties
like this is to validate the markup code with a validator.
Did that with all three validators -- in the process switched to HTML
from XHTML.
top is -50; the validator will report this as an error. No units are
specified for top and left. So this is a parsing error.
That didn't happen for some reason. But I'll change that value, and
maybe need something like relative positioning. The weird thing is
that I his page actually produces overlapped text on my browser
(Firefox 5.0) and inspection or the web page's source seems to indicate
that the executed code matches the code he published in a multi-line
text control, which is what I copied into my test.
we have no idea what MyFunction(3) ..
That's just some toy code so I remember the syntax for passing
parameters, etc. -- irrelevant to the subject problem.
You can try my own interactive positioning demo:


Thanks. I ran it a bit (successfully). I'm going to concentrate on
your code for a while instead of banging my head against his code.

The main thing is that I have introduced the html/css validation into
my practice. Again, I thank you for that.

Regards,
Richard

Apr 4 '06 #3

P: n/a
Richard wrote:
Gérard wrote:
top is -50; the validator will report this as an error. No units are
specified for top and left. So this is a parsing error.
That didn't happen for some reason.


Probably because the styles are declared in-line. I don't think either
the HTML or CSS validator checks in-line CSS.
The weird thing is
that I his page actually produces overlapped text on my browser
(Firefox 5.0) and inspection or the web page's source seems to indicate
that the executed code matches the code he published in a multi-line
text control, which is what I copied into my test.


Probably because the echoecho.com page in question is rendered in quirks
mode. If it had a proper DOCTYPE and rendered in standards mode, results
could very well be different.

The sample you found is indeed a terrible one. The fact that it
references Netscape's "poor CSS support" should make it obvious that the
article was written many years ago, at least to those of us who know it
is referring to Netscape 4. If the article were dated, you'd know how
old it really is, too.

Things have changed significantly since Netscape 4 was considered
"modern". This site hasn't kept up with the times, so you should leave
it. Forever.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Apr 4 '06 #4

P: n/a
Hi Kchayka,

Thanks for responding.
top is -50; the validator will report this as an error. No units are
specified for top and left. So this is a parsing error. That didn't happen for some reason.

Probably because the styles are declared in-line.


I saw the CSS validator announcement to that effect, so I put in a link
to an external .css file with ".aboveText ... and .belowText ..." in
it. But I see now that the problem was
in the <div> tag code, as Gerard pointed out. How can that be
validated by the CSS validator.
rendered in quirks mode.


I followed up on this at http://hsivonen.iki.fi/doctype/. That was a
great insight because it irritated me a lot. Just one more curiosity:
Is there something in his document that actually requests quirk mode?
That would be the final explanation for why his document and my snippet
extracted from it displayed differently.

Final word: PROBLEM SOLVED: As Gerard pointed out, unit were missing.
I added px in a couple of places, but not all!! I just noticed it now,
added the rest, and voila, the snippet presented itself just like the
web page! And "quirks" is the reason faulty code still works.

Thanks to all of you for educating me.

Regards,
Richard.

Apr 4 '06 #5

This discussion thread is closed

Replies have been disabled for this discussion.