Menu
I'm trying to position a DIV with absolute positioning, however it appears that with XHTML DOCTYPE it doesn't work. In the following example, the red square appears at top-left, instead of being somewhere in the middle of the screen :
<!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" xml:lang="en">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="" media="screen,projection" />
<style type="text/css">
body { background-color: silver; }
div
{
width: 100px;
height: 100px;
border: 1px solid #000;
}
div#one
{
background-color: red;
position: absolute;
top:520;
left: 220; }
</style>
</head>
<body>
<h1>
This is some text this is some text this is some.
</h1>
<div id="one"></div>
</body>
</html>
If appears that if I replace the DOCTYPE to this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
It will work correctly, however I would like to follow XHTML doctype.
Any idea?
618
Add px to your top and left properties:
top: 520px;
left: 220px
With the XHTML doctype (or more precisely: Standards Mode), the browser will not assume that you mean px if you do not explicitly state it, in contrast to Quirks Mode.
111
In XHTML absolute positioned elements with no content become "invisible" because they get width 0 and height 0. Try adding content to your div#one or try the following CSS
div#one
{
background-color: red;
position: absolute;
top:520px;
left: 220px;
height: 100px;
width: 100px;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
