online 1
gast (50)

/ Forum / Webseiten/HTML

Webseiten/HTMLWebseiten/HTML

Fragevon dunkelpink vom 10.10.2021, 12:17 Options

Hovereffekt mit Untermenü im IE 6

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>


Antwort schreiben

Antwort 1 von gast42 vom 10.10.2021, 13:50 Options

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).

Antwort 2 von dunkelpink vom 12.10.2021, 07:40 Options

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?

Antwort 3 von son_quatsch vom 12.10.2021, 07:44 Options

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.

Antwort 4 von coros vom 12.10.2021, 08:52 Options

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
Da hier der einzige Lohn für die Helfer eine Rückmeldung ist, wäre es nett, wenn Du
ein Feedback abgeben könntest, ob der Lösungsvorschlag Dein Problem gelöst hat.

Antwort 5 von gast42 vom 12.10.2021, 17:30 Options

@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?)

Antwort 6 von coros vom 12.10.2021, 17:38 Options

Hallo gast24,

was verstehst Du unter

Zitat:
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
Da hier der einzige Lohn für die Helfer eine Rückmeldung ist, wäre es nett, wenn Du
ein Feedback abgeben könntest, ob der Lösungsvorschlag Dein Problem gelöst hat.

Antwort 7 von gast42 vom 12.10.2021, 17:42 Options

Zitat:
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.

Antwort 8 von Mich vom 13.10.2021, 00:11 Options

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%

Antwort 9 von dunkelpink vom 16.10.2021, 21:55 Options

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.

Antwort 10 von gast42 vom 17.10.2021, 10:17 Options

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

Antwort 11 von dunkelpink vom 19.10.2021, 21:12 Options

Hi gast42,

danke für die Info. Wird ein bisschen dauern, bis ich das mit den Doctypes gerafft habe - werde mich mal hineinvertiefen.

Noch eine letzte Frage: hast du noch einen guten Link für die Hoverlösung - ich weiß gar nicht genau, was ich da einfügen muss:
"Diese fehlerhafte Stellen sind vermutlich der Code, den du extra einfügen musstest für den IE6"

dunkelpink

Antwort 12 von gast42 vom 22.10.2021, 23:55 Options

das beste Tutorial gibts bei SelfHTML

Antwort 13 von dunkelpink vom 29.10.2021, 18:42 Options

Danke, ich glaube das ist wirklich ein gutes Tutorial, ich weiß gar nicht warum mir das noch nicht aufgefallen ist.

Antwort 14 von DeluxeStyle vom 29.10.2021, 19:10 Options

also ich achte bei meinen Seiten gar nicht mehr auf den IE 6.
Die Benutzer bekommen die Hinweis, dass sie einen veralteten Browser verwenden und die Seite evtl nicht korrekt dargestellt wird.

Es gab auch einen Aufruf "Webmaster against IE 6"

Antwort 15 von gast42 vom 29.10.2021, 20:56 Options

es sollte reichen, für Uralt-Browser das Stylesheet per @import einzubinden (dann kriegen die davon nix mit) und ansonsten gelegentlich zu schauen, ob die Browser, die mit @import etwas anfangen können, wenigstens ein passables Layout liefern.

Userbeschimpfungen wie in dem verlinkten heise.de-Artikel erachte ich als kontraproduktiv!

Ähnliche Themen

Untermenü / Klappmenü im Frontpage
geliwo  29.12.2008 - 73 Hits - 4 Antworten

Buttons mit Untermenü
terror_tubbie  01.04.2009 - 448 Hits - 3 Antworten

Homepage Erstellung
Rega  07.10.2009 - 403 Hits - 6 Antworten

Hinweis

Diese Frage ist schon etwas älter, Sie können daher nicht mehr auf sie antworten. Sollte Ihre Frage noch nicht gelöst sein, stellen Sie einfach eine neue Frage im Forum..

Neue Einträge

Version: supportware 1.9.150 / 10.06.2022, Startzeit:Thu Jan 8 21:07:44 2026