473,320 Members | 2,048 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

XHTML 1.0 Transition CSS Problem

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
5 3125
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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Richard A. DeVenezia | last post by:
I hope this is the end of my present 'discovery' phase. I've learned alot about JavaScript in a short time and my head hurts. The following is what came out of all my questions and all the...
59
by: Philipp Lenssen | last post by:
I've tested some of the new Nokia 6600 functionality. It ships with WAP2 and XHTML Support (it says). What it does is check the Doctype -- if it's not the XHTML Mobile Profile Doctype, but a...
41
by: CMAR | last post by:
What are the pluses and minuses of constructing and validating between XHTML Transitional vs. HTLM 4.01 Strict Thanks, CMA
29
by: Armand Karlsen | last post by:
I have a website ( http://www.zen62775.zen.co.uk ) that I made HTML 4.01 Transitional and CSS compliant, and I'm thinking of converting it into XHTML to learn a little about it. Which XHTML variant...
47
by: Chuck | last post by:
Is there any logical reason why one should convert if css is already being used? What possible, immediate, benefit would there be? I am at a loss to see what, pragmatic, difference it would make.
7
by: Carlos | last post by:
I am currently in the process of making an existing ASP .Net 1.0 compliant with 2.0. It has been kind of frustarting. Beginning with making the existing html tags compliamnt with xhtml. It...
24
by: Dan Jacobson | last post by:
I shall jump on the XHTML bandwagon. I run my perfectly good html4/strict pages thru $ tidy -asxhtml -utf8 #to get: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"...
17
by: Christoph Schneegans | last post by:
Hi! I would like to announce XHTML Proxy, a service that allows more accurate testing of XHTML documents. <http://hixie.ch/advocacy/xhtml> states that "Sending XHTML as text/html Considered...
0
by: hemendra | last post by:
when i validate php site through wc3 xhtml validator then i faced many problem such it rise error in this type of code Line 211, Column 36: end tag for "input" omitted, but OMITTAG NO was...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.