[RESOLVED] DOCTYPE is not liking my css positioning

spighita

Hi,

I need to position my div in a certain way and when I add the DOCTYPE to the html it does not accept the layout.

Here is the example.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

</head>
<body>

<div style="float: left; width: 49%; border: solid 1px; position:relative; height: 500px;">

<div style="position:absolute; top:30; left:20% ;"><INPUT TYPE="text" NAME="nameofchild" size="15"></div>
	<div style="position:absolute; top:30; right:20%;"><INPUT TYPE="text" NAME="lastnameofchild" size="15"></div>
	<div style="position:absolute; top: 60; right: 20%;">Last name</div>
	<div style="position:absolute; top: 60; left: 20%;">First name</div>
</div>


</body>

</html>

If you remove the DOCTYPE the layout will look correctly. What am I doing wrong?

jeepin81

What browser are you using? Maybe try using HTML5... ie:


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"/>

This might help you out as well:

http://validator.w3.org/

Just a thought.

spighita

I've tried all browsers available I have here and they all coincidentally render the same result.

IE, Firefox and Safari.

I also cleaned up the code to get it validated and passed.

Here is the new code but I still can't get it to render as I would like it to be

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Test</title>
</head>



<body>

<div style="float: left; width: 49%; border: solid 1px; position:relative; height: 500px;">

<div style="position:absolute; top:30; left:20% ;"><input type="text" name="nameofchild" size="15"/></div>
	<div style="position:absolute; top:30; right:20%;"><input type="text" name="lastnameofchild" size="15"/></div>
	<div style="position:absolute; top: 60; right: 20%;">Last name</div>
	<div style="position:absolute; top: 60; left: 20%;">First name</div>
</div>


</body>

</html>

johanafm

It's weird that it works without doctype, i.e. by cutting off everything before the body element. But, I suppose that the browser starts making assumptions about what you mean when you right incorrect style code, just as it does with incorrect html markup.

Your problem is this

top: 30;

30 what? px, %, pt... Without doctype, I'm taking a wild guess that your browser assumes your document is HTML 4.01 Transitional and then goes on to assume that 30 means 30px.

cretaceous

without a doctype, browsers revert to quirks mode so not even 'transitional'

as johanafm points out this is an error in your css not the browser

when this happens:
"...and they all coincidentally render the same result. "
then it's probably not the browser mis-rendering things!

spighita

Good catch. Thank you.