Anpassung an IE

[glan]

Hallo,
ich habe ein Problem mit der CSS anpassung im IE.
Irgendwie will der IE die CSS-Definitionen "input[type=text],input[type=password]", "input[type=text]:hover".....
nicht interpretieren, woran könnts liegen?

MfG

[glan]

Ich sehe gerade, dass einen Thread unter mir jemand das gleiche Problem hat.

MfG

[wahsaga]

hi,

Ich sehe gerade, dass einen Thread unter mir jemand das gleiche Problem hat.

Und dort siehst du auch, dass dort wenigstens die betroffenen IE-Versionen in der Problembeschreibung angegeben wurden.

Der IE 6 kann weder mit dem Attributselektor umgehen, noch :hover auf etwas anderes als Links anwenden.
In wie weit sich das im IE 7 geändert hat, weiss ich nicht auswendig, sollte sich aber im www recherchieren lassen.

gruß,
wahsaga

[Gernot Back]

Hallo wahsaga,

Der IE 6 kann weder mit dem Attributselektor umgehen, noch :hover auf etwas anderes als Links anwenden.
In wie weit sich das im IE 7 geändert hat, weiss ich nicht auswendig, sollte sich aber im www recherchieren lassen.

Ja:

http://www.thestyleworks.de/quickref/selector-12.shtml
http://www.thestyleworks.de/ref/index_pc.shtml

Gruß Gernot

[mbr]

Hallo Gernot, hallo wahsaga,
passt jetzt vielleicht nicht ganz in den Thread, aber da ihr gerade über den IE(6) und Unterstützung von :hover redet:

Ich habe auf der Seite www.pro-idee.de ein Menü gesehen, das anscheinend über CSS realisiert wird und welches ich versucht habe nachzubauen. Wie gesagt: nachbauen, nicht 1:1 übernehmen. Jetzt habe ich genau das Problem: mein Menü funktioniert im IE7 und im FF, nur im IE6, den ich als standalone Version installiert habe, "funktioniert" es nicht. Das ursprüngliche Menü von pro-idee aber schon. Da sie dort auch mit li.ebene1:hover arbeiten würde mich interessieren, wie zum Teufel die das machen... Oder gibt es irgendwelche Ausnahmen, bei denen auch der IE6 die Pseudo-Klasse :hover in Elementen ausser a erkennt??

Liebe Grüße

mbr

P.S.: CSS Code:

  
li {  
  list-style:none;  
}  
  
div#navi ul ul {  
  position:absolute;  
  left:200px;  
  /*  
  top:0px;  
  */  
  margin-top:-20px;  
  display:none;  
}  
  
div#navi ul.ebene1 li.ebene1 ul.ebene2 li.ebene2:hover ul.ebene3 {  
  display:block;  
}  
  
div#navi ul.ebene1 li.ebene1:hover ul.ebene2 {  
  display:block;  
}  

HTML Code (nur kleiner, gekürzter Ausschnitt):

  
  <div id="navi">  
   <ul class="ebene1">  
       <li class="ebene1"><a href="index.php?cont=1">Homepage</a></li>  
       <li class="ebene1"><a href="">Für ihren Verkauf</a>  
         <ul class="ebene2">  
           <li class="ebene2"><a href="">Preislisten-Umschläge|</a></li>  
           <li class="ebene2"><a href="">Klarsichthüllen|</a></li>  
           <li class="ebene2"><a href="">Selbstklebehüllen|</a></li>  
           <li class="ebene2"><a href="">Katalogmappen aus Kunststoff oder Karton|</a></li>  
           <li class="ebene2"><a href="">Die Großen und die Kleinen|</a></li>  
           <li class="ebene2"><a href="">Zeitschriften Sammelmappen|</a></li>  
           <li class="ebene2"><a href="">Doppelschuber mit Ordner|</a></li>  
           <li class="ebene2"><a href="">Ordner mit Tiefziehteil|</a></li>  
           <li class="ebene2"><a href="">Registersätze eingehängt|</a></li>  
           <li class="ebene2"><a href="">Planungsmappen|</a></li>  
           <li class="ebene2"><a href="">Auftragsblock-Mappen|</a></li>  
           <li class="ebene2"><a href="">Magnet-Planungsmappen|</a></li>  
         </ul>  
       </li>  
       <li class="ebene1"><a href="">Für ihren Außendienst</a>  
         <ul class="ebene2">  
           <li class="ebene2"><a href="">Bonbons|</a></li>  
           <li class="ebene2"><a href="">Maßband / Zollstock|</a></li>  
           <li class="ebene2"><a href="">Büroklammern|</a></li>  
           <li class="ebene2"><a href="">Rechner|</a></li>  
           <li class="ebene2"><a href="">Schreibunterlagen für Schreibblöcke|</a></li>  
           <li class="ebene2"><a href="">Parkscheibe|</a></li>  
           <li class="ebene2"><a href="">Klemmbretter|</a></li>  
           <li class="ebene2"><a href="">Schablonen / Lineale|</a></li>  
           <li class="ebene2"><a href="">Rechenschieber|</a></li>  
           <li class="ebene2"><a href="">Wandkalender|</a></li>  
           <li class="ebene2"><a href="">Wandkarten|</a></li>  
           <li class="ebene2"><a href="">Warnwesten|</a></li>  
           <li class="ebene2"><a href="">Modell-LKWs|</a></li>  
           <li class="ebene2"><a href="">Luftballons|</a></li>  
           <li class="ebene2"><a href="">Flaschenöffner|</a></li>  
           <li class="ebene2"><a href="">Kalenderkarten|</a></li>  
           <li class="ebene2"><a href="">Kugelschreiber</a>  
             <ul class="ebene3">  
               <li class="ebene3"><a href="">Kugelschreiber|</a></li>  
               <li class="ebene3"><a href="">Kugelschreiber1|</a></li>  
             </ul></li>  
           <li class="ebene2"><a href="">Feuerzeuge</a>  
             <ul class="ebene3">  
               <li class="ebene3"><a href="">Feuerzeuge|</a></li>  
               <li class="ebene3"><a href="">Feuerzeuge1|</a></li>  
             </ul></li>  
           <li class="ebene2"><a href="">Tassen</a>  
             <ul class="ebene3">  
               <li class="ebene3"><a href="">Tassen|</a></li>  
               <li class="ebene3"><a href="">Tassen1|</a></li>  
             </ul></li>  
           <li class="ebene2"><a href="">Mousepads</a>  
             <ul class="ebene3">  
               <li class="ebene3"><a href="">Mousepads|</a></li>  
               <li class="ebene3"><a href="">Mousepads1|</a></li>  
             </ul></li>  
           <li class="ebene2"><a href="">Notizwürfel</a>  
             <ul class="ebene3">  
               <li class="ebene3"><a href="">Haftnotizblöcke|</a></li>  
               <li class="ebene3"><a href="">Haftnotizblöcke1|</a></li>  
             </ul></li>  
         </ul>  
       </li>  
       <li class="ebene1"><a href="">Für ihre Aktionswerbung</a>  
         <ul class="ebene2">  
           <li class="ebene2"><a href="">Angebotshefter|</a></li>  
           <li class="ebene2"><a href="">Promo - Mappe aus PP-Welle|</a></li>  
           <li class="ebene2"><a href="">Klarsichtumschläge|</a></li>  
           <li class="ebene2"><a href="">flexible PP-Mappen|</a></li>  
           <li class="ebene2"><a href="">Spezielles|</a></li>  
           <li class="ebene2"><a href="">Grußkarten - Ideen|</a></li>  
           <li class="ebene2"><a href="">Klemmschienen|</a></li>  
           <li class="ebene2"><a href="">Bonbons|</a></li>  
           <li class="ebene2"><a href="">Luftballons|</a></li>  
           <li class="ebene2"><a href="">Kalenderkarten|</a></li>  
           <li class="ebene2"><a href="">Parkscheiben|</a></li>  
           <li class="ebene2"><a href="">Kugelschreiber</a>  
             <ul class="ebene3">  
               <li class="ebene3"><a href="">Kugelschreiber|</a></li>  
               <li class="ebene3"><a href="">Kugelschreiber1|</a></li>  
             </ul></li>  
         </ul>  
       </li>  
     </ul>   </div>  

[wahsaga]

hi,

Ich habe auf der Seite www.pro-idee.de ein Menü gesehen, das anscheinend über CSS realisiert wird und welches ich versucht habe nachzubauen. Wie gesagt: nachbauen, nicht 1:1 übernehmen. Jetzt habe ich genau das Problem: mein Menü funktioniert im IE7 und im FF, nur im IE6, den ich als standalone Version installiert habe, "funktioniert" es nicht. Das ursprüngliche Menü von pro-idee aber schon. Da sie dort auch mit li.ebene1:hover arbeiten würde mich interessieren, wie zum Teufel die das machen...

Die arbeiten mit sog. Behaviours - ein Technik von Microsoft, um CSS und Javascript miteinander zu "verknüpfen".

In http://www.proidee.de/libs/00_xx_elemente.css findest du

body{
    margin:0;
    _text-align:center;
    behavior:url(/libs/00_xx_csshover.htc);
} /* WinIE behavior call */

und im darüber "nachgeladenen" und ausgeführten http://www.proidee.de/libs/00_xx_csshover.htc steckt dann Javascript-Code, der dynamisch onmouseout und onmouseover-Handler (u.a.) an die Elemente der Seite bindet, die dann :hover emulieren.

gruß,
wahsaga

[mbr]

Hallo wahsaga,
cool! Vielen Dank für deine superschnelle und kompetente Antwort. Jetzt hab ich erstmal wieder Stoff zum Lesen (und Ausprobieren) am Wochenende.

liebe Grüße mbr

P.S.: hab ich ganz vergessen: ich wünsche dir ein frohes neues (Jahr) - auch wenn es schon etwas spät ist...