Problem bei CSS Hover Tutorial

Status
Nicht offen für weitere Antworten.
Kahmoon

Kahmoon

Erfahrenes Mitglied
Guten Tag beisammen,

ich versuche grad ein Tutorial von CSS Play zu verstehen. Ich will durch Hover Klassen Elemente sichtbar und unsichtbar schalten. Es klappt auch alles soweit ganz gut. Nur im IE 6 funktioniert es nicht. In diesem Tutorial wird dies erwähnt

http://www.cssplay.co.uk/menus/hovercraft.html

In Firefox, IE7, Opera Safari etc this will correctly display the extra text when you hover over the link, but if you try it in IE5.x or IE6 then the extra text will stay hidden. This is a known bug, but fortunately there is also a known answer.
For this to work correctly in IE5.x and IE6 you will first need to either take a :link or :visited style and change it on :hover (an exception is the color style), or take one of the following styles that has not been used previously and declare its default value (there are more but the ones below are probably enough for most circumstances:
  • padding:0;
  • margin:0;
  • display:inline;
  • position:static;
  • border:0;
  • height:auto;
  • text-align:left;
  • text-indent:0;
  • white-space:normal;
  • direction:ltr;
  • float:none;
Because we don't want to change a previously declared style we can use border:0; as our trigger.
Zum Vergrößern anklicken....
.....bei dem angegeben Beispiel klappt es auch. Nur kann ich es nicht für mein Beispiel anwenden. Ich weiß nicht welchem Element ich das border:0 geben soll. Hab schon ein bisschen versucht...aber leider ohne Erfolg.

Vielleicht kann mir einer von Euch weiterhelfen.

Hier mein Code


Code: 
.wrapper ul.topic{list-style:none; margin:0; padding:0;}
.wrapper ul.topic li{display:inline;}
.wrapper ul.topic li ul{
    list-style:none;
    margin:0; 
    padding:0;
    position:absolute; 
    left:0; top:31px; 
    list-style:none; 
    padding:0; 
    margin:0; 
    background:#ddd; 
}
.wrapper ul.topic li ul li{display:block; float:left; height:30px; width:100px; margin:1px; }
.wrapper ul.topic li ul li.grey{ background-color:#999999;}
.wrapper ul.topic li ul li.red{ background-color:#FF0000;}


/*Elemente verbergen*/
.wrapper ul.topic li a ul, .wrapper ul.topic li ul{display:none;}

/*Elemente bei Hover sichtbar schalten*/
.wrapper ul.topic li a:hover ul, .wrapper ul.topic li:hover ul{display:block;}

HTML: 
<div class="wrapper">
    <ul class="topic">
        <li><a href="#grau">Grau</a>
            <ul>
                <li class="grey"></li>
                <li class="grey"></li>
                <li class="grey"></li>
                <li class="grey"></li>
            </ul>
        </li>
    
        <li><a href="#rot">Rot</a>
            <ul>
                <li class="red"></li>
                <li class="red"></li>
                <li class="red"></li>
                <li class="red"></li>
            </ul>
        </li>
    </ul>
</div>

Gruß
Franky
 
Zuletzt bearbeitet:
Hallo,

sieh dir bitte mal diese Seite mit dem IE6 an: IE Pure CSS Pop Ups Bug.
Hier wird das merkwürdige Verhalten der älteren IE-Versionen gut dargestellt und auch zwei Möglichkeiten mitgegeben, diesen Fehler zu umgehen. Der einzige Unterschied zu dem von dir angeführten Beispiel (Stu Nicholls | CSSplay) besteht darin, dass der "versteckte Text" im Link in einem SPAN-Element und nicht in einem B-Element untergebracht wurde:
<a class="link_three" href="#nogo">THE THIRD LINK <b>WITH SOME EXTRA TEXT</b></a>
Zum Vergrößern anklicken....
In diesem Zusammenhang verstehe ich auch nicht, was dein geposteter Quelltext damit zu tun hat. :confused:
 
In meinem Beispiel muss nicht der B Tag un-/sichtbar geschalten werden sondern die ul innerhalb der li mit Link. Das Grundbeispiel kommt von hier http://www.cssplay.co.uk/menu/lightbox.html . Habe mich nur nach diesem Tutorial gerichtet und versucht es auf mein Beispiel anzuwenden.

Inzwischen klappt es halbwegs durch die Conditional Comments. Nur ist die Liste im IE noch nicht inline dargestellt.

HTML: 
<head>
<style type="text/css">
a {color:#000;}
a:hover {text-decoration:none;}
a:visited {color:#000;}    


.wrapper{position:relative;}
.wrapper ul.topic{list-style:none; margin:0; padding:0; }
.wrapper ul.topic li{display:inline;}
.wrapper ul.topic li ul{
    list-style:none;
    margin:0; 
    padding:0;
    position:absolute; 
    left:0; 
    top:20px; 
    list-style:none; 
    padding:0; 
    margin:0; 
    background:#ddd; 
}
.wrapper ul.topic li ul li{display:inline; float:left; height:30px; width:100px; margin:1px; }
.wrapper ul.topic li ul li.grey{ background-color:#999999;}
.wrapper ul.topic li ul li.red{ background-color: #FF0000;}
.wrapper ul.topic li ul li.blau{ background-color:#0099CC;}

.wrapper ul.topic li.active ul{display:block;position:absolute; left:0; top:20px; z-index:1;}

.wrapper ul.topic li a:link:hover{position:relative;}

/*Elemente verbergen*/
.wrapper ul.topic li a ul, .wrapper ul.topic li ul{display:none;}


/*Elemente bei Hover sichtbar schalten*/
.wrapper ul.topic li a:hover ul, .wrapper ul.topic li:hover ul{display:block;z-index:100;}
</style>
</head>
<body>
<div class="wrapper">
    <ul class="topic">
        <li><a href="#grau">Grau<!--[if gte IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
                <li class="grey"></li>
                <li class="grey"></li>
                <li class="grey"></li>
                <li class="grey"></li>
            </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
    
        <li><a href="#rot">Rot<!--[if gte IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
                <li class="red"></li>
                <li class="red"></li>
                <li class="red"></li>
                <li class="red"></li>
            </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <li><a href="#blue">Blau<!--[if gte IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
                <li class="blau"></li>
                <li class="blau"></li>
                <li class="blau"></li>
                <li class="blau"></li>
            </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>        
    </ul>
</div>
</body>
 
Hi,

wenn du schon eine Tabelle verwendest, könntest du diese doch auch zur Anzeige (hover) beim IE verwenden.

Mein Vorschlag:
Code: 
ul{ list-style: none;}
ul.topic, ul.topic *{ margin: 0;
                      padding: 0;}
ul.topic li{ float: left;
             position: relative;
             border: 1px solid #fff;
             background: #369;
             width: 100px;
             line-height: 24px;}
ul.topic li a{ display: block;
               width: 100%;
               color: #fff;
               text-decoration: none;
               border: 0;
               padding: 0 6px;}

ul.topic li a table,
ul.topic li ul{ display: none;
                position: absolute;
                top: -9999px;
                left: -9999px;
                z-index: 0;
                width: 500px;}

ul.topic li a:hover{ position: relative;}
ul.topic li ul li{ border: 1px solid #fff;
                   padding: 0 6px;}
ul.topic li a:hover ul{ display: block;
                        top: 0;
                        left: 0;}
ul.topic li:hover ul, ul.topic li a:hover table{ display: block;
                                                 top: 24px;
                                                 z-index: 99;
                                                 left: 0;}
ul.topic li:hover ul li.grey, ul.topic li a:hover ul li.grey{ background: #aaa;}
ul.topic li:hover ul li.red, ul.topic li a:hover ul li.red{ background: #a00;}
ul.topic li:hover ul li.blau, ul.topic li a:hover ul li.blau{ background: #00a;}
Einziger Wermutstropfen ist die Breitenangabe der geschachtelten Liste bzw. der Tabelle.

Vielleicht kannst du damit etwas anfangen.

Ciao
Quaese
 
Danke für den Tipp. Aber ich verwende eigentlich keine Tabelle. Das ist nur (leider) ein Workaround von CSS Play für den IE 5 und 6. Alle anderen sehen die Tabelle nicht. Ohne diesen Code läuft die Geschichte im IE leider nicht.
 
Hi,

schon klar, dass die Tabelle nur von bestimmten Browsern interpretiert wird - aber wenn sie schon vorhanden ist, kann sie doch auch als Anzeigehilfe verwendet werden.

Ciao
Quaese
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück