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
