28172 sujets

CSS et mise en forme, CSS3

Ie7 de la mort

Bonsoir,

Je deviens chèvre.
J'ai validé html strict et malgré tout, j'ai un décalage sur les légendes des phtos.

http://www.galerie.web2aconcept.fr/divers.php

ok sur opera - fox - safari - chrome - ie8 - mais pas sur ie7 (ie6 j'ai zappé définitivement)


<div class="photos"><img src="img/marechal-ornano.jpg" width="300" height="401" alt="rue marechal ornano">Rue Maréchal Ornano</div>




.photos {
	
	width:300px;
	height:500px;
	margin-top:40px;
	margin-left:0px;
	margin-right:30px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:10px;
	text-align:center;
	color:#333;
	float:left;	

	}


à votre écoute pour toute remarque même hors sujet.
Modifié par kayorn (05 Dec 2011 - 21:03)
A tout hasard : .photos { display: block...

Mais je suis sur un Mac, je peux pas tester sous IE pour l'instant donc je sais de quel décalage tu parles.
jmlapam a écrit :
Une remarque hs:


margin: top right bottom left;


Utilise les raccourcis CSS. Smiley cligne


je ne trouve jamais le bon ordre du premier coup Smiley smile alors je simplifie à la fin , quand tout marche.

j'utilise aussi minify css
Modifié par kayorn (05 Dec 2011 - 20:50)
jb_gfx a écrit :
A tout hasard : .photos { display: block...

Mais je suis sur un Mac, je peux pas tester sous IE pour l'instant donc je sais de quel décalage tu parles.



dans ie7, la légende des photos se place non pas en dessous et au centre comme sur les autres navigateurs mais à droite de la photo pour l'article et en dessous pour le reste... incompréhensible

display: block ne donne rien.
Modifié par kayorn (05 Dec 2011 - 21:06)
Pourquoi utiliser float?
Tu les fais sortir du flux, moi j'utiliserais plutôt les margin et padding
Modifié par jmlapam (05 Dec 2011 - 21:24)
Les <div> sont des balises de type block, elles se placent dans le flux naturellement l'une sous l'autre ce que je veux éviter avec float left.

j'ai aussi essayé de supprimer le float:left et en le remplaçant par display:inline-block, ça fonctionne aussi sauf sur ie7 qui les place les unes sous les autres avec le même pb de décalage de la légende, avec sur ie8, les photos calées en bottom au lieu de top.
le pb vient sûrement d'ailleurs.
Modifié par kayorn (05 Dec 2011 - 22:35)
Salut,

Pour appliquer un display: inline-block à un élément de bloc par nature (comme l'élément div) à IE 7 et versions antérieures, il faut corriger par display: inline (en revanche, cette correction n'est pas nécessaire lorsque l'élément en question est, par nature, de type en ligne).
c'est bon à savoir.

l'avantage de float:left c'est que ça marche avec tous les navigateurs.


Pas une petite idée pour mes légendes?
Modifié par kayorn (06 Dec 2011 - 07:35)
Moi je dis une lightbox, meilleur effet, moins de prise de tête.

<div class="photos">
<ul class="lightbox">
<li><a href="lien en absolu" rel="lightbox-photos" title="Le port"><img src="img/le-port.jpg" width="" height="" alt="le port d'Ajaccio" ></a></li>
<li><a href="lien en absolu" rel="lightbox-photos" title="La rosée"><img src="img/table-paillote.jpg" width="300" height="400" alt="le port d'Ajaccio" ></a></li>
<li><a href="lien en absolu" rel="lightbox-photos" title="Les puces"><img src="img/puces.jpg" width="" height="" alt="le port d'Ajaccio" ></a></li>
<li><a href="lien en absolu" rel="lightbox-photos" title="Le miroir"><img src="img/miroir.jpg" width="" height="" alt="le port d'Ajaccio" ></a></li>
<li><a href="lien en absolu" rel="lightbox-photos" title="Les escaliers"><img src="img/escaliers.jpg" width="" height="" alt="le port d'Ajaccio" ></a></li>
</ul>
</div>


rajouter les scripts nécessaires et le tour est joué.
Modifié par jmlapam (06 Dec 2011 - 08:06)
Sujet clos
Aller à