Menu - IE stellt anders dar als Firefox

Status
Nicht offen für weitere Antworten.
G

godfather_al

Mitglied
Guten Tag zusammen,

habe (leider mal wieder) ein CSS - Problem:

Bei einem Menu auf der linken Seite mit Unterpunkten erscheint im IE eine Lücke zwichen letztem Unterpunkt und dem folgenden Hauptpunkt, wenn man den Hauptpunkt (z.B. hier Zuordnungen) auswählt. Wie binge ich den IE dazu, dass lückenlos wie im Firefox auch darzustellen ?

Vielen Dank vorab für Eure Tips.

Alex


HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Schnittpunkte</title>
<style type="text/css"> @import url(layout.css);</style>
</head>

<body>
<basefont face="Verdana">
<div id="centerBox">
<div id="kopf"><h2>Schnittpunkte - Lernsoftware</h2></div>
<div id="navigation_links"><br/>
<ul>
<li><a href="index.html">Grundrechenarten </a></li>
<li><a href="index.html">Masseinheiten </a></li>
<li><a href="index.html">Bruchrechnen </a></li>
<li><a href="mathe_zuordnungen.html">Zuordnungen </a>
<ul class="unterpunkt">
<li><a href="mathe_zuordnungen_proportional.html">Proportional </a></li>
<li><a href="mathe_zuordnungen_proportional.html">Antiproportional </a></li>
<li><a href="mathe_zuordnungen_proportional.html">Gemischt </a></li>
<li><a href="mathe_zuordnungen_proportional.html">Klassenarbeiten </a></li>
</ul><li>
<li><a href="index.html">Prozentrechnung </a></li>
<li><a href="index.html">Zinsrechnung </a></li>
</ul>
</div>
<div id="navigation_oben">
<ul>
<li><a href="index.html">Verwaltung </a></li>
<li><a href="mathe.html">Mathe </a></li>
<li><a href="index.html">Deutsch </a></li>
<li><a href="index.html">Englisch </a></li>
<li><a href="index.html">Französisch </a></li>
<li><a href="index.html">Spanisch </a></li>
<li><a href="index.html">Latein </a></li>
</ul>
</div>
<div id="inhalt"><basefont face="Verdana"><h1><br/>Startseite - Mathe - Zuordnugen...</h1>
<p>Wählen Sie ein Arbeitsblatt aus ...</p>
</div>
</div>
</body>
</html>


CSS:

body, html, #navigation_links, #navigation_oben, #kopf, #inhalt, #centerbox {margin: 0; padding: 0;}

body {font: 100.01% font-family: cursive; margin: auto; background-color: white; text-align: center;}

#centerBox {
position: absolute;
left: 2.5%;
width: 95%;
top: 2.5%;
height: 100%;
border: 0px solid #000;
background-color: white;
}

#kopf {
position: absolute;
left: 0%;
width: 900px;
top: 0%;
height: 95px;
border: 1px solid #000;
background-image: url(nav.jpg);
background-repeat: no-repeat;
background-color: white;
text-align: left;
}

#navigation_links {
margin:0;
position: absolute;
left: 0%;
width: 150px;
top: 95px;
height: 1200px;
border: 1px solid #000;
background-color: white;
text-align: left;
}

#navigation_links .unterpunkt {
margin:0;
margin-top: 0px;
padding-left: 0px;
background-color: gray;
list-style: none;
}

#navigation_links .unterpunkt li{
margin:0;
margin-top: 0px;
padding-left: 0px;
background-color: gray;
border: none;
}

#navigation_links .unterpunkt a{
margin:0;
margin-top: 0px;
padding-left: 25px;
background-color: grey;
text-align: left;
margin-left: 15px;
}

#navigation_links ul {list-style-type: none; line-height: 1.0em; margin: 0; padding: 0; font-family: cursive; font-size: 0.9em; }

#navigation_links a:link, #navigation_links a:visited {text-decoration: none; color: black; background-color: gray; display: block; font-weight: bold; padding: 0px; padding-left: 15px; rgb(255, 255, 255); font-family: cursive; font-size: 0.9em;}

#navigation_links a:hover {color: gray; background-color: aqua; font-family: cursive;}


#navigation_oben {
position: absolute;
left: 150px;
width: 750px;
top: 70px;
height: 25px;
border-bottom: 1px solid #000;
background-color: white;
text-align: left;
}

#inhalt {
position: absolute;
left: 150px;
width: 750px;
top: 95px;
height: 1200px;
border: 1px solid #000;
background-color: white;
color: #806640;
text-align: left;
}

Habe es mal kurz hochgeladen, bitte erst oben auf Mathe und dann links auf Zuordnungen klicken:

http://www.wall-street-city.com/ls

Viele Grüße
Alex
 
Hi,

hier liegt kein CSS-Problem vor, sondern vielmehr ein syntaktischer Fehler im HTML-Code, da du in deinem geposteten Quellcode das Submenü nicht ordnungsgemäß mit dem </li>-Tag geschlossen hast:

Code: 
<ul>
<li><a href="index.html">Grundrechenarten </a></li>
<li><a href="index.html">Masseinheiten </a></li>
<li><a href="index.html">Bruchrechnen </a></li>
<li><a href="mathe_zuordnungen.html">Zuordnungen </a>
<ul class="unterpunkt">
<li><a href="mathe_zuordnungen_proportional.html">Proportional </a></li>
<li><a href="mathe_zuordnungen_proportional.html">Antiproportional </a></li>
<li><a href="mathe_zuordnungen_proportional.html">Gemischt </a></li>
<li><a href="mathe_zuordnungen_proportional.html">Klassenarbeiten </a></li>
</ul><li>
<li><a href="index.html">Prozentrechnung </a></li>
<li><a href="index.html">Zinsrechnung </a></li>
</ul>
Aber auch in der Online-Version ist das Markup der verschachtelten Liste nicht valide.

Aus:

Code: 
    <ul>
      <li><a href="mathe_grundrechenarten.html">Grundrechenarten </a></li>
      <li><a href="mathe_masseinheiten.html">Maßeinheiten </a></li>
      <li><a href="mathe_bruchrechnen.html">Bruchrechnen </a></li></ul>
      <ul class="aktiv"><li><a href="mathe_zuordnungen.html">Zuordnungen </a></ul>
        <ul class="unterpunkt">
        <li><a href="mathe_zuordnungen_proportional.html">Proportional </a></li>
        <li><a href="mathe_zuordnungen_proportional.html">Antiproportional </a></li>
        <li><a href="mathe_zuordnungen_gemischt.html">Gemischt </a></li>
        <li><a href="mathe_zuordnungen_proportional.html">Klassenarbeiten </a></li>
        </ul></li>
      <ul><li><a href="mathe_prozentrechnung.html">Prozentrechnung </a></li>
      <li><a href="mathe_zinsrechnung.html">Zinsrechnung </a></li>
      <li><a href="mathe_terme.html">Terme </a></li>
      <li><a href="mathe_gleichungen.html">Gleichungen </a></li>
      <li><a href="mathe_gleichungssysteme_2.html">Gleichungssysteme 2 </a></li>
      <li><a href="mathe_gleichungssysteme_3.html">Gleichungssysteme 3 </a></li>
      <li><a href="mathe_gleichungen_quad.html">quad. Gleichungen </a></li>
      <li><a href="mathe_gleichungen_exp.html">exp. Gleichungen </a></li>
      <li><a href="mathe_funktionen_lin.html">lin. Funktionen </a></li>
      <li><a href="mathe_funktionen_quad.html">quad. Funktionen </a></li>
      <li><a href="mathe_funktionen_exp.html">Exp.Funktionen </a></li>
      <li><a href="mathe_funktionen_wurzel.html">Wurzelfunktionen </a></li>
      <li><a href="mathe_dreiecke.html">Dreiecke </a></li>
      <li><a href="mathe_vierecke.html">Vierecke </a></li>
      <li><a href="mathe_kreis.html">Kreis </a></li>
      <li><a href="mathe_kreissegment.html">Kreissegment </a></li>
      <li><a href="mathe_kreisring.html">Kreisring </a></li>
      <li><a href="mathe_koerper.html">Körper </a></li>
      <li><a href="mathe_strahlensatz.html">Strahlensatz </a></li>
      <li><a href="mathe_stochastik.html">Stochastik </a></li>
    </ul>
wird:

Code: 
    <ul>
      <li><a href="mathe_grundrechenarten.html">Grundrechenarten </a></li>
      <li><a href="mathe_masseinheiten.html">Maßeinheiten </a></li>
      <li><a href="mathe_bruchrechnen.html">Bruchrechnen </a></li>
      <li class="aktiv"><a href="mathe_zuordnungen.html">Zuordnungen </a>
        <ul class="unterpunkt">
            <li><a href="mathe_zuordnungen_proportional.html">Proportional </a></li>
            <li><a href="mathe_zuordnungen_proportional.html">Antiproportional </a></li>
            <li><a href="mathe_zuordnungen_gemischt.html">Gemischt </a></li>
            <li><a href="mathe_zuordnungen_proportional.html">Klassenarbeiten </a></li>
        </ul>
      </li>
      <li><a href="mathe_prozentrechnung.html">Prozentrechnung </a></li>
      <li><a href="mathe_zinsrechnung.html">Zinsrechnung </a></li>
      <li><a href="mathe_terme.html">Terme </a></li>
      <li><a href="mathe_gleichungen.html">Gleichungen </a></li>
      <li><a href="mathe_gleichungssysteme_2.html">Gleichungssysteme 2 </a></li>
      <li><a href="mathe_gleichungssysteme_3.html">Gleichungssysteme 3 </a></li>
      <li><a href="mathe_gleichungen_quad.html">quad. Gleichungen </a></li>
      <li><a href="mathe_gleichungen_exp.html">exp. Gleichungen </a></li>
      <li><a href="mathe_funktionen_lin.html">lin. Funktionen </a></li>
      <li><a href="mathe_funktionen_quad.html">quad. Funktionen </a></li>
      <li><a href="mathe_funktionen_exp.html">Exp.Funktionen </a></li>
      <li><a href="mathe_funktionen_wurzel.html">Wurzelfunktionen </a></li>
      <li><a href="mathe_dreiecke.html">Dreiecke </a></li>
      <li><a href="mathe_vierecke.html">Vierecke </a></li>
      <li><a href="mathe_kreis.html">Kreis </a></li>
      <li><a href="mathe_kreissegment.html">Kreissegment </a></li>
      <li><a href="mathe_kreisring.html">Kreisring </a></li>
      <li><a href="mathe_koerper.html">Körper </a></li>
      <li><a href="mathe_strahlensatz.html">Strahlensatz </a></li>
      <li><a href="mathe_stochastik.html">Stochastik </a></li>
    </ul>
mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück