28220 sujets

CSS et mise en forme, CSS3

[resolu]Pb de compatibilité IE FF, sur un margin.

bonjour tout le monde, je vous contacte pour un petit pb de compatibilité:

La propriété margin n'est pas appliquée par Fire fox

Je cherche à faire un menu avec des images en utilisant: <ul><li>

<ul class="miniature">

<li> 
<a href="#">acceuil<br />
<img src="dossier/image/recetteminiature.png" alt="offre particulier" border="0" />
</a>
</li>

<li> 
<a href="#">
présentation <br />
<img src="dossier/image/Pizza1miniature.png" alt="offre commer&ccedil;ants" border="0" />
</a>
</li>
	  
<li> 
<a href="#">
philosophie<br />
<img src="dossier/image/site_avocatminiature.png" alt="offre pro" border="0" />
</li>
</ul>


je veux que les images soient alignées et avoir une marge en bas de 35px.
je fais donc:

.miniature {  margin-bottom:35px; ; height:auto;}
.miniature li {  float:left; list-style-type:none; }

sur IE tout va bien mais ff ne reconnait n'affiche pas la marge de 35 px.
avec vous une idée pour expliquer cete différence d'affichage.
Merci
Modifié par simon250 (15 Feb 2007 - 14:12)
merci pour la réponse
j'ai essayé display:inline à la place de float:left.
mais en fait ça ne marche pas, mes images se placent les une en dessous des autres.
Salut,
tout simplement parceque que tu un des <br /> à droite de l'intitulé.
Les <br /> ne devraient servir qu'a forcer une coupure de ligne
et non à espacer verticalement des éléments ou à les placer les uns
au dessous des autres.
Tu devrais supprimer l'attribut border="0" qui comme beaucoup d'attribut de
présentation, est déprécié en XHTML et rend ton code invalide dans la
version strict de XHTML.
Il y a un article qui traite de cela sur ce site.

Le remplacer par 
a img {border:none}
dans ta css
Modifié par Hermann (31 Jan 2007 - 13:24)
Oui effectivement je n'avais pas compris qu'en mettant <li> en float left il n'étaient plus pris en compte dans le calcul de la hauteur du <ul> s. Pour l'instant le contexte de formatage et la propriété overflow: auto appliquée à <ul> fait des merveilles sur FF mais comme l'avait prévenu l'article pas sur IE.


Par contre display:inline fait toujours de la résistance, j'ai pourtant changé le code en supprimant les <br/> j'ai remplacé par des <span> avec un display:block pour que le texte soit au dessus de l'image.
mais rien ne change. Smiley decu nouveau code:

<ul class="miniature">

<li> 

<a href="#"> 
<span> acceuil </span>
<img src="dossier/image/recetteminiature.png" alt="offre particulier" border="none" />
</a>

</li>



<li> 

<a href="#">
<span> présentation </span>
<img src="dossier/image/Pizza1miniature.png" alt="offre commer&ccedil;ants" border="none" />
</a>

</li>

	  

<li> 
<a href="#">
<span>philosophie</span>
<img src="dossier/image/site_avocatminiature.png" alt="offre pro" border="none" />

</li>

</ul>


css

.miniature {  margin-bottom:35px; ; height:auto;}

.miniature li {  display:inline ; list-style-type:none; }
.miniature li span {display: block; text-align: center}


En fait je suis surtout intrigué par display:inline qui devrait marcher, mais je ne vois pas mon erreur a moins que ce soit le fait de mettre les <span> en display: block, mais à ce momment je ne sais pas comment faire pour avoir mon texte au dessus de mes images.
En tout cas merci beaucoup pour vos réponses qui m'ont bien mis sur la voie. Et désolé de vous répondre si tard je n'ai pas eu accés à Internet ces derniers jours.
Modifié par simon250 (02 Feb 2007 - 14:27)
Salut,
Dans ce cas il vaut mieux retourner sur la propriété float:left pour le li.

Pour que l'overflow:auto soit pris en compte par IE et que la marge basse soit
donc appliquée, l'UL doit être doté d'une propriété conférent le layout.
Cette propriété (height:1% le plus souvent) doit idéalement être placée
dans une feuille de style en commentaires conditionnels (voir FAQ pour explications)

Height:auto n'as aucun effet puisque c'est la valeur par default qui sert seulement à réinitialiser une valeur déterminée.

Donc le code commenté:


.miniature {
	overflow:auto;
	height:1%; /*dans la css conditionnelle*/
	margin-bottom:35px;
	text-align:center; /*cette propriété s'appliquent aux élément de type bloc pour centrer son contenu de type inline*/
	}
.miniature li {
	float:left;
	list-style-type:none;
	margin-right: 10px;
	}
.miniature li span {display:block;}

Modifié par Hermann (03 Feb 2007 - 13:29)
Sujet clos
Aller à