28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous!! Smiley biggrin

Avant de vous expliquer mon problème, je vais vous faire un copier/coller de mes codes.

Code de la page html :

<div id="switch_produit">
	<a href="<?=$this->getSwitchUrl(1)?>" title="Formule 1" alt="Formule 1" class="<?= $this->isSwitchProduitActif(1)?"gamme_active":""?>">
		<div class="gamme_produit_2 switch1">
			<div class="gamme_produit_header">
				<img src="/images/fr/produits/switch-formule1.png" title="Formule 1" alt="Formule 1" />
			</div>
		</div>
		<span>Formule 1</span>
	</a>
</div>


CSS :

#switch_produit{position:relative;float:left;display:inline;width:210px;height:49px;margin-left:8px;background:url(../images/fr/produits/bg-fond-switch.jpg) no-repeat 0 0;}
#switch_produit a{display:block;}
#switch_produit a span{display:none;}

#switch_produit a div.gamme_produit_2{position:relative;display:inline;float:left;width:100px;background:url(../images/color/red/bg-fond-gamme-switch2.jpg) no-repeat 0 100%;text-align:center;margin-right:2px;cursor:pointer;}
#switch_produit a div.gamme_produit_2 div.gamme_produit_header{position:relative;display:block;width:100%;background:url(../images/color/red/bg-header-gamme2.jpg) no-repeat 0 0;text-align:center;}
#switch_produit a:hover div.gamme_produit_2, #switch_produit a.gamme_active div.gamme_produit_2{background:url(../images/color/red/bg-fond-gamme-switch2-on.jpg) no-repeat 0 100%;}
#switch_produit a:hover div.gamme_produit_2 div.gamme_produit_header{background:url(../images/color/red/bg-header-gamme2-over.jpg) no-repeat 0 0;}
#switch_produit a.gamme_active div.gamme_produit_2 div.gamme_produit_header{background:url(../images/color/red/bg-header-gamme2-on.jpg) no-repeat 0 0;}


Le soucis est donc le suivant :
Sur FF, toute ma DIV est bien cliquable, par contre sur IE6 & 7 la zone correspondant à la taille de l'image ne l'est pas... Smiley confus

Comment faire pour avoir le même résultat que sur FF ?

Voici une petite image:
upload/15452-switch.jpg

Merci d'avance pour votre aide. Smiley cligne
Modifié par Sebizarre (18 Jan 2008 - 15:12)
Salut ^^
avant tout chose pense a valider ton code Smiley cligne
car "t'a pas le droit" de mettere des element block(div) dans des element en ligne (a) Smiley confus
Salut hakkou !

Mon élément (a) n'est plus en ligne (j'ai spécifié dans la css display:block)
On peut faire ça ? Non ?

J'ai cru comprendre que c'était valide ça... !
Merci pour ta réponse !

Je regarde ça dés que possible et je vous tiens au courant.

Bonne fin d'aprés midi ! Smiley cligne