28220 sujets

CSS et mise en forme, CSS3

[Résolu] Diaporama en CSS et IE

Salut,

J'ai un petit problème avec une sorte de diaporama en css. C'est une liste de miniatures qui doivent provoquer l'apparition de la version grand format au survol de la miniature. Ca marche nickel sous Firefox, mais sous IE le grand format n'apparait pas du tout.
Je soupconne un bug IE genre interprétation de grammaire Smiley sweatdrop

Le problème est visible ici.
Modifié par Marvin Le Rouge (12 Aug 2005 - 09:09)
À tout hasard, essais d'ajouter la pseudo-classe :

a[b][#blue]:link[/#][/b] img.diapo-big
{
	display : none;
	position : absolute;
	top : 85px;
	left : 0;
	border : 2px solid #000;
	width : 300px;
	height : 300px;
}


<edit />
Oups ! Non ! N'essais Pas !
Modifié par Stephan (09 Aug 2005 - 22:58)
Felipe a écrit :
Je m'étais servi de Faire une zone réactive (image map) en CSS pour faire ce genre d'effet, ça fonctionnait (et le Tuto fonctionne sous IE autant que FF, je viens de réessayer)


Ca ne va pas dans mon cas, car je dois faire apparaître une 2ème image, indépendante de la première.
Si quelqu'un voit ce qui cloche sous IE, ça m'éviterait de faire appel à du javascript là où il n'y a pas besoin Smiley confus
Salut,
je suis pas bien sûre de moi, mais c'est toujours une piste à tester... Est-ce que ça ne viendrait bien des appels a:hover sur les img qui n'est pas bien reconnu par IE ? Je crois avoir eu du mal à cibler des img comme ça pour IE...
Y a surement une astuce à trouver pour IE (y compris IE Mac ce farceur Smiley biggol )
Pour que a:hover .foo {...} soit reconnu par IE, il faut qu'un a:hover {...} soit également présent dans la feuille de style (avec un effet quelconque).
<edit>ceci figure d'ailleurs dans l'exemple donné par la FAQ du forum pour les infobulles</>
Modifié par Laurent Denis (10 Aug 2005 - 09:50)
@cktoon et daivonex : je ne fais pas de hover sur des images, uniquement sur des liens ici. De plus, le whatever:hover ne marche pas parfaitement sous IE, j'en ai fait l'amère expérience.

@Laurent : Ok, j'ignorais ce truc (et je n'avais pas pensé à rechercher le terme infobulles Smiley confused ). Merci, je teste ça et j'édite ce post pour dire ce que ça donne.

Bon alors, après test : le truc de Laurent marche, mais il reste les 2 problèmes suivants :
1) l'image reste en place quand on sort du lien
2) les images se superposent dans l'ordre dans lequel elles sont déclarées. Donc, quand on survole la vignette 4, on ne verra plus jamais les autres (ça peut se résoudre à grand coup de z-index)
3) le positionnement est foireux sous ie : il ne tient pas compte du absolute et positionne à droite de la liste. Ca j'ai l'impression qu'il va falloir une css spéciale ie.

Si certains ont des suggestions, je suis preneur.
Modifié par Marvin Le Rouge (10 Aug 2005 - 16:19)
Salut Marvin,

Sous IE le décalage de la diapo est exactement de 600px (8x75px des miniatures).
Modifié par papyjo (10 Aug 2005 - 18:05)
J'ai vu ça oui. Je pense qu'IE gère mal le positionnement et cale donc à partir du contenu flottant déjà positionné.
Le nombre de vignettes étant inconnu au préalable, je vais surement devoir faire une feuille de style générée en php juste pour IE.
Et si tu séparais tes grandes images dans une div parfaitement positionnée en les sortant du ul menu ?
Euh... tu changes de techniques et passes au diapo classique mêlant html et php pour envoyer au survol de la souris une variable pour afficher la bonne image dans le div qui va la recevoir ? Smiley lol
D'accord je prends la porte
Bon ben finalement j'ai dû faire ça en utilisant un chouia de javascript (tout ça à cause de IE Smiley rale ), et il faut quand même des css spéciales IE car il se gourre sur le positionnement.
Sujet clos
Aller à