Css problem im ie6 (?)

Computer: Software & Programmierung HTML & CSS
#1

Hallo Zusammen,

ich habe ein css-menu erstellt. das wird auch einwandfrei in sämtlichen browsern dargestellt, nur im ie6 funktioniert das ganze überhaupt nicht. ich hab nun auch schon gegoogelt und das problem liegt anscheinend an diesem „float“ ausdruck. jedoch weiß ich nicht wie man das auf den ie6 anpasst. hat jemand eine idee?

hier der quelltext:

Titel
body
.pd_menu_01 {float:left; padding:0; margin:0;color: #400000;background: #E5E5E5;width:100%; border:none;clear:both;} /*Color navigation bar normal mode*/
.pd_menu_01 a, .pd_menu_01 a:visited {
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:bold;
font-size:12px;
color: #400000;
background-color: #E5E5E5;
text-decoration: none;
}
.pd_menu_01 ul {list-style-type:none;padding:0; margin:0;}
.pd_menu_01 ul li {float:left; position:relative; z-index:auto !important ; z-index:1000 ; border-right:none; border-left:none;}
.pd_menu_01 ul li a {color: #400000;background: #E5E5E5;float:none !important ; float:left ; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }
.pd_menu_01 ul li ul {display:none; border:none;color: #400000;background: #E5E5E5; width:1px}
.pd_menu_01 ul li:hover a {background-color:#C0C0C0; filter:alpha(opacity=85); -moz-opacity:0.85; opacity:0.85; text-decoration:none; color:#FFFFFF;} /*Color main cells hovering mode*/
.pd_menu_01 ul li:hover ul {display:block; position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}
.pd_menu_01 ul li:hover ul li a {display:block; width:140px; height:auto; text-align: left; line-height:1.3em; margin-left:0px; padding:5px 10px 5px 10px; border-left:none; border-bottom: solid 1px #FFFFFF; background-color:#C0C0C0; color:#400000;} /*Color subcells normal mode*/
.pd_menu_01 ul li:hover ul li a:hover {background-color:#C0C0C0; filter:alpha(opacity=100); -moz-opacity:100; opacity:100; text-decoration:none;color:#FFFFFF;} /*Color subcells hovering mode*/
.pd_menu_01 ul li a:hover {background-color:#C0C0C0; filter:alpha(opacity=100); -moz-opacity:100; opacity:100; text-decoration:none;color:#FFFFFF;} /*Color main cells hovering mode*/
.pd_menu_01 ul li a:hover ul {display:block; width:120px; position:absolute; z-index:999; top:29px; left:0; }
.pd_menu_01 ul li ul li a:visited { background-color:#C0C0C0; color:#400000;} /*Color subcells normal mode*/
.pd_menu_01 ul li a:hover ul li a {display:block; width:120px; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:none; border-bottom: solid 1px #FFFFFF; background-color:#C0C0C0; color:#400000;}
.pd_menu_01 ul li a:hover ul li a:hover {background-color:#C0C0C0; text-decoration:none;color:#FFFFFF;} /*Color subcells hovering mode*/

p.marginauto {
margin-left: 40px;
margin-right: 45px;
text-align: left;
}

blablabla …
.
.
.
.

Wäre super, wenn da jemand ne idee hätte. :smile:

#2

Kannst du nicht mal alles rausschmeißen, was i.O. ist.
Dann müssen wir nicht ewig suchen.
Und statt blablabla eine anzeigbare kleine Seite.

#3

Sorry, ich dachte das reicht schon :smile:

schaut euch die seite einfach mal an :
www.auto-baptist.de/Standorte.htm

Wie gesagt, das menu funzt prima, ausser im ie6. da macht es keinen zuggr :smile:

#4

Leicht OT: Und?
Auch wenn es viele noch nicht geblickt haben, aber der IE6 ist ein Auslaufmodell! Der hat keine wirkliche Ahnung von HTML/CSS/… Interpretation und hat ansich vermutlich mehr Löcher als ein paar Golfsocken!

Gerüchteweise soll nächste Woche der IE8 als Windowsupdate erscheinen. Irgendwann muss man den alten Schund begraben!

Ich halte mich da dann doch an
http://www.heise.de/newsticker/Webmaster-Aufstand-ge…
(letzter Absatz)

grüße
Geisterkarle

#5

hi
das Problem ist hierbei, daß der IE6 keine Hover-Eigenschaft versteht ausser bei Tags.
Da du dein Menü mittels listen und divs gemacht hat, is klar daß es im IE6 nicht geht.

Abhilfe hierfür schafft die sogenannte csshover.htc datei, die dafür sorgt, daß der IE diese Eigenschaft auch implementiert bekommt.

Auf der Seite whatever:hover findest du die Datei und auch eine Anleitung!
http://www.xs4all.nl/~peterned/csshover.html

lg
aya

#6

hallo aya,

vielen daaaaaaaaaaaaank. :smile:
hat geklappt :smile:))

lg
reb

#7

Gezieltes Hovern im IE6 mit jQuery oder Prototype
Hallo Aya!

das Problem ist hierbei, daß der IE6 keine Hover-Eigenschaft
versteht ausser bei Tags.

Auf der Seite whatever:hover findest du die Datei und auch
eine Anleitung!
http://www.xs4all.nl/~peterned/csshover.html

Davon würde ich abraten, inzwischen gibt es bessere Möglichkeiten, dem IE6 über JavaScript gezielt nur dort den Hover-Effekt beizubringen, wo man ihn auch benötigt, etwa bei LI-Elementen einer Navigation.

Wenn man, wie unter obigem Link beschrieben, sämtliche Elemente auch im IE6 hover-fähig macht wird er fürchterlich langsam, friert möglicherweise ein oder stürzt sogar ab.

Besser ist also ein gezieltes Hovern nur in den Elementen, in denen man es wirklich braucht. Mit einer Bibliothek wie etwa jQuery oder Prototype geht das auch ganz leicht:

http://docs.jquery.com/Events/hover
http://www.infiniteexpanse.net/2008/11/24/emulating-hover-with-prototype-and-lowpro

Gruß Gernot

#8

ja bitte!!!

freu mich schon auf das Script

#9

jQuery anstelle von HTC
Hallo Aya!

freu mich schon auf das Script

Ich habe das letzte Woche habe auch zum ersten Mal mit jQuery ausprobiert. Dabei kam Folgendes heraus:

Liest sich einfach so:
Weise, wenn du ein IE unterhalb Version 7 bist, sobald du den Dokumenten-Quellcode vollständig eingelesen hast, innerhalb des Elements mit der ID „Nav“ jedem LI-Element, das nicht von vornherein schon mit der CSS-Klasse „active“ versehen ist, folgendes Verhalten zu: Versieh es beim Event „MouseOver“ mit der Klasse „active“ und entziehe ihm diese Klasse beim Event „MouseOut“ wieder.

Die Klasse .active und die Pseudo-Klasse :hover machen dann das Gleiche z.B.:

#Nav li ul { display: none; }
#Nav li:hover ul, #Nav li.active ul { display: block; }

Auch bei der mangelnden Unterstützung von teiltransparenten Bildern im PNG-Format durch den IE 6 bin ich inzwischen davon abgekommen , dies dadurch auszubügeln, dass ich Alpha-Image-Loader über HTC-Dateien und ie-proprietäre CSS-Behaviors zuweise. Das geht stattdessen ebenfalls sehr elegant über jQuery:

http://allinthehead.com/retro/338/supersleight-jquer…

CSS-Behaviors und -Expressions, die im IE-8-Modus ohnehin nicht mehr unterstützt werden, gehen allzu stark auf Kosten der Rechnerleistung.

Gruß Gernot

#10

@MODS + Re: jQuery anstelle von HTC
hi gernot
–> http://web57.srv12.sysproserver.de/forum/Smileys/cla…

darf ich das einfach für mich auch benutzen???
Ist schon eine schlanke Lösung :wink:)
_________________________________________________________________
@Mods
das wär was für die FAQs

#11

Hallo nochmal!

Ich sehe gerade: Da fehlt natürlich noch je ein öffnendes und ein schließendes Skript-Tag:

;

jQuery einbinden (am besten in der jeweils neuesten komprimiertesten Form) muss man dazu natürlich auch und nutzen darf das jede®.

http://docs.jquery.com/Release:jQuery_1.3.2

Gruß Gernot