Style Problem mit DropDown Menü und IE - Funktionalität geht

[DsBrot]

Ich habe ein Menü auf Basis von suckerfish. Ich habe nur folgendes Problem. Ich möchte das Menü auf die ganze Breite meines äußeren DIVs haben um da ein BG-Bild zu hinterlegen. Technisch funktioniert es.

Im Firefox ist alles wunderbar im IE leider nicht ganz perfekt.
Siehe Anhang da die Page noch offline ist. Problem ist der Zweizeiler im IE.

Code der Page:

Code: Alles auswählen

<div id="navbg" style="text-align:right">TEST
      
      <ul id="nav">

         <li><a href="index.php" class="mainnav">Allgemeines</a>
            
            <ul>
               <div>
               <li><a href="index.php">Startseite</a></li>
               <li><a href="presse.php">Presse</a></li>
               <li><a href="register.php">Register</a></li>
               <li><a href="impressum.php">Impressum</a></li>
               </div>
            </ul>
            
         </li>

         <li><a href="turnier.php" class="mainnav">Turnier</a>   
               <ul>
                  <div>
                  <li><a href="bilder.php">Bilder</a></li>
                  <li><a href="bilder.php">Bilder</a></li>
                  <li><a href="videos.php">Videos</a></li>
                  <li><a href="alte_turniere.php">Alte Turniere</a></li>
                  </div>
               </ul>
         </li>

         <li><a href="training.php" class="mainnav">Sport</a>
            <ul>
               <div>
               <li><a href="training.php">Training</a></li>
               <li><a href="bilder.php">Bilder</a></li>
               <li><a href="videos.php">Videos</a></li>
               <li><a href="aboutus.php">&Uuml;ber uns</a></li>
               </div>
            </ul>
         </li>
         
         <li><a href="shop.php" class="mainnav">Shop</a>
            <ul>
               <div>
               <li><a href="shop.php">Artikel</a></li>
               <li><a href="warenkorb.php">Warenkorb</a></li>
               </div>
            </ul>
         </li>   

         <li><a href="guestbook2.php" class="onlymainnav">G&auml;stebuch</a>
         </li>      
         
         <li><a href="kontakt.php" class="onlymainnav">Kontakt</a>
         </li>            

      </ul>
      
   </div>

Anbei noch der CSS Ausschnitt:

Code: Alles auswählen

#navbg{
   background-image:url("grafik/menue_bg.jpg");
   line-height: 1.9;
   border: 2px solid #000000;
   border-right: 0;
   border-left: 0;
}

#nav{
   float:left;
   list-style: none;
   line-height: 1;
   padding: 2;
   margin: 0;
   
   background-color: transparent;
}

#nav div {
   padding: 5px;
   margin: 5px;
}

#nav ul {
   float: left;
   list-style: none;
   line-height: 1;
   background: #eaeaea;
   font-weight: bold;
   padding: 1;
   border: solid #eda;
   border-width: 1px 0;
   margin: 0 0 1em 0;
   

}

#nav a.mainnav {
   display: block;

      padding:5px 18px 5px 10px;
      background-color:transparent;
      color:#FFFFFF;
      font-family:Arial;
      font-size:12px;
      text-decoration:none;
      border-width:0px 0px 0px 1px;
      border-style:solid;
      border-color:#141414;
      
      background-image:url("grafik/white_arrow.gif");
      background-repeat: no-repeat;
      background-position: 94% 50%;   
}

#nav a.mainnav:hover {
   text-decoration: underline;
}

#nav a.onlymainnav {
   display: block;

      padding:5px 18px 5px 10px;
      background-color:transparent;
      color:#FFFFFF;
      font-family:Arial;
      font-size:12px;
      text-decoration:none;
      border-width:0px 0px 0px 1px;
      border-style:solid;
      border-color:#141414;
}

#nav a.onlymainnav:hover {
   text-decoration: underline;
}

#nav a {
   display: block;
   width: 10em;
   w\idth: 6em;

      padding:5px 20px 5px 8px;
      background-color:transparent;
      color:#000000;
      font-family:Arial;
      font-size:12px;
      text-decoration:none;
      border-width:0px 0px 0px 1px;
      border-style:solid;
      border-color:#141414;
      
      
}

#nav a.daddy {
   background: url(rightarrow2.gif) center right no-repeat;
}

#nav li {
   float: left;
   padding: 0;
   
}

#nav li ul {
   position: absolute;
   left: -999em;
   height: auto;
   width: 15.4em;
   w\idth: 14.9em;
   font-weight: normal;
   margin: 0;
   border: solid #777777 1px;
}

#nav li li {
   padding-right: 1em;
   width: 13em
}

#nav li ul a {
   width: 13em;
   w\idth: 9em;
}

#nav li ul ul {
   margin: -1.75em 0 0 14em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
   left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
   left: auto;
}

#nav li:hover, #nav li.sfhover {
   background: #acbcbe;
}


Freue mich über Hilfen oder auch konstruktive Kritik am Gesamtaufbau.

DANKE

Grüßer DsBrot

[Azra]

Wie sieht es mit dem Doctype aus?

Code: Alles auswählen

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


Für eine normale HTML Seite benutzen.

Wie sieht es mit dem clearen des Floats aus?
Wer float: left; benutzt muss auch mindestens clear: left; mit auf die Seite packen.

http://www.ohne-css.gehts-gar.net/0042.php

Ein Link zur Seite wäre sehr hilfreich.

[DsBrot]

Hy Azra,

das clearen des floats hatte ich im nächsten div gemacht. habe nur den doctype vergessen, dann hatte ich weniger probleme und konnte es noch fertig bekommen. Habe das Menü aber dennoch etwas sehr verändert.

Vielen Dank

Werde den Doctype nie wieder vergessen !!

Grüße Benny

- Topic closed -