✔ CSSplay Menu, Darstellung in FF ok / IE Fehlerhaft

[Klon]

Ich habe schon mehrere Threads gefunden zur Positionierung in IE und FF, u.a. auch bei Quellen von CSSplay, komme jedoch mit meinem Problem nicht wirklich weiter.

Ich habe hier ein Menu von CSSplay das auf CSSplay sowohl im FF als auch im IE(7) wunderbar funktioniert, jedoch auf http://www.clinic-check.de/index_pre.html nicht mehr, die Positionierung im IE ist geschrottet.
Original: http://www.cssplay.co.uk/menus/opaque_dl.html

Ich habe auch schon sämtliche anderen Objekte (Header/Footer Container) entfernt, es bleibt dabei das im IE die Position nicht richtig ist.

W3C validiert CSS korekt, HTML bringt nur Fehler bzgl. inkorekter Tag-Schließung (> statt /> ... fix ich noch, daran kann es aber ja nicht liegen).

Vielen lieben Dank wenn sich das ohne das jemand viel Aufwand hat lösen liese.

Cordially,
Philipp

 

[Maik]

Hi,

vergleich mal deinen HTML-Code mit dem des Original-Menüs - bei dir fehlen darin sämtliche "Conditional Comments".

 

[Loomis]

<div id="showcase">

<div id="info">

#showcase und #info kann ich in deinem CSS nirgendwo finden?

@Maik Sind die nicht für IE6? Oder gelten die auch für IE7?

//Edit: Falls du dies meintest:

<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->

 

[Maik]

<div id="showcase">

<div id="info">

#showcase und #info kann ich in deinem CSS nirgendwo finden?

Dürfte völlig irrelevant sein, da deren Formatierung im Original-Stylesheet für das Menü auch nicht auftaucht, und somit keine Rolle für die Funktionalität spielt.

 

[Loomis]

		</div> <!-- end of search -->

		</div> <!-- end of header -->
<div id="showcase">

<div id="info">

<h2>A variable width drop-down definition list</h2>
<h3>18th December 2006</h3>

<ul id="menu">

<li><span>Demos</span>

//edit: Ok, ist wohl wirklich irrelevant weil:

#showcase {clear:both; width:1000px; background:#bc8f8f; height:auto; border:1px solid #aaa; border-width:1px 0;}
#info {background:#fff; width:750px; float:left;}

 

[Maik]

Mein Vorschlag, damit die Positionierung des Menüs in allen Browsern übereinstimmt:

#menu {list-style-type:none; margin:0 0 100px 0; padding:0; position:absolute; top:100px; z-index:100;}

Und entferne den folgenden Selektor aus dem Stylesheet:

* html #header {height:120px;}

 

[Klon]

Danke Maik, deine Zeile hat alles bereinigt, es funktioniert nun auch im IE ohne Probleme, Tausend Dank!