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

XHTML 1.0 Transition CSS Problem

P: n/a
All,

I ran into a CSS problem when using the XHTML 1.0 transitional
document type, so i have made a simplified version to show you all
here.

Basically i have written a very simple HTML page that contains two div
elements each of a different class, the two classes (called test1 and
test2) just set the positioning and z-layering of the div so the text
on each one should overlap -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>

<style type="text/css">
div.test1 {
position:relative;
top:60;
font-size:50px;
z-index:3;
}

div.test2 {
position:relative;
top:-50;
left:5;
color:red;
font-size:80px;
z-index:4;
}
</style>

</head>
<body>
<div class="test1">Test Div 1</div>
<div class="test2">Test Div 2</div>
</body>
</html>

Both IE6 and Firefox 2 do not show the text in each div overlapping
(they show one under the other) until i remove the DOCTYPE definition
at the top (or change it to HTML 4.0 instead of XHTML 1.0).

Hopefully this is just some incompatibility in the XHTML 1.0 standard
that i have missed in my code, but if somebody could spot the problem
and let me know that would be appreciated.

Cheers

Ian

Apr 18 '07 #1
Share this Question
Share on Google+
5 Replies


P: n/a
Scripsit Cruelemort:
I ran into a CSS problem when using the XHTML 1.0 transitional
document type
Using XHTML on the web is pointless, so you could simplify the situation by
using good old HTML 4.01.
so i have made a simplified version to show you all here.
You should have posted the URLs of the simplified version and the original
version.

Besides, you should have used a CSS checker to detect your syntax errors.
Both IE6 and Firefox 2 do not show the text in each div overlapping
(they show one under the other) until i remove the DOCTYPE definition
at the top (or change it to HTML 4.0 instead of XHTML 1.0).
Removing the DOCTYPE declaration puts browsers into quirks mode, where they
interpret your malformed CSS code in a manner that CSS specifications do not
allow them to use. Regarding HTML 4.0 vs. XHTML 1.0, that's hardly the
issue - you probably changed the DOCTYPE to an _incorrect_ attempt at use an
HTML 4.0 DOCTYPE.
Hopefully this is just some incompatibility in the XHTML 1.0 standard
Huh? No, your code is incompatible with CSS specifications.

The properties top and left cannot have plain numbers as their values
(except for the number 0); a unit is needed. You probably meant e.g.
top:60px when you wrote top:60, but a browser is _not_ allowed to guess
this, when it plays by CSS rules; it must ignore the declaration.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Apr 18 '07 #2

P: n/a
On 2007-04-18, Cruelemort <ia********@gmail.comwrote:
All,

I ran into a CSS problem when using the XHTML 1.0 transitional
document type, so i have made a simplified version to show you all
here.

Basically i have written a very simple HTML page that contains two div
elements each of a different class, the two classes (called test1 and
test2) just set the positioning and z-layering of the div so the text
on each one should overlap -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>

<style type="text/css">
div.test1 {
position:relative;
top:60;
font-size:50px;
z-index:3;
}

div.test2 {
position:relative;
top:-50;
left:5;
You have left the units off this value for left, I wonder if that causes
the rest of the contents of this selector to be rejected in XHTML 1.0
mode?
color:red;
font-size:80px;
z-index:4;
}
</style>

</head>
<body>
<div class="test1">Test Div 1</div>
<div class="test2">Test Div 2</div>
</body>
</html>

Both IE6 and Firefox 2 do not show the text in each div overlapping
(they show one under the other) until i remove the DOCTYPE definition
at the top (or change it to HTML 4.0 instead of XHTML 1.0).

Hopefully this is just some incompatibility in the XHTML 1.0 standard
that i have missed in my code, but if somebody could spot the problem
and let me know that would be appreciated.
Apr 18 '07 #3

P: n/a
On Wed, 18 Apr 2007, Cruelemort wrote:
I ran into a CSS problem when using the XHTML 1.0 transitional
document type,
"XHTML 1.0 Transitional" is just a clueless indicator.

When you want/need XHTML (for new documents), then use "Strict".
When you need "Transitional" (for old documents), then stick
with HTML 4 Transitional.

Of course, a better alternative in both cases is HTML 4.01 Strict.

--
In memoriam Alan J. Flavell
http://groups.google.com/groups/sear...Alan.J.Flavell
Apr 18 '07 #4

P: n/a
On 18 Apr, 13:43, Ben C <spams...@spam.eggswrote:
You have left the units off this value for left, I wonder if that causes
the rest of the contents of this selector to be rejected in XHTML 1.0
mode?
For IE7 at least, then yes, I can confirm that. In Strict rendering
modes (and this doctype declaration gives them) then CSS errors that
were automagically corrected for in Quirks mode now cause the invalid
CSS to be ignored.

Apr 18 '07 #5

P: n/a
On 18 Apr, 16:20, Andy Dingley <ding...@codesmiths.comwrote:
On 18 Apr, 13:43, Ben C <spams...@spam.eggswrote:
You have left the units off this value for left, I wonder if that causes
the rest of the contents of this selector to be rejected in XHTML 1.0
mode?

For IE7 at least, then yes, I can confirm that. In Strict rendering
modes (and this doctype declaration gives them) then CSS errors that
were automagically corrected for in Quirks mode now cause the invalid
CSS to be ignored.
Thanks for all your replies, it turned out to be a combination of the
units being missed off, and my own confusion because i was using
relative and thought i was using absolute positioning.

Many thanks.

Apr 23 '07 #6

This discussion thread is closed

Replies have been disabled for this discussion.