Stylesheets - XHTML 1.0 Transition CSS Problem

Author

XHTML 1.0 Transition CSS Problem

Cruelemort

2007-04-18, 6:16 am

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

Jukka K. Korpela

2007-04-18, 6:16 pm

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/

Ben C

2007-04-18, 6:16 pm

On 2007-04-18, Cruelemort <ian.inglis@XXXXXXXXXX> wrote:
> 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.

Andreas Prilop

2007-04-18, 6:16 pm

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/sea...:Alan.J.Flavell

Andy Dingley

2007-04-18, 6:16 pm

On 18 Apr, 13:43, Ben C <spams...@spam.eggs> wrote:

> 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.

Cruelemort

2007-04-23, 6:16 pm

On 18 Apr, 16:20, Andy Dingley <ding...@codesmiths.com> wrote:
> On 18 Apr, 13:43, Ben C <spams...@spam.eggs> wrote:
>
>
> 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.