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.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Title</title>
</head>
<body ondblclick="MyF unction(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> 4  2051 
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.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Title</title>
</head>
<body ondblclick="MyF unction(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
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
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.
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. This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
by: JesusFreak |
last post by:
From: us_traveller@yahoo.com (JesusFreak)
Newsgroups: microsoft.public.scripting.jscript
Subject: toolbar script problem
NNTP-Posting-Host: 192.92.126.136
Recently, I downloaded the following beautiful script
"http://javascript.internet.com/navigation/toolbar-menu.html". It
works like a charm. I made my webpage in frames, where the nav-frame
shows the menubar, so whenever I click a link in the menubar, it opens
in the frame below. But...
|
by: murali |
last post by:
Hello everyone,
I used absolute positioning with div tag in my website. The page looks
cool as long as someone doesn't try to zoom in by increasing the text
size (ctrl++ or thru changing font size in browser settings). When
someone does that, the layers seem to overlap and the layer with a
greater z value pops in front and the other layers are pushed back.
The most obvious solution will be to prevent the user from increasing
the text...
|
by: Chris McGarry |
last post by:
Hello,
I'm new to style sheets and have been fighting with browser
compatibility for two days. I'm developing a image selection page
(similar to Ebay where the visitor can select and enlarge 1-6
thumbnail pictures) that will possibly be displaying different sized
images within a table. The following code almost :) works correctly in
I.E. (I'd like the images centered in the table vertically and
horizontally) but does not work in...
|
by: rdlebreton |
last post by:
Hi, Folks!
I've been trying to develop my own version of these draggable
layers and I have been limiting myself to IE6...for now. I have
looked at some other examples to get ideas of creating an alternative
to pop-up windows in a web page. The code I have works (sort of).
The problem is that I can move these layers around when I move the
mouse slowly, however, if I move it fast the web browser looses track
of the motion and leaves the...
|
by: George Hester |
last post by:
http://tinyurl.com/5uj6w
The lower middle icon the "block" should not drop down when the mouse is over it. How can I stop that?
Also the navigation divs both top and bottom should follow the scroll right. Both of these issues occur in IE 6 but not in IE 5.5.
You can get the horizontal scroll bar for the window by increasing the size of the image wider than the display area
of the window. Assumes 600x800 default display size.
Thanks...
| | |
by: Bryan |
last post by:
I am attempting to make a web page more Netscape friendly... <a
href="http:www.gordonceilings.com"></a>
I have already corrected the table issues in an offline staging site
(where I do the building and then move it to the live site when ready),
so don't worry about those. My problem lies in the menu on the left. It
shows up and the initial links work in Netscape 8, but the menu will
not drop down to show the sub-selections. I can get the...
|
by: |
last post by:
I just installed VS 2005. Was working with 2003 and .Net 1.1. Trying to get the feel for a master page and I'm having some issues. I'm looking for a pretty basic setup. Standard header with an image, forced to lower right of screen, in the content area. I had this working just fine in 1.1, but the tags seem to behave quite differently in 2.0.
If I remove the !DOCTYPE element, I get what I want. Is it dangerous to remove this? How can I...
|
by: nino9stars |
last post by:
Hello,
I have just started messing with absolute positioning on webpages, and
it definitely let's you do some creative things. Well, after much
searching and help, I got the images I was using to overlap correctly.
You can see it on this page:
www.creativekaysjewelry.com
The images overlap exactly how I wanted and in the right position
|
by: sknonline |
last post by:
Greetings.
I am having troubles using absolute positioning in IE6. When I establish the width as 100%, it's not spanning the entire width of the browser. It works in Firefox, Safari, and IE7.... Just not IE6. Any suggestions?
Website: stevenkneff.com
code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
| | |
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
| | |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |
