Probleme mit Drop-Down Menü in IE 7

Stacy230 · #1 (**permalink**) 06.12.2010, 13:18

Hallo Leute,
seit kurzer Zeit experimentiere ich mit CSS herum. Nun habe ich eine Navigationsleiste mit einem Drop-Down Menu erstellt.
Bei Firefox sieht das ganze auch ganz ok aus, nur der IE 7 macht mal wieder Probleme:

1) Die beiden Dropdown-Menupunkte (Seite3a, Seite3b) sind nach rechts unter den nächsten Menupunkt (Seite 4) verschoben und werden nicht wie im FF unter "Seite 3" angezeigt.

2) Bei den beiden Dropdown-Menupunkte (Seite3a, Seite3b) steht in der Ansicht beim IE 7 ein Listenpunkt vor dem Namen (Seite3a bzw. Seite3b), die im FF nicht angezeigt werden.

3) Die beiden Dropdown-Menupunkte haben leider nicht die gleiche Breite in der IE 7 - Ansicht.

Hier der Code:

Code:

    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>Drop-Down Menu</title>
    <style type="text/css">
      ul#menu{
       margin:2px;
       padding-left:0px;
       list-style-type:none;
       width:auto;
       position:relative;
       display:block;
       height:36px;
       font-size:17px;
        font-weight:inherit;
       background:transparent url(images/OFF.gif) repeat-x top left;
       font-family:Candara;
       border-bottom:2px solid #999999;
       border-top:1px solid #cccccc;
       }
    ul#menu li{
       display:block;
       float:left;
       margin:0;
       padding:0;
       }
    ul#menu li a{
       display:block;
       float:left;
       color:#900;
       text-decoration:none;
       font-weight:bold;
       padding:10px 12px 0 12px;
       height:24px;
       background:transparent url(images/DIVIDER.gif) no-repeat top right;
       }
    ul#menu li a:hover{
       background:transparent url(images/HOVER.gif) no-repeat top right;   
       }
    ul#menu li ul {
       display:none;
       position:absolute;
       float:none;
       top:34px;
       padding:0;
       margin:0;
       }         
    ul#menu li:hover ul {
        display:block;
       height:auto;
       }   
    ul#menu li ul li{
        float:none;
       display:block;
       font-size:17px;
        font-weight:inherit;
       background:transparent url(images/OFF.gif) repeat-x top left;
       font-family:Candara;
       border-bottom:2px solid #999999;
       border-top:1px solid #cccccc;
       }   
    ul#menu li ul li a{
        float:none;
       display:block;
       }

    </style>
    </head>
    <body>

    <ul id="menu">
        <li><a href="index.html" title="">Start</a></li>
         <li><a href="#" title="">Seite1</a></li>
        <li><a href="#" title="">Seite2</a></li>
       <li><a href="#" title="">Seite3</a>
       <ul>
        <li> <a href="#" title="">Seite3a</a> </li>
        <li> <a href="#" title="">Seite3b</a> </li>
        </ul>
        </li>
        <li><a href="#" title="">Seite4</a></li>
        <li><a href="#" title="">Seite5</a></li>
        <li><a href="#" title="">Seite6</a></li>
    </ul>

    </body>
    </html>

Ich hoffe, Ihr könnt mir hier etwas weiterhelfen. Ich wäre Euch sehr dankbar

Liebe Grüße
Stacy

heiko_rs · #2 (**permalink**) 06.12.2010, 13:29

Mit diesem Code hast Du alle IEs im Quirksmode, das solltest Du als erstes ändern - google "Doctype Switch".

Stacy230 · #3 (**permalink**) 06.12.2010, 18:37

Vielen Dank für deine Antwort.
Habe die Doctype-Deklaration hinzugefügt, hilft aber leider noch nicht weiter.

Hast du noch eine weitere Idee, woran das liegen kann?

heiko_rs · #4 (**permalink**) 06.12.2010, 18:40

Poste am besten einen Link, denn niemand bastelt hier gerne.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Drop down Menü bleibt aktiv nach zurück mit back button vom Firefox	gombi	CSS	0	18.01.2010 15:34
CSS Drop Down Menü	gachet	CSS	9	08.11.2009 18:36
CSS: Menü, IE 6 und Drop down Probleme	HaraldMenza	(X)HTML	14	09.10.2007 09:01
Fehler mit Drop Down Menü bei Überschreitung der Container Grenzen!	webfabrik	CSS	4	16.01.2007 01:29