5k Aufrufe
Gefragt in Webseiten HTML von dunkelpink Einsteiger_in (75 Punkte)
Hallo,
ich habe mich schon ganz vergoogelt und immer noch keine für mich gute und verstehbare Lösung gefunden:

Ich habe eine css-gestylte Navigation mit Hovereffekt, der folgendes auslöst::
1. Schrift- und Hintergrundfarbwechsel
2. bei drei Menüpunkten erscheint ein Untermenü.

Beides funktioniert im IE 6 nicht, hat es aber mal, und zwar nur mit css, ohne Java. Ich weiß nicht, ob mir da etwas abhanden gekommen ist (ich hatte beim Erstellen der Seite Hilfe im Bezug auf die Browserkompatibilität, die steht jetzt aber nicht mehr zur Verfügung).

Hat jemand eine Idee?

1000 Dank schon mal fürs Angucken!

#nav {
background-color: #004097;
width: 180px;
height: 403px;
margin-top: 0px;
position: relative;
}

#nav ul {
list-style: none;
margin: 10px 0px 0px 0px;
padding-top: 5px;
text-align: center;
padding-left: 0px;
}

#nav ul li {
margin-bottom: 8px;
background-color: #4268ff;
height: 30px;
width: 180px;
line-height: 28px;
position: relative;
}

* html #nav ul {
margin-left:-16px;
ma\rgin-left:0;
}

#nav img#logo {
margin-top: 0px;
}

#nav img {
border: 0px;
}

#nav ul li a {
display: block;
width: 180px;
height: 30px;
font-size: 13px;
font-weight: bold;
color: #fff;
text-decoration: none;
}

#nav a:hover,#nav a #aktiverpunkt {
color: #fff;
background-color: #e2001a;
}

*html #nav a, *html #nav a:visited {
background:#4268ff;
width: 180px;
w\idth:179px;
}

#nav a:active {
}

#nav a:visited {
}

#nav ul ul {
visibility: hidden;
position: absolute;
top: -20px;
left: 180px;
padding: 0px;
}

#nav ul li:hover ul, #nav ul a:hover ul {
visibility: visible;
}

#nav ul li ul {
background-color: #004097;
padding: 10px 10px 0px 10px;
}

#nav ul li ul li a {
background-color: #e2001a;
color: #fff;
}

<div id="nav"><img src="Bilder/Logo_ohne_schrift.jpg" alt="Logo" width="180" height="115" />
<ul>
<li><a href="wirueberuns.html" class="sub">Wir &uuml;ber uns<!--[if IE 7]><!--></a><!--><![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#" class="sub">Frauenh&auml;user<!--[if IE 7]><!--></a><!--><![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="geschichte.html">Geschichte</a></li>
<li><a href="wasisteinfrauenhaus.html">Was ist ein Frauenhaus</a></li>
<li><a href="wegeinsfrauenhaus.html">Wege ins Frauenhaus</a></li>
<li><a href="leben.html">Leben im Frauenhaus</a></li>
<li><a href="migrantinnen.html">Migrantinnen</a></li>
<li><a href="maedchenjungen.html">M&auml;dchen und Jungen</a></li>
<li><a href="checkliste.html">Checkliste</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#" class="sub">Gewalt gegen Frauen<!--[if IE 7]><!--></a><!--><![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="gewaltbegriff.html">Was ist Gewalt</a></li>
<li><a href="gesetz.html">Gewaltschutzgesetz</span></a></li>
<li><a href="umgangsrecht.html">Umgangsrecht</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#" class="sub">Wir bieten<!--[if IE 7]><!--></a><!--><![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="aktuelles.html">Aktuelles</a></li>
<li><a href="fortbildungen.html"><span style="font-size: 11px;">Fortbildungen Pr&auml;vention</span></a></li>
<li><a href="archiv.html">Archiv/Medien</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="links.html">Links</a></li>
<li><a href="kontakt.html">Kontakt / Impressum</a></li>
<li><a href="index.html">Home</a></li>
</ul>

</div>

15 Antworten

0 Punkte
Beantwortet von
Der Quellcode ist alles andere als valide (ul innerhalb a ist nicht zulässig).

Diese fehlerhafte Stellen sind vermutlich der Code, den du extra einfügen musstest für den IE6. Letzteren gibts allerdings kaum noch.

Ich schlage daher vor, die Fehler im HTML und CSS komplett zu beseitigen (moderne Browser kennen hover auch für andere Elemente als a).
Für die wenigen IE6-User konstruiere einfach einen Umweg, damit sie ohen Aufklappmenü auf die Unterseiten gelangen (wenn es Unterseiten sind ist sowieso nochmals ein entsprechender Hinweis auf der jeweils übergeordneten Seite sinnvoll).
0 Punkte
Beantwortet von dunkelpink Einsteiger_in (75 Punkte)
Hallo gast42,

danke für die Analyse, ich werde mich also erstmal an die Validität machen und dann noch ma gucken, was herauskommt.

Ich hatte immer die Info gefunden, dass der IE 6 leider noch von ziemlich vielen benutzt wird (u. a. bei uns auf der Arbeit - wie bei vielen Beratungsstellen, die finanziell nbicht so toll ausgestattet sind und sich erst einen neuen Compi kaufen, wenn der alte kapputt geht...) - wo bekommen ich denn da aktuelle Zahlen?
0 Punkte
Beantwortet von son_quatsch Experte (5.3k Punkte)
Du musst dir nur überlegen, wieviele Leute in der Lage sein sollen, deine Seite betrachten/benutzen zu können. Wenn du dich da auf nur einen Browser festlegst, hast du ganz schlechte Karten - denk allein an all die Leute, die nicht Windows benutzen.

Das MSIE6-Problem stimmt schon. Trotzdem kann dir nur jeder abraten, Code speziell für diesen Browser zu schreiben. Such dir lieber etwas einfachereres, was dafür in vielen (wenn nicht sogar allen) Browsern funktioniert.
0 Punkte
Beantwortet von coros Experte (4k Punkte)
Hallo dunkelpink,

wo Du genaue Zahlen für die Übersicht, welcher IE benutzt wird her bekommst, weiß ich leider nicht, aber nachfolgend mal eine Statistik meiner Homepage.

1 - 6.0 - 33,99%
2 - 8.0 - 33,57%
3 - 7.0 - 31,44%
4 - 5.01 - 0,64%
5 - 5.5 - 0,28%
6 - 5.0 - 0,07%

Wie Du siehst, sind es schon eine ganze Menge, die den IE 6.0 noch benutzen.
Bei Bedarf kann ich Dir auch noch die Statistiken der anderen Browser mal in einer Datei zusammenfügen.

Ich hoffe, Dir hilfts.

MfG,
Oliver
[sub]Da hier der einzige Lohn für die Helfer eine Rückmeldung ist, wäre es nett, wenn Du[/sub]
[sup] ein Feedback abgeben könntest, ob der Lösungsvorschlag Dein Problem gelöst hat.[/sup]
0 Punkte
Beantwortet von
@coros: sowas findest du natürlich im Internet - und auch gleich die Kritiken an solchen Statistiken (hauptsächlich: du kannst nur erfassen, was dir die User freiwillig als Info geben, nicht jeder liefert dir aber freiwillig zutreffende Infos - warum auch?)
0 Punkte
Beantwortet von coros Experte (4k Punkte)
Hallo gast24,

was verstehst Du unter

du kannst nur erfassen, was dir die User freiwillig als Info geben, nicht jeder liefert dir aber freiwillig zutreffende Infos


Bei mir muss kein User Informationen manuell geben, das geht automatisch. Diese Informationen werden aus dem Browser ausgelesen.

MfG,
Oliver
[sub]Da hier der einzige Lohn für die Helfer eine Rückmeldung ist, wäre es nett, wenn Du[/sub]
[sup] ein Feedback abgeben könntest, ob der Lösungsvorschlag Dein Problem gelöst hat.[/sup]
0 Punkte
Beantwortet von
Diese Informationen werden aus dem Browser ausgelesen.
nein, werden sie nicht (wäre ja noch schöner). Der Browser oder ein anderes anfragendes Programm liefert dir irgendeine Information über sich - die muss allerdings alles andere als zutreffend sein. Kann zB. einfach die Info des letzten Browsers sein, der über den gleichen Proxy kam. Oder irgendwelcher Unsinn, Opera gibt sich zB. gern wahlweise als IE6 oder Firefox aus.
0 Punkte
Beantwortet von mich-2 Einsteiger_in (21 Punkte)
Gast 42 hat natürlich recht.
Außerdem habe ich bei meiner Homepage (etwa 3000 Besuche täglich) ganz andere Browser-Zahlen:

MSIE insgesamt - 60.53%

MSIE 7.0 - 24.00%
MSIE 8.0 - 19.87%
MSIE 6.0 - 15.13%
MSIE andere - 1.53%

Firefox - 32.93%

Safari - 2.57%

Mozilla - 1.90%

Opera - 1.13%

Chrome - 0.67%

Netscape - 0.10%

[n.a.] - 0.10%

BlackBerry - 0.07%
0 Punkte
Beantwortet von dunkelpink Einsteiger_in (75 Punkte)
Hallo allerseits,

danke für all die Antworten und die Zahlen. Das ist ja noch ziemlich viel! Ein Jammer, dass Firefox sich nicht noch schneller verbreitet.

Ich möchte natürlich, dass die Seite in allen gängigen Browsern funktioniert, und für den IE6 hoffte ich auf den einen oder anderen guten Tips für Hacks/conditional commands, da kenne ich mich leider noch nicht so gut aus, jedenfalls habe ich für dieses Problem noch nix gefunden.

Mit "etwas einfachereres, was dafür in vielen (wenn nicht sogar allen) Browsern funktioniert" ist wahrscheinlich gemeint, auf Hovereffekte ganz zu verzichten? Und auf Divs? Denn die verschieben sich ja im IE auch gern. Gibts denn was ganz sicheres?

Oder wie macht ihr das?

Danke

P. S. Ich kreuze immer an, dass ich bei Antworten benachrichtigt werden will, das hat aber noch nie geklappt.
0 Punkte
Beantwortet von
du musst weder auf hover-Effekte verzichten noch auf divs.
Zu hover hatte ich schon in A1 was geschrieben.
Der IE macht hauptsächlich mit Abstandsangaben Fehler, wenn er im Quirksmodus ist. Sorge dafür, dass er das nicht ist. Lies dazu hier über den DOCTYPE-Switch
...