Quirksmode IE u Firefox & Co

Habe zwar bereits schon einmal gepostet, allerdings bin ich da nicht weitergekommen: Ich habe wohl eher ein grundsätzliches Problem…Angeblich ist meine HTML-Datei im Quirksmode. Ich habe dann versucht, das entsprechende Doctype einzubinden, damit die Darstellung nicht mehr im Quirksmode startet.
Leider ist mein Darstellungsproblem immer noch nicht gelöst. Ich habe immer noch Unterschiede bei der Darstellung im IE zu FIrefox. Firefox macht es (wie ja so wie ich gelesen habe zu erwarten ist) richtig, IE Version 7 machts falsch. Und ich weiss nicht mehr ob es daran liegt…? Könnt Ihr mir weiterhelfen?
Ich habe in anderen Foren nachgelesen, dort wird oft auf das Problem mit Padding abgehoben, aber muss zugeben, auch dieses hat nicht zum erfolg geführt. Hier die Html der index und die css…
Grüsse

[HTML]

Herzlich Willkommen

Logo

ansicht

KW-Mayerhof

Ihr Dienstleister

[/HTML]

Hier die CSS:
[HTML]
body {
margin: 0px;padding: 0px;
font-size: small;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

h1 { font-size:240%;
font-family: arial, verdana, sans-serif;
color:#696969;
font-style:italic;
text-align:center;
margin-top: 0px;
margin-left: 240px;
margin-right:240px;
background-color: #E5FFFF;
}

h2 { font-size:140%;
font-family: arial, verdana, sans-serif;
color:#696969;
font-style:italic;
text-align:center;
margin-top: 10px;
margin-left: 240px;
margin-right:240px;
background-color: #E5FFFF;
}

#navibereich {
padding: 2em 0em;/Innenabstand oben/unten linksrechts/

   border-top-width:0px;
   border-top-style:solid;
   border-bottom-width:0px;
   border-bottom-style:solid;
   border-left-width:0px;
   border-left-style:solid;
   border-right-width:0px;
   border-right-style:solid;
background-color: #E5FFFF;
text-align: left;
margin-top: 25px;
margin-bottom: 80px;
margin-right: 5px;  /*Rand aussen des Navigationsrahmens(rechts)*/
margin-left: 5px;    /*Rand aussen des Navigationsrahmens(links)*/

}

/* -------NUN DER WICHTIGE TEIL------------ */  

#navibereich li{

/* Innenabstand: oben/unten 4px, li/re 0 /
/
Keinen Außenabstand /
display: inline; /
Listenelemente nebeneinander /
list-style-type: none; /
Aufzählungszeichen entfernen */
}

#navibereich li {
float: left;
position: relative;
width: 11em;
padding-left: 0em;
padding-right: 0em;
}

#navibereich ul{
background-color: E4GGGG;
}

#navibereich li ul {
display: none;
position: absolute;
padding-left:0em;
padding-right:0em;
padding-top:20px;
padding-bottom:0px; /zweite Zahl gibt Abstad der Untermenüpunkte an/
border-left-width:0px;
border-left-style:solid;
border-left-color:black;
border-bottom-width:0px;
border-bottom-style:solid;
border-bottom-color:black;
border-right-width:0px;
border-right-style:solid;
border-right-color:black;
background-color: #E5FFFF;

}

#navibereich li:hover ul {
display: block;
background-color: #E5FFFF;

}

a:link {font-weight:bold; color: #3300CC; text-decoration:none; }
a:visited: {font-weight:bold; color: grey; text-decoration:none; }
a:focus: {font-weight:bold; color: red; text-decoration:none; }
a:hover {font-weight:bold; color: #003300; text-decoration:none; }
a:active {font-weight:bold; color: #4C4C66; text-decoration:none; }

g:focus { background-color:red; }

g:hover { background-color:silver; }

g:active { background-yellow:red; }

[/HTML]

Du müsstest nochmal genauer darlegen, an welchen Stellen es Abweichungen gibt (hab gerade nur den IE parat).
Eine mögliche Ursache könnte sein, dass die Browser für die einzelnen Elemente unterschiedliche Standardwerte für margin verwenden.
Die solltest du mal genrell auf „Null“ setzen und dann wieder individuell hinterlegen, siehe Unterschiedliche Abstände in verschiedenen Browsern

Ein weiteres Problem könnte deine prozentuale Schriftgröße für h darstellen. Auch hier verwenden die Browser unterschiedliche Ausgangsgrößen. Versuch’s ggf. mal mit einem Pixel/em-Wert und definiere im body als Basis 100%.

Das Problem liegt lediglich an den Untermenüs…die sind einfach viel zu weit rechts drin… Wenn ich die Universaleinstellung für margin verwende, kann ich allerdings nichts verbessern…

Ich kann auch nciht erkennen, was da jetzt richitg oder falsch sein soll.
Was aber auf jeden Fall falsch ist, sind die mehrfach vorkommenden Ids. Eine ID muss einmalig sein.

Kannst Du mir n beispiel nennen, navi02 existiert nämlich garnicht, kann ich denn die auch einfach weglassen? Könntest du zwei drei zeilen als beispiel schreiben…? Danke!

Was für ein Beispiel? Eine ID muss eindeutig sein, in deinem HTML Code ist eine id merhfach vorhanden. Du willst vermutlich eher eine Klasse verwenden, wobei in diesem Fall auch das überflüssig ist, du kannst in CSS auch selektieren.

z.b. ul#navibereich ul li a spricht einen link in einer Unterliste deiner Liste an.

vermutlich blamiere ich mich jetzt gerade aber ich weiss nicht genau was du meinst… kannst du es vielleicht anhand eines beispiels aus meinem code mir „bildlich“ erklären;-)
Danke für Dein Verständnis!

Das Beispiel ist aus deinem Code - ok, du musst natürlich auch eine konkrete CSS Eigenschaft in den Selektor einbauen, sonst siehst du nichts.

ul#navibereich ul li a {
font-weight:bold;
}