Hover et display --> Bug IE

Hover et display --> Bug IE - HTML/CSS - Programmation

Marsh Posté le 12-09-2005 à 15:19:31    

j'ai un ptit souci, mon CSS ne fonctionne pas sous mon IE, pourtant les tuto que j'ai trouvé sur alsa utilise le meme genre de programmation et ca marche sous IE? mais pas moi et je vois vraiment pas d'ou ca vient
SOus firefox ca marche bien
 
-->  http://rsilvente.free.fr/css/pouet.html


Message édité par Negro le 12-09-2005 à 15:30:40
Reply

Marsh Posté le 12-09-2005 à 15:19:31   

Reply

Marsh Posté le 12-09-2005 à 15:50:53    

Reply

Marsh Posté le 12-09-2005 à 15:54:33    

pas le html.:o
Ya une astuce pour que ça fonctionne sous IE, retourne regarder chez alsa, je l'ai plus sous la main.


---------------
Can't buy what I want because it's free -
Reply

Marsh Posté le 12-09-2005 à 15:55:13    

je vois pas ou sa marche quelques part mais bon...
 
ah c'est le truc tous bizare sur le côté...
 
bon un conseil...ton css est pas dans l'ordre pour les liens
 
c'est dabord lien normal
 
puis :hover :focus...;etc etc...

Reply

Marsh Posté le 12-09-2005 à 15:56:31    

xtof_83 a écrit :

ton css est pas dans l'ordre pour les liens
 
c'est dabord lien normal
 
puis :hover :focus...;etc etc...


 
Qu'est-ce que ça peut bien foutre l'ordre dans lequel ils sont mis?[:pingouino]


---------------
Can't buy what I want because it's free -
Reply

Marsh Posté le 12-09-2005 à 15:57:29    

skeye a écrit :

Qu'est-ce que ça peut bien foutre l'ordre dans lequel ils sont mis?[:pingouino]


 
 
Ah la place de proférer des parjures, vérifie mes propos et aprés en en reparle.... :heink:

Reply

Marsh Posté le 12-09-2005 à 16:01:21    

xtof_83 a écrit :

Ah à la place de proférer des parjures, vérifie mes propos et aprés en en reparle.... :heink:


 
1) Je ne profère rien du tout.
2) Evite d'utiliser des mots dont tu ne connais pas le sens.
3) Il n'y a aucun ordre obligé, à part si tu veux faire hériter ton a:truc des propriétés de ton a.:o


---------------
Can't buy what I want because it's free -
Reply

Marsh Posté le 12-09-2005 à 16:03:47    

Reply

Marsh Posté le 12-09-2005 à 16:07:36    

skeye a écrit :

pas le html.:o
Ya une astuce pour que ça fonctionne sous IE, retourne regarder chez alsa, je l'ai plus sous la main.


 
Je vous interdis de vous quereller sur mon post lol :whistle:  
 
CHez alsa? justement, jai repris leur syntaxe et la leur marche sous IE, alors je suis parti de celle ci en l'adaptant a mes images, et la ca marche que sous Firefox

Reply

Marsh Posté le 12-09-2005 à 16:09:33    

hum bon on va regarder...

Reply

Marsh Posté le 12-09-2005 à 16:09:33   

Reply

Marsh Posté le 12-09-2005 à 16:14:53    

xtof_83 a écrit :

http://www.yoyodesign.org/doc/w3c/ [...] do-classes
 
Tiens Monsieur....


 
Je veux bien qu'on m'explique pour quelle obscure raison modifier la couleur du :link ou du :visited empecherait celle de mon :hover de s'appliquer.
Et d'ailleurs après test ce n'est pas le cas ni sous FF, ni sous IE, ni sous Opera.:o


Message édité par skeye le 12-09-2005 à 16:16:16

---------------
Can't buy what I want because it's free -
Reply

Marsh Posté le 12-09-2005 à 16:15:59    

skeye a écrit :

Qu'est-ce que ça peut bien foutre l'ordre dans lequel ils sont mis?[:pingouino]

Ca fout que si pour un lien donné si le dernier style indiqué c'est le style pour le lien normal (pas de souris dessus, page visé non visité ...) alors ton lien aura la même apparence dans tous les cas même si la page visé a été visité et que t'as la sourie dessus.
Tu peux vérifier pourquoi dans la doc officielle du css2, c'est expliqué avec plus de détail.

Reply

Marsh Posté le 12-09-2005 à 16:16:05    

xtof_83 a écrit :

hum bon on va regarder...


 
la je regarde ton lien..., tres instructif
merci
 
edit: quand je lis ca, je me dis que dream et topstyle c dla merde  :)


Message édité par Negro le 12-09-2005 à 16:18:03
Reply

Marsh Posté le 12-09-2005 à 16:20:51    

omega2 a écrit :

Ca fout que si pour un lien donné si le dernier style indiqué c'est le style pour le lien normal (pas de souris dessus, page visé non visité ...) alors ton lien aura la même apparence dans tous les cas même si la page visé a été visité et que t'as la sourie dessus.
Tu peux vérifier pourquoi dans la doc officielle du css2, c'est expliqué avec plus de détail.


 
ça d'accord, ça parait normal, tu redéfinis les propriétés de ton a tout court...mais le coup du :link ou :visited forcément avant le :hover je vois pas...


---------------
Can't buy what I want because it's free -
Reply

Marsh Posté le 12-09-2005 à 16:21:13    

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>Document sans titre</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <style type="text/css">
  8. ul {
  9. list-style-type: none;
  10. padding: 0px;
  11. margin: 0px;
  12. border:0px;
  13. }
  15. ul a {
  16. display: block;
  17. }
  19. a.menu1{
  20. background-image: url(0_01.jpg);
  21. height: 83px;
  22. width: 34px;
  23. }
  25. a.menu2{
  26. background-image: url(0_06.jpg);
  27. height: 167px;
  28. width: 34px;
  29. }
  31. a.menu1 span, a.menu2 span{
  32. visibility:hidden;
  33. }
  35. a.menu1:hover span , a.menu2:hover span{
  36. visibility:visible;
  37. }
  39. </style>
  40. </head>
  41. <body>
  42. <ul>
  43.    <li><a class="menu1" title="menu1" accesskey="1" href="#"><span> contenu menu 1</span></a></li>
  44.    <li><a class="menu2" title="menu2" accesskey="2" href="#"><span>contenu menu 2</span></a></li>
  45. </ul>
  46. </body>
  47. </html>


 
Voila c'est ça que tu voulais faire?
 
Bon sinon skeye
Désolé..mais bon je crois que tu n'y croyais pas trop, moi non plus mais c'est Masklinn qui en avait parlé donc...

Reply

Marsh Posté le 12-09-2005 à 16:22:28    

xtof_83 a écrit :


 
Bon sinon skeye
Désolé..mais bon je crois que tu n'y croyais pas trop, moi non plus mais c'est Masklinn qui en avait parlé donc...


 
C'est surtout que
1) je vois pas l'intérêt (pour le :hover après :visited par ex)
2) ça marche pas...[:urd]


---------------
Can't buy what I want because it's free -
Reply

Marsh Posté le 12-09-2005 à 16:24:07    

ah tiens, si, sur le :visited ça marche...mais pas sur le :link
 
[edit]
 
Bon, j'ai réussi à tout faire marcher...[:dawa]
C'est stupide...[:petrus75]


Message édité par skeye le 12-09-2005 à 16:26:35

---------------
Can't buy what I want because it's free -
Reply

Marsh Posté le 12-09-2005 à 16:24:44    

Si sa marche sous ...je sais plus qui...

Reply

Marsh Posté le 12-09-2005 à 16:28:06    

xtof_83 a écrit :

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>Document sans titre</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <style type="text/css">
  8. ul {
  9. list-style-type: none;
  10. padding: 0px;
  11. margin: 0px;
  12. border:0px;
  13. }
  15. ul a {
  16. display: block;
  17. }
  19. a.menu1{
  20. background-image: url(0_01.jpg);
  21. height: 83px;
  22. width: 34px;
  23. }
  25. a.menu2{
  26. background-image: url(0_06.jpg);
  27. height: 167px;
  28. width: 34px;
  29. }
  31. a.menu1 span, a.menu2 span{
  32. visibility:hidden;
  33. }
  35. a.menu1:hover span , a.menu2:hover span{
  36. visibility:visible;
  37. }
  39. </style>
  40. </head>
  41. <body>
  42. <ul>
  43.    <li><a class="menu1" title="menu1" accesskey="1" href="#"><span> contenu menu 1</span></a></li>
  44.    <li><a class="menu2" title="menu2" accesskey="2" href="#"><span>contenu menu 2</span></a></li>
  45. </ul>
  46. </body>
  47. </html>


 
Voila c'est ça que tu voulais faire?
 
Bon sinon skeye
Désolé..mais bon je crois que tu n'y croyais pas trop, moi non plus mais c'est Masklinn qui en avait parlé donc...


 
 
Ouai, super!! c ca, chui vraiment con de ne pas avoir essayé avec visibility!!!, vu que sur alsa il le fond avec diplay et que ca marche!
 
Par contre pourkoi passer par des class alors que mes 2 zones sont unique?

Reply

Marsh Posté le 12-09-2005 à 16:35:18    

tiens skeye:
 
http://forum.hardware.fr/hardwaref [...] m#t1193356
 
enfin retrouvé....
Pour plus d'infos demande à masklinn

Reply

Marsh Posté le 12-09-2005 à 16:37:13    

Aie, j'ai en fait tjs le meme probleme, car le texte que j'ai en roll over je veux le mettre dans un block, donc par exemple si je rajoute ceci:
 
  span{
    position:absolute;
  top:200px;
  left:50px;
  width: 400px;
  height: 50px;/**/
  background-color:#EEEEEE;
  }
 
ca marche sous FF mais pas IE meme en changent l'ordre
--> http://rsilvente.free.fr/css/pouet.html


Message édité par Negro le 12-09-2005 à 16:40:29
Reply

Marsh Posté le 12-09-2005 à 16:37:17    

xtof_83 a écrit :

tiens skeye:
 
http://forum.hardware.fr/hardwaref [...] m#t1193356
 
enfin retrouvé....
Pour plus d'infos demande à masklinn


 
J'avais compris le principe...je le trouve juste stupide...[:dawa]


---------------
Can't buy what I want because it's free -
Reply

Marsh Posté le 12-09-2005 à 16:39:20    

Negro a écrit :

Aie, j'ai en fait tjs le meme probleme, car le texte que j'ai en roll over je veux le mettre dans un block, donc par exemple si je rajoute ceci:
 
  span{
    position:absolute;
  top:200px;
  left:50px;
  width: 400px;
  height: 50px;/**/
  background-color:#EEEEEE;
  }
 
ca marche sous FF mais pas IE
--> http://rsilvente.free.fr/css/pouet.html


 
Man
 
 
Tiens jai trouvé
 
c'est un bug IE
 
rajoute ça
 
ul a:hover {
 background: none; /* correction d'un bug IE */
}

Reply

Marsh Posté le 12-09-2005 à 16:46:51    

xtof_83 a écrit :

Man
 
 
Tiens jai trouvé
 
c'est un bug IE
 
rajoute ça
 
ul a:hover {
 background: none; /* correction d'un bug IE */
}


 
 
mhmm, jolie! ca va m'aider, meme si ca m'arrange pas que l'image disparaisse
j'ai testé ca:
 
 
ul a:hover {
 background: image: url(0_01.jpg);
}  
 
mais l'image se barre tjs... jvais voir en HTML

Reply

Marsh Posté le 12-09-2005 à 16:50:44    

Negro a écrit :

mhmm, jolie! ca va m'aider, meme si ca m'arrange pas que l'image disparaisse
j'ai testé ca:
 
 
ul a:hover {
 background: image: url(0_01.jpg);
}  
 
mais l'image se barre tjs... jvais voir en HTML


 
Euh c'est de la sauce grand mére que tu nous fais là...
 
background: image: url(0_01.jpg); :sweat:  :sweat:  
 
background-image: url(0_01.jpg); c'est un peu mieux

Reply

Marsh Posté le 12-09-2005 à 16:51:56    

Negro a écrit :

mhmm, jolie! ca va m'aider, meme si ca m'arrange pas que l'image disparaisse
j'ai testé ca:
 
 
ul a:hover {
 background: image: url(0_01.jpg);
}  
 
mais l'image se barre tjs... jvais voir en HTML


Et si t'apprenais le CSS ? Parce que ça s'écrit comme ça :

ul a:hover {
 background: url("0_01.jpg" );
}

Reply

Marsh Posté le 12-09-2005 à 16:52:05    

xtof_83 a écrit :

Euh c'est de la sauce grand mére que tu nous fais là...
 
background: image: url(0_01.jpg); :sweat:  :sweat:  
 
background-image: url(0_01.jpg); c'est un peu mieux


 
lol toi aussi t'as remarqué?
Bah vous savez quoi, si je met le tirer a la place des : , bah ca marche plus
 
regarde et test: http://rsilvente.free.fr/css/pouet.html


Message édité par Negro le 12-09-2005 à 16:54:11
Reply

Marsh Posté le 12-09-2005 à 16:55:39    

FlorentG a écrit :

Et si t'apprenais le CSS ? Parce que ça s'écrit comme ça :

ul a:hover {
 background: url("0_01.jpg" );
}



 
t'enerve pas mon doudou ;) je l'ai vu...
 
puis meme si chui pas doué en CSS, je pourrais t'apprendre d'autres choses, restons polis alors ;)


Message édité par Negro le 12-09-2005 à 16:55:54
Reply

Marsh Posté le 12-09-2005 à 16:56:20    

J'ai oublié un smiley en fait :D milles excuses :jap:

Reply

Marsh Posté le 12-09-2005 à 17:00:23    

Ben tu as ce que tu veux ou pas?

Reply

Marsh Posté le 12-09-2005 à 17:06:55    

skeye a écrit :

ça d'accord, ça parait normal, tu redéfinis les propriétés de ton a tout court...mais le coup du :link ou :visited forcément avant le :hover je vois pas...

En fait, ca vient du fait que ce ne sont pas des états de liens comme en javascript, mais ce sont des pseudos classes. Et ces pseudos classes ne sont pas exclusives. C'est à dire qu'un liens peut appartenir à plusieurs de ces classes à la fois. Conformément à la norme css, c'est les valeurs des propriétés déclarés dans la derniére classe qui primera.
L'ordre de déclaration découle alors des cas d'appartenance ou pas à ces pseudos classes :

  • link en premier vu que tous les liens sont censé appartenir à cette classe, si c'était déclaré en dernier les liens ne changeraient jamais d'apparence.
  • visited et hover l'un avant l'autre en fonction de ce qu'on veut faire : si on veut qu'un lien change d'apparence quand on le survole même aprés avoir visité la page du lien, alors il faut que mettre le hover aprés le visited. Si on veut que l'état visité prime sur l'état "lien survolé", il faut mettre le hover avant le visited.

Reply

Marsh Posté le 12-09-2005 à 17:09:25    

xtof_83 a écrit :

Ben tu as ce que tu veux ou pas?


 
 
Pas tout a fait, mais j'ai les bases pour continuer
 
Je vous remercie tous infiniment pour votre aide et vos liens precieux!
Merci a tous  :hello:  :hello:  :hello:


Message édité par Negro le 12-09-2005 à 17:09:44
Reply

Marsh Posté le 12-09-2005 à 17:11:29    

omega2 a écrit :

En fait, ca vient du fait que ce ne sont pas des états de liens comme en javascript, mais ce sont des pseudos classes. Et ces pseudos classes ne sont pas exclusives. C'est à dire qu'un liens peut appartenir à plusieurs de ces classes à la fois. Conformément à la norme css, c'est les valeurs des propriétés déclarés dans la derniére classe qui primera.
L'ordre de déclaration découle alors des cas d'appartenance ou pas à ces pseudos classes :

  • link en premier vu que tous les liens sont censé appartenir à cette classe, si c'était déclaré en dernier les liens ne changeraient jamais d'apparence.
  • visited et hover l'un avant l'autre en fonction de ce qu'on veut faire : si on veut qu'un lien change d'apparence quand on le survole même aprés avoir visité la page du lien, alors il faut que mettre le hover aprés le visited. Si on veut que l'état visité prime sur l'état "lien survolé", il faut mettre le hover avant le visited.


 
 
Merci pour cet eclaircisement... :jap:

Reply

Marsh Posté le 12-09-2005 à 18:29:04    

omega2 a écrit :

En fait, ca vient du fait que ce ne sont pas des états de liens comme en javascript, mais ce sont des pseudos classes. Et ces pseudos classes ne sont pas exclusives. C'est à dire qu'un liens peut appartenir à plusieurs de ces classes à la fois. Conformément à la norme css, c'est les valeurs des propriétés déclarés dans la derniére classe qui primera.
L'ordre de déclaration découle alors des cas d'appartenance ou pas à ces pseudos classes :

  • link en premier vu que tous les liens sont censé appartenir à cette classe, si c'était déclaré en dernier les liens ne changeraient jamais d'apparence.
  • visited et hover l'un avant l'autre en fonction de ce qu'on veut faire : si on veut qu'un lien change d'apparence quand on le survole même aprés avoir visité la page du lien, alors il faut que mettre le hover aprés le visited. Si on veut que l'état visité prime sur l'état "lien survolé", il faut mettre le hover avant le visited.


J'avais saisi...mais ce que je ne saisis pas c'est plutôt l'intérêt d'un tel fonctionnement...[:joce]


---------------
Can't buy what I want because it's free -
Reply

Marsh Posté le 12-09-2005 à 18:53:41    

skeye a écrit :

J'avais saisi...mais ce que je ne saisis pas c'est plutôt l'intérêt d'un tel fonctionnement...[:joce]


C'est pas un fonctionnement spécial, c'est juste une concéquence du comportement classique des CSS:

  • Si les règles ont des priorités équivalentes, la dernière définie prend le pas sur les autres
  • Les évènements sont cumulatifs


Le résultat, c'est qu'un lien peut être à la fois "visited" et "hover", ou "hover" et "focused".
 
Donc si on a un lien "visited" et "hover" et que :visited est en dernier, on ne verra pas :hover (puisque les priorités sont équivalentes et que visited, défini en dernier, prend le pas sur hover).
L'ordre que j'ai donné tient compte de ces évènements se cumulant (un lien actif est nécessairement hover, ...) pour faire en sorte qu'on ait pas d'évènements "précédent" qui bloque l'activation de l'évènement suivant. Stou. C'est pas un intérêt, juste un résultat [:spamafote]  
 
Accessoirement, on peut également  théoriquement cumuler les pseudos évènements (:visited:hover; :hover:focus; ...)


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 13-09-2005 à 07:56:03    

masklinn a écrit :

C'est pas un fonctionnement spécial, c'est juste une concéquence du comportement classique des CSS:

  • Si les règles ont des priorités équivalentes, la dernière définie prend le pas sur les autres
  • Les évènements sont cumulatifs


Le résultat, c'est qu'un lien peut être à la fois "visited" et "hover", ou "hover" et "focused".
 
Donc si on a un lien "visited" et "hover" et que :visited est en dernier, on ne verra pas :hover (puisque les priorités sont équivalentes et que visited, défini en dernier, prend le pas sur hover).
L'ordre que j'ai donné tient compte de ces évènements se cumulant (un lien actif est nécessairement hover, ...) pour faire en sorte qu'on ait pas d'évènements "précédent" qui bloque l'activation de l'évènement suivant. Stou. C'est pas un intérêt, juste un résultat [:spamafote]  
 
Accessoirement, on peut également  théoriquement cumuler les pseudos évènements (:visited:hover; :hover:focus; ...)


 
Pour le cumul, c'est bon à savoir... :jap:
Par contre c'est une raison de plus pour penser qu'un :hover devrait être prioritaire...sinon un :hover avant les autres n'a pas de sens...:o


---------------
Can't buy what I want because it's free -
Reply

Marsh Posté le 13-09-2005 à 08:36:54    

skeye a écrit :

Pour le cumul, c'est bon à savoir... :jap:
Par contre c'est une raison de plus pour penser qu'un :hover devrait être prioritaire...


Prioritaire? Sur quoi? Sur visited et link? ok, mais pas sur active et pas nécessairement sur focus [:dawa]
 
Il serait de toute façon stupide et dangereux de forcer des exceptions pour certaines pseudo classes. Ici le comportement semble bizarre à première vue mais est cohérent avec le langage, stable et automatique (si le reste est correctement implémenté, ce truc là suit tout seul sans emmerdes)


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 13-09-2005 à 08:52:30    

masklinn a écrit :

Prioritaire? Sur quoi? Sur visited et link? ok, mais pas sur active et pas nécessairement sur focus [:dawa]
 
Il serait de toute façon stupide et dangereux de forcer des exceptions pour certaines pseudo classes. Ici le comportement semble bizarre à première vue mais est cohérent avec le langage, stable et automatique (si le reste est correctement implémenté, ce truc là suit tout seul sans emmerdes)


 
Moui, m'enfin un :hover qui est spécifié dans le css mais jamais utilisé pour cause d'écrasement des propriétés par un :link ou un :visited derrière ça parait quand même foutrement mal foutu...[:pingouino]


---------------
Can't buy what I want because it's free -
Reply

Marsh Posté le 13-09-2005 à 09:09:53    

skeye a écrit :

Moui, m'enfin un :hover qui est spécifié dans le css mais jamais utilisé pour cause d'écrasement des propriétés par un :link ou un :visited derrière ça parait quand même foutrement mal foutu...[:pingouino]


Tu fais ce que tu veux hein [:pingouino]
 
En plus le moteur peut difficilement détecter tous les cas de figure (par exemple un "hover" écrasé par "visited" sera utilisé tant que le lien n'aura pas été cliqué [:enzan] )


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 13-09-2005 à 09:11:12    

masklinn a écrit :

Tu fais ce que tu veux hein [:pingouino]
 
En plus le moteur peut difficilement détecter tous les cas de figure (par exemple un "hover" écrasé par "visited" sera utilisé tant que le lien n'aura pas été cliqué [:enzan] )


 
Si on veut un hover différent pour link et visited on n'a qu'à utiliser :visited:hover et :link:hover, puisque ça existe.:o


---------------
Can't buy what I want because it's free -
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed