IE - Probleme mit Navigation

dmalex

Grünschnabel
Hallo zusammen,

ich habe folgendes Problem mit einer Navigation im IE.

Die Navigation ist schmaler als im Firefox, was die Navigation ziemlich zusammengestaucht aussehen lässt. Wenn ich dann noch das Untermenu (#submenu) benutz spielt die Darstellung im IE ganz verrückt.
Die Navigationspunkte unter dem Untermenu sind dann nach rechts verschoben.

Ich habe leider nicht allzu viel Ahnung von CSS und schon gar nicht wie der IE es interpretiert. Deswegen bitte ich um Hilfe die Navigation im IE genauso schön wie im Firefox aussehen zu lassen.

Schonmal jetzt vielen Dank!

zu sehen ist die Navigation hier: http://eks-maintal.de

und hier ist der Code der CSS Datei für die Navigation:

Code:
<!--

ul {
        list-style: none;
        margin: 0;
        padding: 0;
        }

/* =-=-=-=-=-=-=-[Menu Three]-=-=-=-=-=-=-=- */

#menu3 {        width: 160px;
        border: 1px solid #ccc;
        margin: 10px;
		list-style: none;
}

#menu3 li a {
        height: 32px;
        voice-family: "\"}\"";
        voice-family: inherit;
        height: 24px;
        text-decoration: none;
		font-size: 70%
        }

#menu3 li a:link, #menu3 li a:visited {
        color: #555555;
        display: block;
        background: url(images/menu3.jpg);
        padding: 8px 0 0 30px;
        }

#menu3 li a:hover, #menu3 li #current, #menu3 li a:active {
        color: #000000;
        background: url(images/menu3.jpg) 0 -32px;
        padding: 8px 0 0 30px;
        }
	
/*Untermenu Stil*/	
#submenu {        width: 160px;
        margin: 2px;
		list-style: none;
}

#submenu li a {
		font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
		color: 000000;
        text-decoration: none;
		font-size: 70%;
		padding: 5px 0 0 20px;
        }

#submenu li a:hover, #submenu li #subcurrent, #submenu li a:active {
        color: #4f62fa;
        padding: 5px 0 0 20px;
        }
-->
 
Hi,

du übergibst die Seite mit dem angegebenen Doctype nicht im standardkonformen Modus. Stattdessen laufen die Browser im "Quirksmode", und in diesem Darstellungsmodus interpretiert der IE das CSS-Boxmodell nicht korrekt bzw. überhaupt nicht, weshalb in ihm die Menüpunkte "flacher" ausfallen.

mfg Maik
 
Problem bleibt weiterhin!

Hi, danke erstmal für deine schnelle Antwort.

Leider bringt mich das nicht wirklich weiter.
Ich habe jetzt versucht den DOCTYPE wie folgt zu ändern:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

oder auch

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

Das erste hat gar keine Änderung gebracht
und mit der zweiten Variante wird so wie es aussieht meine 2. CSS Datei gar nicht mehr interpretiert und die Navigation ist im IE jetzt zwar nicht mehr so zusammen gestaucht, jedoch ist die Schriftgröße jetzt in beiden Browsern viel zu klein und das Problem mit der Verschiebung wenn ich das Submenu benutze bleibt auch.

Was sagt ihr zu den dann auftretenden Problemen?
 
Zuletzt bearbeitet:
Problem bleibt weiterhin!

Hi, danke erstmal für deine schnelle Antwort.

Leider bringt mich das nicht wirklich weiter.
Mit meiner Empfehlung bist du sehr wohl auf dem richtigen Weg, denn die gewünschte Höhe der Menüpunkte paßt bei mir schon mal im IE :-)

ie.jpg

Dafür hab ich diesen Doctype eingesetzt, wie ich ihn üblicherweise in "HTML 4.01" verwende:

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

Die Lücke, die der IE nun zwischen den Menüpunkten erzeugt, schliesst du mit folgendem CSS, das der IE-Familie mit Hilfe des "Conditional Comments" übergeben wird. Alle übrigen Browser interpretieren diese Syntax als HTML-Kommentar.

Code:
        <link rel="stylesheet" type="text/css" href="main1.css" />
        <link rel="stylesheet" type="text/css" href="nav.css">
        <!--[if IE]>
        <style type="text/css">
        #menu3 li { width:160px; float:left; }
        </style>
        <![endif]-->

Die zu klein ausgefallene Schrift dürfte dann unter die "Kosmetikarbeiten" fallen :-)

mfg Maik
 
Mit meiner Empfehlung bist du sehr wohl auf dem richtigen Weg, denn die gewünschte Höhe der Menüpunkte paßt bei mir schon mal im IE :-)

Sehr schön! Nochmal vielen Dank! Der Hack für den IE klappt auch super.

Die Navigation an sich sieht jetzt in beiden Browsern genau gleich aus.
Hab die Schriftgröße noch auf 100% gesetzt und damit wäre das Problem auch gelöst.

Jedoch bleibt ein Problem noch bestehen. Undzwar zieht die Schriftformatierung der 2. CSS Datei nicht mehr. Hast du da noch so einen tollen Tipp?


Ich würde dir gerne Pluspunkte oder so geben ist das irgendwie möglich?
 
Kannst du die vorgenommenen Änderungen mal online aktualisieren? Da ist nämlich noch alles im Ur-Zustand.

Pluspunkte sind immer gern gesehen :-)

Dazu klickst du einfach in der linken Beitragsspalte unten auf das Icon mit dem geteilten Smiley, um deine Bewertung abzugeben - vielen Dank :)

mfg Maik
 
Hast 100 Punkte mit 3 Sternchen von mir bekommen ;D

Hab die Änderungen mal hochgeladen,
kann das aber leider nicht auf die Mainpage machen weil die ist sozusagen produktiv ;)

Dann bekomm ich nen Kopf ab wenn da alles verschoben ist.

Also hier mal eine Testseite wo das Untermenu aufgeklappt ist:

EKS-Maintal
 
Du solltest dich beim geöffneten Submenü um ein valides Markup bemühen, denn das derzeitige entspricht in dieser Form nicht den Regeln (siehe hierzu die w3c-Validator-Fehlermeldungen)

In der Praxis wird diese Menüstruktur mit einer verschachtelten Liste ausgezeichnet - also:

HTML:
<ul>
    <li><a href="#">Toplink 1</a>
        <ul>
            <li><a href="#">Sublink 1.1</a></li>
            <li><a href="#">Sublink 1.2</a></li>
        </ul>
    </li><!-- Ende Toplink 1
</ul>

Außerdem muß ein ID-Bezeichner im HTML-Dokumentbaum eindeutig sein, darf darin also nicht mehrmal vergeben werden.

mfg Maik
 
Ich glaub du hast recht, ich sollte den Code schonmal ein bisschen W3C Valider machen. Aber für jetzt ist mit erstmal geholfen. Habe mit ein paar Korrekturen an der "main1.css" die Seite jetzt auch für den IE optimiert.

Vielen Dank nochmal Maik!
 
Zurück