IE zeigt UL-LI nicht korrekt an

[joobie]

Hallo zusammen,

ich habe ein kleines Problem mit einem horizontalen Dropdown-Menü auf einer WordPress-Seite. Alle Browser außer Internet Explorer zeigen die Seite richtig an.

In der header.php werden drei verschiedene Elemente per PHP in ein UL-Element eingelesen. Die Seite läuft auf WordPress mit dem Plugin e-Commerce von Instinct Entertainment.

Das ist aus der header.php:

<ul id="nav" class="clearfloat">
<li><a href="<?php echo get_option('home'); ?>/" class="on">Home</a></li>
<?php show_cats_brands(); ?> <!-- ruft die Kategorien des Plugins auf (NICHT die WP-Kategorien!) -->
<?php wp_list_pages('title_li='); ?> <!-- ruft die WP-Pages auf -->
<?php echo nzshpcrt_shopping_basket(); ?> <!-- ruft den Warenkorb des Plugins auf -->
</ul>

Das ist das div NAV:

nav, #nav ul {
	list-style: none;
	line-height: 1;
	}

#nav li {
	float: left;
	list-style:none;
	border-right:1px solid #F3E2C2;
	}

Das ist die clearfloat-Klasse:

.clearfloat:after {
	display:block;
	visibility:hidden;
	clear:both;
	height:0;
	content:".";
	}

.clearfloat {
	display:inline-block
	}

.clearfloat {
	display:block
	}

...und das ist die ON-Klasse:

#nav a:hover, #nav a:active, .current_page_item	a, #home .on {
         color:#42411A;
	text-decoration:none
	}

Die Menüleiste funktioniert einwandfrei in Firefox (und Opera, und Safari, und und...), jedoch der Internet Explorer (v5.5 bis v7) zeigt die Kategorien des Plugins (php show_cats_brands) als Subkategorie des Home-Links an, und nicht daneben gelistet. Zudem werden alle Subkategorien auf einmal übereinander aufgeklappt, sobalt man über "Home" hovert. Das macht die Seite unbenutzbar.

Ich habe mit LI-tags experimentiert, jedoch bringt das nichts.
Setzt man hinter dem Home-Button ein BR-tag, so wird die Zeile erwartungsgemäß umgebrochen und die Kategorien werden auch rightig aufgelistet - nur eben eine Zeile tiefer!

Es muss also an der UL-LI-Struktur liegen, und dass der Internet Explorer diese anders interpretiert. Kann mir da jemand helfen?

 

[Maik]

Hi,

kannst du mal die vollständige HTML-Ausgabe des Dropdown-Menüs zeigen, oder einen Link zu der Seite nennen, denn mit dem Code-Schnipsel erzeuge ich im IE die gleiche Darstellung, wie in den anderen Browsern.

 

[joobie]

Hi,

klar, hier ist der Link: Testsite

Die Screenshots im Anhang zeigen die Darstellung in Firefox und Internet Explorer.

Danke im Voraus

 

[Maik]

Hi,

wenn ich das Markup validiere, zeigt der IE bei mir das Menü richtig an, denn das div-Element ist kein Nachfolgeelement des ul-Elements.

Siehe hierzu auch http://validator.w3.org/check?uri=h...ct+automatically)&doctype=Inline&ss=1&group=0

 

[joobie]

Ok, vielen Dank, das mache ich und sage Bescheid ob ich's hingekriegt habe

 

[joobie]

Hi,

ich habe die Seite nun validiert. Danke nochmal für den Tipp, das Menü funktioniert nun auch im IE!

Es sind nur noch ein paar Kleinigkeiten übrig geblieben:

1. Im Internet Explorer 6 liegt das Dropdown-Menü unter den Formfeldern auf der Seite. Im FF funktioniert jedoch einwandfrei.
Das sieht man z.B. auf dieser Seite, oder indem man von der Homepage auf eine beliebige Kategorie klickt und dann über das Menü fährt.

2. Der Warenkorb-Button ("+") muss in der gleichen Zeile wie das Menü floaten, rechts neben den Kategorien. Der AJAX-Warenkorb soll sich aber nicht unter dem Button, sondern linksbündig unter dem Menü öffnen und den darunterliegenden Inhalt nach unten verschieben. Ich habe dazu folgendes Schema probiert:

<div id="menu" class="clearfloat">
  
  <div id="menuelement">
             <ul id="nav" class="clearfloat">
                  <!-- Menü -->
             </ul>
  </div>
                  <!-- Warenkorb; wird per PHP gecallt und sieht so aus: -->
   <div id="sideshoppingcart">
           <div id="shoppingcartcontents">
                  <strong class="cart_title"><!-- Der Cart-Button --></strong>
                  <div id="sliding_cart"><!-- Der auf- und zufahrende Warenkorb -->
                  </div>
           </div>
   </div>
</div>

...mit diesem CSS:

#menu {
 position:relative;
 width: 880px;
}

#menuelement {
 float:left;
 position: relative;
}

div#sideshoppingcart div{
 height: 100%;
 width: 90%;
 text-align: left;
 padding: 6px;
 position: absolute;
 top:0px;
 left: 0px;
}

div#shoppingcartcontents{
 display: block;
 }

div#shoppingcartcontents .cart_title{      
  line-height: 1.3em;
  color: #F5F5F4;
  padding: 6px 12px;
  float: right;
 }

div#sliding_cart{                    
 margin: 0 0 0 -1px;
 padding: 0px;
 position: absolute;
 top: 58px;
 left: 0px;
}

/* Float Properties*/

.clearfloat:after {
	display:block;
	visibility:hidden;
	clear:both;
	height:0;
	content:".";
	}

.clearfloat {
	display:inline-block
	}

.clearfloat {
	display:block
	}

Leider hat das nicht ganz geklappt, da dadurch die Menü-Links nicht mehr funktionierten. Ich nehme an, wegen dem darüberliegenden DIV. Auch verschob sich der darunterliegende Inhalt nicht komplett; irgendwie hat das #menu nicht die volle Höhe des #sideshoppingcart übernommen.

Also habe ich das wieder verworfen. Auf der Seite ist also nun die validierte, funktionierende Version mit dem Warenkorb-Button links unter der Menüleiste.

Vielleicht gibt es ja einen anderen Weg das zu machen?

 

[Maik]

Im Internet Explorer 6 liegt das Dropdown-Menü unter den Formfeldern auf der Seite. Im FF funktioniert jedoch einwandfrei.

Das ist ein altbekanntes Problem, dass im IE6 Formular-Auswahllisten div-Elemente überlagern:

• Selectboxen udn IE 6
• Internet Explorer List Box über Layer