Layout Problem Internet Explorer (Liststyle: Horizontal)

[Fabian Frank]

Hallo Liebe Gemeinschaft,

habe ein problem mit dem Internet Explorer.
Und zwar habe ich ein Design gebastelt, das als Liste funktioniert, die jedoch nicht vertical sondern horizontal angezeigt wird.

Wie immer, Firefox alles bestens. nur beim IE gibts natürlich Probleme, da dieser diese Liste nicht horizontal sondern vertical anzeigt.

CSS-Code:

#menu { width: 100%; background: #0072bc; float: left; }

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

#menu a, #menu h2
  { font: 11px/16px verdana;
  display: block;
  margin: 0; padding: 0px;}

#menu h2 { color: #ffffff; background: #0072bc;}

#menu a { color: #ffffff; background-image: url(img/back_menu.png); text-decoration: none; padding-bottom: 5px; padding-top: 4px; padding-left: 6px; padding-right: 6px;}

#menu a:hover {background-image: url(img/menu_hover.png); padding-bottom: 5px; padding-top: 4px;}

#menu li {position: relative;}

#menu ul ul { position: absolute; z-index: 500; width: 120px;}

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

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;}

Im header der HTML-Datei habe ich die Conditional Comments verwendet:

 <!--[if IE]>
<style type="text/css" media="screen">
#menu ul li {float: left; width: 100%;}
</style>
<![endif]-->

<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {behavior: url(csshover.htc); font-size: 100%;}
#menu ul li a {height: 1%;}
}
</style>
<![endif]-->

Das HTMl-Menügerüst:

<div id="navigation"> <div id="menu"><ul><li><h2><a href="main.php" class="menu">Blackboard</a></h2></li></ul> <ul>
<li><h2><a href="wachplan.php" class="menu">Wachplan</a></h2><ul><li><a href="wachplan.php">Anzeigen</a></li><li><a href="entry_wp.php">Eintragen</a></li><li><a href="exit_wp.php">Austragen</a></li></ul></li></ul>
 <ul>
<li><h2><a href="einstellungen.php" class="menu">Einstellungen</a></h2><ul><li><a href="edit_usr.php">Benutzerdaten ändern</a></li></ul></li></ul>
 <ul>
<li><h2><a href="wachmannschaft.php" class="menu">Wachmannschaft</a></h2></li></ul>
 <ul>
<li><h2><a href="downloads.php" class="menu">Downloads</a></h2></li></ul>
<ul>
<li><h2><a href="administration.php" class="menu">Administration</a></h2><ul><li><a href="new_acc.php">Neuer Account</a></li><li><a href="edit_usrd.php">Benutzer ändern</a></li><li><a href="upload_data.php">Datei Hochladen</a></li><li><a href="edit_wp.php">Wachplan bearbeiten</a></li><li><a href="logdatei.txt" target="_blank">Log-Datei</a></li></ul></li></ul>
 <ul>
</div></div>

Das soll ja dem IE ermöglich, das Design wie gewünscht anzeigen zu lassen, nur tut es das nicht.

Kann mir bitte jemand von euch weiterhelfen?

VIelen Dank,
Fabian F.

PS: Die csshover.htc findet ihr, falls benötigt hier: http://web31.bces-2090.de/downloads/csshover.htc

 

[Maik]

Hi,

ich weiss nicht, wo bei dir das Problem liegt, denn bei mir ordnet der IE (6 + 7) mit den Quellcode-Angaben die Listenelemente horizontal an.

 

[Fabian Frank]

Hi,

ich weiss nicht, wo bei dir das Problem liegt, denn bei mir ordnet der IE (6 + 7) mit den Quellcode-Angaben die Listenelemente horizontal an.

Ja das Problem ist der ältere IE. Bei dem wird alles vertikal angezeigt.
Eigentlich könnte es mich ja nicht kümmern, nur dann wieder das nächste Problem, dass dieses Portal für eine Menge an Benutzer entwickelt wurde, die das rein aus Zweckgründen nutzen, uralte Kisten daheim haben. Die will ich dann davon nicht ausschließen...

Gibt es da keine Lösung in CSS?

Ich mein zur Not könnte ich beim ja auch abfragen, welche version verwendet wird. Und je nachdem wird dann eine Site aufgerufen, die ganz und gar aus reinen HTMl-Links besteht, bei denen die Farbe nur verändert wurde usw.

Das Dropdown menü ist halt ganz praktisch, aber ich seh da keinen ausweg...

 

[Maik]

Hi,

Ja das Problem ist der ältere IE. Bei dem wird alles vertikal angezeigt.

ich hab mir das eben im IE5.01 & IE5.5 (WinXP Prof.) angeschaut, aber auch diese Versionen richten bei mir die Listenelemente nebeneinander aus.

Möglicherweise hilft dir da auch Stu Nicholls' CSS-Dropdown-Menu http://www.cssplay.co.uk/menus/final_drop.html weiter?