perchè se metto la dichiarazione html <!doctype html> non riesco a vedere lo sfondo del menu e l'altezza della pagina cambia mentre se non la metto riesco a vedere tutto

ecco il codice


codice:
<!doctype html> 
<html>
 <head>
 <meta charset="UTF-8"> 
<title>HOME PAGE | COLLEPARDO</title> 
<link rel="stylesheet" type="text/css" href="aiuto.css">
 </head> 
<body> <div id="HEADER"> <h1> COLLEPARDO </h1> </div>
 <div id="MENU"> 
<ul id="menu-verticale"> [*] Home page [*] Cosa Visitare [*] Certosa [*] Mappa  [/list]</div>
 <div id="CONTENT"> <h2> BENVENUTI </h2> 

 <h3> 
In questo sito troverete una descrizione dei luoghi e dei cibi del paese Perch� Collepardo? Oltre ad essere un bellissimo paese li abitano i miei nonni materni </h3> 
<div id="caption"> [img]collenotte.JPG[/img] 
</div>
 </div> 
<div id="FOOTER"> COPYRIGHT E INFO DI CHIUSURA PAGINA... </div> </body> </html>
e css
codice:
body { color: #000000; margin: 0px 0px ; } 
div { font-size: 18px; font-family: Georgia; } /* ----- ----- ----- ----- ----- */
 h1{font-size: 90px;text-align:center;margin:1px auto;text-shadow:2px 2px 4px #000000; /* colore sfumato */}
 h2 { font-size:25px;}
 h3 { font-size:16px;text-align:left;} 
a:link {color:black;text-decoration:none;}
 a:visited {color:black;} 
#HEADER { margin: 3px auto; height:15%; color:white; border-width:4px; border-style:solid; border-color:#004A6E; text-shadow:2px 2px 4px #000000; /* colore sfumato */ background-color:#6161E6; /* border-bottom: solid 1px #000000;*/ }
 #MENU { float: left; width:20%; height:70%; margin:0px 5px; background-color:#6161E6; } 
#menu-verticale {list-style:none; margin:0; padding:0;font-size:large;}
 #menu-verticale li a {display:block; margin: 1px 0px; padding:5px 10px; background:#00CCFF; color:white; font-size:25px;}
 #menu-verticale li a:hover{ background:white; color:black; text-decoration:none;} #CONTENT { float: left; height:70%; width: 69%; background-color:#00CCFF; margin-left:auto; margin-right:auto; } #caption { font-family: Georgia; font-size: 10px; float: left; margin: 0; padding: 0; position: relative; overflow: hidden; } #caption img { float: left; margin: 0; padding: 0; background: #fff; border: none; width:80%; height:70%; } #FOOTER { clear: left; border-top: solid 1px #000000; }