Supportnet / Forum / Webseiten/HTML

Hallo, in meine Webseite habe ich folgendes Navigationsmenü eingebaut: http://de.selfhtml.org/css/layouts/anzeige/nav_modern.htm Nun habe ich das mal im neuen IE 7 ausprobiert und das ist sehr enttäuschend, das Menü klappt zwar auf, aber man kann die Untermenüs nicht mehr anwählen. Gruß

in dem CSS sind einige "Korrekturen für den IE" (Browser-Hacks), die evtl. vom IE7 einfach anders interpretiert werden.

Probier mal, die rauszunehmen.

Und für den IE6 musst du sie dann halt als Conditional Comments wieder reinsetzen.

Also liegts nicht am css? Anbei noch der HTML-Code: Außerdem weiß ich nicht was du mit Browser Hacks und Conditional Comments meinst.

<div class="stupidie">
<a class="auss1" target="_top" href="http://www.onlinehelp.awa2000.de/index.html"><span class="menutag">Onlinehilfe</span>
<table><tr><td>
<a class="inn" href="http://www.onlinehelp.awa2000.de/onlinehelp.htm#ErsteSchritte" target="Hauptframe" onclick="FrameAendern(´http://www.onlinehelp.awa2000.de/onlinehelp_navi.htm´, ´Navigationsframe´)">Erste Schritte</a>
<a class="inn" href="http://www.onlinehelp.awa2000.de/onlinehelp.htm#Objekte" target="Hauptframe" onclick="FrameAendern(´http://www.onlinehelp.awa2000.de/onlinehelp_navi.htm´, ´Navigationsframe´)">Objekte</a>
<a class="inn" href="http://www.onlinehelp.awa2000.de/onlinehelp.htm#Wartungen" target="Hauptframe" onclick="FrameAendern(´http://www.onlinehelp.awa2000.de/onlinehelp_navi.htm´, ´Navigationsframe´)">Wartungen</a>
<a class="inn" href="http://www.onlinehelp.awa2000.de/onlinehelp.htm#Wartungsauftrag" target="Hauptframe" onclick="FrameAendern(´http://www.onlinehelp.awa2000.de/onlinehelp_navi.htm´, ´Navigationsframe´)">Wartungsaufträge</a>
<a class="inn" href="http://www.onlinehelp.awa2000.de/onlinehelp.htm#Reparaturauftrag" target="Hauptframe" onclick="FrameAendern(´http://www.onlinehelp.awa2000.de/onlinehelp_navi.htm´, ´Navigationsframe´)">Reparaturaufträge</a>
<a class="inn" href="http://www.onlinehelp.awa2000.de/onlinehelp.htm#Objektwartungen" target="Hauptframe" onclick="FrameAendern(´http://www.onlinehelp.awa2000.de/onlinehelp_navi.htm´, ´Navigationsframe´)">Weitere Themen</a>
<a class="inn" href="http://www.faq.awa2000.de/faq.htm#Schulung" target="Hauptframe" onclick="FrameAendern(´http://www.onlinehelp.awa2000.de/onlinehelp_navi.htm´, ´Navigationsframe´)">Schulung</a>
</td></tr></table>
</a>

Natürlich liegts am CSS!

Browser-Hacks sind bewusste Fehler im CSS (die sind bei dir sogar per Kommentar extra hervorgehoben, schau mal rein), die hier den IE veranlassen, sich anders zu verhalten als andere Browser.

Conditional Comments sind eine andere (bessere) Methode um bestimmte CSS-Anweisungen nur für den IE sichtbar zu machen. Das sind Kommentare, die einem bestimmten Muster folgen, so dass der IE sie als Anweisung interpretiert, alle anderen Browser ignorieren sie aber). Vorteil: auf diese Weise kannst du sogar für bestimmte IE-Versionen verschiedene Anweisungen einbauen.

Ausführlich wird das bei SelfHTML - Browserweichen erklärt.

Bei mir zeigt es nichts rot, mit was schaust du denn die css-Datei an? Gibt es eigentlich einen CSS-Checker womit man die Datei auf Fehler prüfen kann?

#menue
{
display:none
}

.stupidie
{
display:block;
position:absolute;
top:10px;
left:10px;
z-index:200px;
}

a.auss1
{
border-bottom:1px solid #ffffff;
border-right:1px solid #ffffff;
float:left;
width:140px;
height:15px;
overflow:hidden;
display:block;
font-weight:400;
text-align:center;
text-decoration:none;
background-color:#800080;
color:#ffffff;
text-decoration:none
}

a:hover.auss1
{
overflow:visible;
background-color:#800080;
color:#ffffff;
}

a:hover.auss1 table
{
display:block;
margin-top:3px;
background-color:#800080;
color:#C0C0C0;
}

a.inn
{
display:block;
width:130px;
padding:2px;
font-size:100%;
font-weight:normal;
text-align:center;
text-decoration:none;
border-bottom:1px solid #ffffff;
background-color:#ffffff;
color:#808080;
}

a:visited.inn
{
background-color:#ffffff;
color:#808080;
}

a:hover.inn
{
position:relative;
background-color:#C0C0C0;
color:#ffffff;
}

span.menutag
{
display:block;
cursor:default;
}

Beim W3C gibts auch einen CSS-Validator.

Ich dachte du nutzt das CSS aus dem Link in der Frage? Wenn dem nicht so ist, weiß ich nicht worüber wir hier reden!

Als ich gemerkt habe, dass mein Navigationsmenü nicht mehr richtig funktioniert habe ich bei Selfhtml.org nach einer Alternative geschaut und den obigen Link --> http://de.selfhtml.org/css/layouts/anzeige/nav_modern.htm <-- gefunden und gesehen, dass hier der gleiche Fehler auftritt wie bei meiner Navigation. Ich dachte das es sich dabei um den gleichen Fehler handelt. Mein verwendetes CSS steht oben drin.

Soben wollte ich mit W3C Validator mein CSS prüfen, aber dann kam folgende Meldung:
Leider kann dieses Dokument nicht überprüft werden, da der Content-Type text/css war. Dieser Typ wird im Moment nicht von diesem Dienst unterstützt. Ich kann mit der Meldung leider nicht damit anfangen.

dafür gibts den W3C validatieservice voor CSS

ich wäre für einwenig unterstützung sehr dankbar

Hast du dein HTML validiert? Dein CSS?

Sicher nicht.
Im HTML steckt ein sehr sehr dicker Fehler. Du stopfst eine Tabelle in einen Link. In der Tabelle wiederum sind weitere Links.
Diese Verschachtelungen (sowohl Tabelle in Link als auch Link in Link) sind definitiv nicht zulässig.

Damit CSS sinnvoll funktioniert muss das HTML aber valide sein.

Im CSS wiederum hast du bei z-index die Einheit px, bei z-index gibts aber gar keine Einheiten.

Ich weiß jetzt nicht was die Fehlertoleranz der verschiedenen Browser aus sowas macht. Wenn es bisher funktionierte hast du nur Glück gehabt.

Der HTML-Code mit dem Link in der Frage, mit dem du mich erst einmal in die Irre geführt hast, ist im Gegensatz zu deinem valide!

• css und der IE - gelber Warnbalken
• "dropup"-menü für css
• CSS Menü im Vordergrund halten
• Direktformatiertes CSS "überschreiben"
• CSS Fehler beim IE 6