Darstellung IE funzt nicht gegenüber Firefox

[kraut29]

Hi, hab ein riesen Problem, ich habe eine webasierte Datenbank entwickelt. Den Menüaufbau hab ich mit CSS verwirklicht, leider klappt der Aufbau nur beim Firefox perfekt und beim IE nicht. Hoffe ich könnt mir helfen...

Der CSS-Code:

#menu { width: 100%; background: #5E68AF; float: none;  }

#menu ul { list-style: none; margin: 0; padding: 0; width: 150px; float: left; }

#menu a, #menu h2
  { font: bold 11px/16px arial, helvetica, sans-serif;
  display: block; border-width: 1px; border-style: solid;
  border-color: #ccc #888 #555 #bbb;
  margin: 0; padding: 2px 3px;}

#menu h2 { color: #FFFFFF; background: #000000 text-transform: uppercase; text-align:center; }

#menu a {  color:#FFFFFF ; background:#000000 ; text-decoration: none; }

#menu a:hover { color: #000000; background: #FFFFFF; }

#menu li {position: relative; }

#menu ul ul { position: absolute; z-index: 500;  background: #000000; text-align:left; }

#menu ul ul ul { position: absolute; top: 0; left: 100%; text-align:left;}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
  {display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
  {display: block;}



#menu1 { width: 100%; background: #5E68AF; float: none; }

#menu1 ul { list-style: none; margin: 0; padding: 0; width: 150px; float: left; text-align:center;  }



#menu1 h2 { font: bold 11px/16px arial, helvetica, sans-serif;
  border-width: 1px; border-style: solid;
  border-color: #ccc #888 #555 #bbb;
  margin: 0; padding: 2px 3px; color: #FFFFFF; background: #5E68AF text-transform: uppercase; }

#menu1 a { font: bold 11px/16px arial, helvetica, sans-serif;
   border-width: 1px; border-style: solid;
   border-color: #5E68AF;
   margin: 0; padding: 2px 3px;
   color:#FFFFFF ; background:#5E68AF ; text-decoration: none; }

#menu1 a:hover { color: #000000; background: #FFFFFF; }






#menu2 { width: 100%; background: #5E68AF; float: none; }

#menu2 ul { list-style: none; margin: ; padding: 10; width: 170px; float: left; text-align:center;  }



#menu2 h2 { font: bold 18px/20px arial, helvetica, sans-serif;
  border-width: 1px; border-style: solid;
  border-color: #ccc #888 #555 #bbb;
  margin: 0; padding: 5px 7px; color: #FFFFFF; background: #5E68AF text-transform: uppercase; }

#menu2 a { font: bold 18px/20px arial, helvetica, sans-serif;
   border-width: 1px; border-style: solid;
   border-color: #5E68AF;
   margin: 0; padding: 3px 5px;
   color:#FFFFFF ; background:#5E68AF ; text-decoration: none; }

#menu2 a:hover { color: #000000; background: #FFFFFF; }

und ein Auszug aus der HTML-Seite

<div id="menu">
<ul>
<li><h2>Protokolle</h2>
 <ul><li><a href="../Ziehprotokoll/ZP_Start.php">Zieh-Protokoll</a></li>
     <li><a>ITW-Protokoll</a>
     <ul><li><a href="../ITW_Protokoll/VP_Start_RA.php">Ringanfang</a></li>
         <li><a href="../ITW_Protokoll/VP_Start_RE.php">Ringende</a></li>
 </ul>
 </li>
 </ul>
 </li>
</ul>
<ul>
<li><h2>Zeiterfassung</h2>
 <ul><li><a href="../Abfragen/zeit_ziehen.php">Zeiterfassung ZM</a></li>
     <li><a href="../Abfragen/zeit_itw.php">Zeiterfassung ITW</a></li>
 </ul>
 </li>
</ul>
<ul>
<li><h2>Abfragen</h2> <ul>
    <li><a href="../Abfragen/C_R_Uebersicht.php">Charge-Ring-&Uuml;bersicht</a></li>
    <li><a href="../Abfragen/Start_ZM_Uebersicht.php">ZM_Uebersicht</a></li>
    <li><a href="../Abfragen/ITW_Uebersicht.php">ITW-&Uuml;bersicht</a></li>
    <li><a href="../Abfragen/Chargenr.php">Chargenr&uuml;ckverfolgung</a></li>
    <li><a href="../Abfragen/Schrott_Start.php">Schrottzahlen</a></li>
    <li><a href="../Abfragen/Start_Stops_Charge.php">Stops je Charge</a></li>
    <li><a href="../Abfragen/Start_Abmessung.php">Stops je Abmessung und Charge</a></li>
    <li><a href="../Abfragen/Start_Stops_Lieferant.php">Stops je Lieferant</a></li>
    <li><a href="../Abfragen/GEFF_ITW.php">GEFF-ITW</a></li>
    <li><a href="../Abfragen/GEFF_Ziehen.php">GEFF-Ziehen</a></li>
 </ul>
 </li>
</ul>
<ul>
<li><h2>Admin</h2><ul>
    <li><a href="../Admin/Kunden.php">Kunden&uuml;bersicht</a></li>
    <li><a href="../Admin/Lieferant.php">Lieferanten&uuml;bersicht</a></li>
    <li><a href="../Admin/ZM.php">ZM-&Uuml;bersicht</a></li>
    <li><a href="../Admin/ITW.php">ITW-&Uuml;bersicht</a></li>
    <li><a href="../Admin/ITW_Art.php">ITW-Art-&Uuml;bersicht</a></li>
    <li><a href="../Admin/fertigungsklasse.php">FK-&Uuml;bersicht</a></li>
    <li><a href="../Admin/Geff_Vorgabe_Ziehen.php">GEFF-Vorgabe-Ziehanlage</a></li>
    <li><a href="../Admin/Geff_Vorgabe_ITW.php">GEFF-Vorgabe-ITW</a></li>
    <li><a href="../Admin/Benutzerverwaltung.php">Benutzerverwaltung</a></li>
 </ul>
 </li>
</ul>

 </li>
</ul>
</div>

Hier als Bilder:
http://bilder-hoster.de/show.php/13157_IE.JPG.html

http://bilder-hoster.de/show.php/13158_Firefox.JPG.html

 

[Haeger23]

Halli Hallo,

hab jetzt nur mal schnell drüber geschaut, aber vielleicht hilft es ja.
Du verwendest die Pseudoklasse :hover bei einem li - Element, der IE kann das aber erst seit der Version 7 interpretieren.

Linktipp: http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm

Grüße der
Haeger

 

[kraut29]

Und wie kann ich das umgehen, hab das Script von www.drweb.de und dann nur umgebaut, hab da echt nicht viel Plan von CSS. Danke Dir

 

[Soophie]

setze den link auf display:block und passe mit hilfe von padding die größe des Links an, dann gebe ihm die hover Eigenschaft.

Wenn das nicht funktioniert, kommst du um javascript wohl nicht drum rum