If you view this page in IE everything will come out nicely, but when adding a doctype to it and view it in IE or in any other browser my lay-out gets messed up. If anyone has a solution for this problem i'm eager to listen. And don't worry about the extension, because there isn't any coding in it.
Without:
<!-- m --><a class="postlink" href="http://digec.greatcorners.com/main/temp/index.php">http://digec.greatcorners.com/main/temp/index.php</a><!-- m -->
With:
<!-- m --><a class="postlink" href="http://digec.greatcorners.com/main/temp/index_doc.php">http://digec.greatcorners.com/main/temp/index_doc.php</a><!-- m -->
CSS-file:
<!-- m --><a class="postlink" href="http://digec.greatcorners.com/main/temp/style.cssWell">http://digec.greatcorners.com/main/temp/style.cssWell</a><!-- m --> when you use a DTD it puts the browser into standards compliance mode (I use that term loosely for IE). If you do not use a DTD then the browser stays in quirks mode.
Since you have probably designed your layout in IE without using a DTD your layout goes wrong when you add one.
The only thing for it is to re-make your layout using a DTD and have your page open in several browsers to make sure that it's reasonably similar in all of them.I tried to rewrite the css so it worked with a doctype, but I decided to quit after a few hours. So i'm really hoping someone has done this before or has a solution for this.As lavalamp wrote a valid DTD (<!-- m --><a class="postlink" href="http://www.w3.org/QA/2002/04/valid-dtd-list.html">http://www.w3.org/QA/2002/04/valid-dtd-list.html</a><!-- m -->) is a must have.
I often use this basic template:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
<title>Basic HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="copyright" content="Basic HTML">
<meta name="keywords" content="Basic HTML">
<meta name="description" content="HTML template">
<script type="text/javascript">
//<![CDATA[
<!--
// all JavaScript here
//-->
//]]>
</script>
<style type="text/css">
<!--
/* cascading style sheet */
-->
</style>
</head>
<body>
<!-- html here -->
</body>
</html>I know I should use a doctype and I'm wanting to use one now, but I just can't get my code to work.Run your CSS through a validator and see if it gives you some useful clues.The 100% height only works in quirks mode (<!-- m --><a class="postlink" href="http://gutfeldt.ch/matthias/articles/doctypeswitch/table.html">http://gutfeldt.ch/matthias/articles/do ... table.html</a><!-- m -->).
Is this page the layout for the rest of your site or just the opening page?
As layout: explain/show how a general page would work.
As opener: position elements absolutely.
Do use a "srandard mode" DTD, it will make x-browser layout easier.I'm about half way through a design, I'm currently battling my way past an IE bug at the moment. I've use a very wide image for the background to create the two left and right sections, then I've absolutely positioned two div tags of width:50%.
I'll work on it more when I get home.I only use it as an opener. Thanks for all the help already. I'll try some more later this evening and let you know how it works out.
Without:
<!-- m --><a class="postlink" href="http://digec.greatcorners.com/main/temp/index.php">http://digec.greatcorners.com/main/temp/index.php</a><!-- m -->
With:
<!-- m --><a class="postlink" href="http://digec.greatcorners.com/main/temp/index_doc.php">http://digec.greatcorners.com/main/temp/index_doc.php</a><!-- m -->
CSS-file:
<!-- m --><a class="postlink" href="http://digec.greatcorners.com/main/temp/style.cssWell">http://digec.greatcorners.com/main/temp/style.cssWell</a><!-- m --> when you use a DTD it puts the browser into standards compliance mode (I use that term loosely for IE). If you do not use a DTD then the browser stays in quirks mode.
Since you have probably designed your layout in IE without using a DTD your layout goes wrong when you add one.
The only thing for it is to re-make your layout using a DTD and have your page open in several browsers to make sure that it's reasonably similar in all of them.I tried to rewrite the css so it worked with a doctype, but I decided to quit after a few hours. So i'm really hoping someone has done this before or has a solution for this.As lavalamp wrote a valid DTD (<!-- m --><a class="postlink" href="http://www.w3.org/QA/2002/04/valid-dtd-list.html">http://www.w3.org/QA/2002/04/valid-dtd-list.html</a><!-- m -->) is a must have.
I often use this basic template:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
<title>Basic HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="copyright" content="Basic HTML">
<meta name="keywords" content="Basic HTML">
<meta name="description" content="HTML template">
<script type="text/javascript">
//<![CDATA[
<!--
// all JavaScript here
//-->
//]]>
</script>
<style type="text/css">
<!--
/* cascading style sheet */
-->
</style>
</head>
<body>
<!-- html here -->
</body>
</html>I know I should use a doctype and I'm wanting to use one now, but I just can't get my code to work.Run your CSS through a validator and see if it gives you some useful clues.The 100% height only works in quirks mode (<!-- m --><a class="postlink" href="http://gutfeldt.ch/matthias/articles/doctypeswitch/table.html">http://gutfeldt.ch/matthias/articles/do ... table.html</a><!-- m -->).
Is this page the layout for the rest of your site or just the opening page?
As layout: explain/show how a general page would work.
As opener: position elements absolutely.
Do use a "srandard mode" DTD, it will make x-browser layout easier.I'm about half way through a design, I'm currently battling my way past an IE bug at the moment. I've use a very wide image for the background to create the two left and right sections, then I've absolutely positioned two div tags of width:50%.
I'll work on it more when I get home.I only use it as an opener. Thanks for all the help already. I'll try some more later this evening and let you know how it works out.