[CSS] Span verschijnt niet bij a:hover

[Verwijderd]

Weer een CSS-probleempje van mij.

Ik heb op http://www.elgreco.nl/cmd/ een voorbeeldje gezet. Dat "kompas" is bedoeld als navigatie. Nu werkt dat allemaal leuk. Als je over de pijlen heen gaat, verschijnt er een tekst.

In firefox wel te verstaan.... in IE werkt het natuurlijk niet

Als voorbeeld de "linkerpijl":

Cascading Stylesheet:

#nav a {
  position: absolute;
  display: block;
  height: 100px;
  width: 100px;
  z-index: 2;
}

#nav a span {
  font-size: 13px;
  font-weight: bold;
  color: Black;
  text-align: center;
  width: 100px;
  z-index: 2;
  display: none;
}

a#vormgeving {
  position: absolute;
  top: 100px;
  left: 0px;
  background-image:url(left.png);
  background-position: right;
  background-repeat:no-repeat;
}

#nav a:hover#vormgeving span {
  display: block;
  position: absolute;
  left: 100px;
  top: 40px;
  visibility: visible;
}

Kan iemand mij helpen om dit ook in IE werkend te krijgen? Ik heb werkende voorbeelden gezien, dus waar maak ik de fout?

[André]

En als je het nou zo doet:

code:

#nav a#vormgeving:hover span {
  display: block;
  position: absolute;
  left: 100px;
  top: 40px;
  visibility: visible;
}

[Verwijderd]

Nope, helaas, werkt niet.... ik heb inmiddels "visibility: visible" weggehaald, die had ook geen nut.

[CH4OS]

Je plaatst dus een a:hover in de CSS over een span? If so, dan gaat je dat afaik met standaard CSS niet lukken in IE, aangezien IE geen hover dingen ondersteund, anders dan de a:hover a:active a:link en a:visited 'elementen' in CSS

Je zal dus javascript toe moeten passen, om het te kunnen fixen
BTW... Het kompas staat ook links in IE... Terwijl dat rechts is, in FireFox

[André]

GJ-tje schreef op vrijdag 19 november 2004 @ 13:15:
Je plaatst dus een a:hover in de CSS over een span? If so, dan gaat je dat afaik met standaard CSS niet lukken in IE, aangezien IE geen hover dingen ondersteund, anders dan de a:hover a:active a:link en a:visited 'elementen' in CSS

Idd, precies het probleem waardoor de suckerfish menu's het in IE zonder additionele JS het ook niet doen.

[Verwijderd]

maar dit dan?

Als Eric Meyer het kan, dan moet ik het toch op z'n minst kunnen jatten?

[CH4OS]

Loze onzin stond hier...

[ Voor 109% gewijzigd door CH4OS op 19-11-2004 13:36 ]

[Pjottski]

Alleen getest in IE 6.0 sp2, maar voeg dit eens toe aan je stylesheet

code:

#nav a:hover#vormgeving {
    background-color: transparent;
    background-image: url('left.png');
    background-repeat: no-repeat;
    background-position: center right;
}

#nav a:hover#marketing {
    background-color: transparent;
    background-image: url('right.png');
    background-repeat: no-repeat;
    background-position: center left;
}

#nav a:hover#ict {
    background-color: transparent;
    background-image: url('top.png');
    background-repeat: no-repeat;
    background-position: bottom center;
}

#nav a:hover#other {
    background-color: transparent;
    background-image: url('bottom.png');
    background-repeat: no-repeat;
    background-position: top center;
}

[Verwijderd]

briljant! dit werkt.... ligt dat nu aan die transparante background-color?

[Pjottski]

Yep, ik denk het wel.
Zodra er geen achtergrond kleur is, dan laat hij de tekst niet zien.
De css kan zelfs nog korter worden gemaakt heb ik net gemerkt

code:

#nav a:hover#vormgeving {
    background-color: transparent;
}

#nav a:hover#marketing {
    background-color: transparent;
}

#nav a:hover#ict {
    background-color: transparent;
}

#nav a:hover#other {
    background-color: transparent;
}

[Verwijderd]

Peedjeeh schreef op maandag 22 november 2004 @ 10:03:

De css kan zelfs nog korter worden gemaakt heb ik net gemerkt

Cascading Stylesheet:

#nav a:hover#vormgeving,
#nav a:hover#marketing,
#nav a:hover#ict,
#nav a:hover#other {
    background-color: transparent;
}

Cascading Stylesheet:

#nav a:hover {
    background-color: transparent;
}

[Verwijderd]

tnx! daar kan ik wat mee.

Vreemd eigenlijk dat er "blijkbaar" een achtergrondkleur over de tekst heen ligt (ofzo ), terwijl ik die niet zie. Ben flink wat uurtjes bezig geweest om het cross-browser compatible te maken, maar dit soort vreemde problemen helpen niet echt mee.
Het wordt tijd voor normale CSS ondersteuning in IE.

[Verwijderd]

Had je deze al gevonden?
http://www.alistapart.com/articles/horizdropdowns/
daar staat het eea over hoe je met IE dropdowns aan de praat krijgt.

[Verwijderd]

Jep, die ken ik ja, dat is de horizontale variant van het suckerfish-menu toch?

Anyway, dat is niet waar het misging, mijn probleem lag ergens anders.