DOCTYPE causing CSS position not to work?

DOCTYPE causing CSS position not to work? - Printable Version

+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Webmasters (https://hackforums.net/forumdisplay.php?fid=141)
+---- Forum: Website Construction (https://hackforums.net/forumdisplay.php?fid=50)
+---- Thread: DOCTYPE causing CSS position not to work? (/showthread.php?tid=2703486)

DOCTYPE causing CSS position not to work? - Nessie - Jul 22, 2012

Here's a snippet of my code... (Changed some stuff, such as the title).

Code 
<html>

<head>

<title>EXAMPLE</title>

<style>

A:link, A:visited{

color:red;

text-decoration:none;

}

</style>

</head>

<body>

<div style="position:fixed;top:155;left:35">

.

</div>

</body>

</html>

When I preview that, everything looks good. The "." is in the correct position.
[Image: sooHf.png]

But then when I add <!DOCTYPE html> (I'm pretty sure that's the correct doctype) the positioning doesn't work...

Code 
<!DOCTYPE html>

<html>

<head>

<title>EXAMPLE</title>

<style>

A:link, A:visited{

color:red;

text-decoration:none;

}

</style>

</head>

<body>

<div style="position:fixed;top:155;left:35">

.

</div>

</body>

</html>

This is in Firefox, but I've tested in other browsers. I've also tried using other doctypes...

Hopefully someone can help me :)

* - Dylan Wins - Jul 22, 2012

Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

or try this:

Code 
<html>

<head>

<title>EXAMPLE</title>

<style type="text/css">

A:link, A:visited{

color:red;

text-decoration:none;

}

</style>

</head>

<body>

<div style="position:fixed;top:155;left:35">

.

</div>

</body>

</html>

and if any of those didn't work, try this:

Code 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>EXAMPLE</title>

<style type="text/css">

A:link, A:visited{

color:red;

text-decoration:none;

}

</style>

</head>

<body>

<div style="position:fixed;top:155;left:35">

.

</div>

</body>

</html>

I hope I helped! =)

* - SavageBoys - Jul 22, 2012

Specify a doctype before styling, this is common sense.

You created a style without rules, then added rules, what do you expect.

I'm not 100% sure but there have been other doctypes that dislike inline styling, the new html5 doctype might as well.

* - Nessie - Jul 22, 2012

Dylan Wins...

Code 
<html>

<head>

<title>EXAMPLE</title>

<style type="text/css">

A:link, A:visited{

color:red;

text-decoration:none;

}

</style>

</head>

<body>

<div style="position:fixed;top:155;left:35">

.

</div>

</body>

</html>

That works but it still doesn't specify a doctype first... don't I need to do that?

* - Dylan Wins - Jul 22, 2012

(Jul 22, 2012 06:39 PM)Nessie Wrote: Dylan Wins...

Code
<html> <head> <title>EXAMPLE</title> <style type="text/css"> A:link, A:visited{ color:red; text-decoration:none; } </style> </head> <body> <div style="position:fixed;top:155;left:35"> . </div> </body> </html>

That works but it still doesn't specify a doctype first... don't I need to do that?

You need to specify your scripts for them to work properly.
Example:
<style type="text/css">
</style>

...and with the DOCTYPES, it all depends.

There is HTML 4.01 Strict, Transitional, and Frameset.

Strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

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

Frameset:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

You can try these 3.

I hope I helped. =)