28172 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai un problème récurrent avec IE7 quand je fais ce genre de choses :


<a class="link" href="spip.php?article7">
<div class="abris">
    <img class="vignet" height="134" width="234" style="height: 134px; width: 234px;" alt="" src="local/cache-vignettes/L234xH134/arton7-f638b.jpg"/>
    <div class="descript">
         <h3>Autan</h3>
         <p>Abri de piscine haut télescopique pans droits : profitez de votre piscine à l’abri des intempéries</p>
    </div>
    <div class="clear"><div/>
</div>
</a>


avec le css suivant :


a.link { cursor:pointer; display:block; width:415px; }
a.link { text-decoration:none; }
div.abris { background:#54b9e6 url(/squelettes/navpics/fonds/fd_abris.gif) 0 0 repeat-x; margin:0 0 2px 0; width:415px; }
div.abris img.vignet { float:left; width:234px; }
div.abris div.descript { color:#fff; float:left; padding:30px 0 0 21px; width:160px; }
div.abris div.descript h3 { font-size:18px; font-weight:normal; }
div.abris div.descript p { margin:3px 0 0 0; }


Le lien n'est plus fonctionnel sous IE7 quand on clique sur l'image.
Pas de souci sous FF en revanche.

Merci d'avance pour vos lumières,

KePh
Modifié par kephren (19 Feb 2009 - 18:53)
Euh, je crois bien que tu n'a pas le droit de mettre d'element BLOCK (div) dans un element INLINE (a)

a ta place je mettrai le lien dans ta div et je lui assignerai un display: block; avec les bonnes tailles pour remplir ta div au besoin.
Et je remplacerai aussi ta div "descript" par un span

Je te dit ca, comme ca au feeling ^^"
<= Css Noob inside Smiley smile
Ok Klaas, je vais tenter de la jouer autrement.

D'accord avec toi mais en même temps j'ai transformé l'élément (a) INLINE en BLOCK avec la propriété display...

Mais bon le but n'étant pas de faire de la philo mais que ça fonctionne, je vais tenter de contourner ça comme tu me le proposes Smiley cligne

KePh