473,651 Members | 2,466 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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.dt d">
<html>
<head>
<title>Test</title>

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

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

</head>
<body>
<div class="test1">T est Div 1</div>
<div class="test2">T est 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 3138
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********@gma il.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.dt d">
<html>
<head>
<title>Test</title>

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

div.test2 {
position:relati ve;
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">T est Div 1</div>
<div class="test2">T est 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 "Transition al" (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...@codesm iths.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
5067
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 excellent answers (thanks!). It will be the basis of a slightly more complicated function for rendering a two-level navigation bar ( Don't have time to get into design of a multi-styletype renderer for n-level hierarchies. ) This is a single function...
59
4751
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 XHTML1.0 Strict one, the media-handheld CSS is _ignored_. Only with the Nokia Doctype, the CSS is used. I find this really annoying as it goes against the whole idea of media-independent XHTML Strict along with stylesheets. On the good side, WML...
41
1248
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
3892
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 would you recommend? The w3c HTML validator mentions XHTML 1.0 Transitional, Basic, Strict, and XHTML 1.1. Would I be able to make my existing CSS work in the XHTML page without modification to the .css file?
47
10297
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
1147
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 complains about the casing of the tags! where is the intellisense to detect it, and fix it? Then, there is the src of an image that does not find. When I bring the dialog box and want to point to the source does not even display all the files inside the...
24
2625
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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="zh-tw" /> knowing all the time as...
17
1995
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 Harmful" since "authors write XHTML that makes assumptions that are only valid for tag soup or HTML4 UAs" and might find that the "site breaks horribly" when they decide to "send the same content as application/xhtml+xml".
0
989
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 specified . <?PHP echo $registration; ?>" type="text" id="txtLastName"/> can guide me to validate this website in xhtml 1.0 transition
0
8349
marktang
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...
0
8695
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
8460
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8576
tracyyun
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...
0
5609
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();...
0
4143
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...
0
4281
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
1906
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
2
1585
bsmnconsultancy
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...

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.