DocType does not work with Positioning 1

seaport · May 23, 2005

I have a page using CSS positioning. It works if the DocType is HTML 4.0.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"[URL unfurl="true"]http://www.w3.org/TR/REC-html40/strict.dtd">[/URL]

However, all positioning does not work with the DocType html 4.01, strict or transitional.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]

Could anyone tell me why? Is 4.01 supposed to be better than 4.0?

Thanks in advance.

Seaport

dmacster · May 23, 2005

It may be related to CSS version as well.

See the w3 link for why to use and a validator link

http://www.w3schools.com/html/html_whyusehtml4.asp

Donna

ChrisHunt · May 23, 2005

Could anyone tell me why?

Not without seeing the page in question, no.

There are lots of sites out there that get CSS positioning to work in HTML 4.01, though, so you must be going wrong somewhere.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

seaport · May 23, 2005

Here is the code of the page.

Code:

<!--
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
			"[URL unfurl="true"]http://www.w3.org/TR/REC-html40/strict.dtd">[/URL]
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
	</head>
	<body>
		<table id="myTable" border="1" height="200" align="center" width="500">
			<tr height="250">
				<td>
					<P>Status, absolute, or relative position</P>
				</td>
			</tr>
			<tr id="row2">
				<td>
					<table id="table2" border="1" height="500">
						<tr height="500">
							<td width="100" valign="top">cell 1
							</td>
							<td width="500" id="myCell" valign="top">cell 2
								<div id="divParent" style="position: relative; top:5; left:5">
									<div id="div1" style="position: absolute; top:50; left:50;">
										Div 1 (position: 50,50)
										<div id="div2" style="position: absolute; top:50; left:50;">Div 2, position 100, 
											100</div>
										<div id="div3" style="position: absolute; top:100; left:100;">Div 3, position 150, 
											150</div>
									</div>
									<div id="div4" style="position: absolute; top:250; left:50;">
										Div 4
										<div id="div5" style="position: absolute; top:50; left:50;">Div 5</div>
										<div id="div6" style="position: absolute; top:100; left:100;" onclick="getPos()">Div 
											6</div>
									</div>
								</div>
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</body>
</html>

Please tell me what I did wrong.

Thanks.

Seaport

Vragabond · May 23, 2005

For one, none of your css styles have units, which are necessary. For two, you're using solely absolute positioning, which is not the best way to go. Maybe you should read up on CSS some more before you start making css layout driven websites.

seaport · May 23, 2005

Vragabond,

I put in "px" and the page works for HTML 4.01.

You are right. I got to read more about CSS.

Thanks.

Seaport

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

DocType does not work with Positioning 1

seaport

MIS

dmacster

Technical User

ChrisHunt

Programmer

seaport

MIS

Vragabond

Programmer

seaport

MIS

Similar threads

Part and Inventory Search

Sponsor