28172 sujets

CSS et mise en forme, CSS3

Salut à tous

N'ayant pas trouvé de sujet de discussion similaire, je m'adresse à vous pour obtenir un peu d'aide.

Je souhaite centrer verticalement une liste à puce en display:inline sous IE6...

Voici le bout de code en question:


#footer .coordonnees {
	height: 40px;
	background: transparent url('images/sprite_x.png') repeat-x 0 -40px;
	margin-bottom:10px;
	color:#fff;
	text-shadow: #000 0 1px 1px;
	font-size:14px;
}
#footer .coordonnees li {
	display:inline;
	line-height: 40px;
	height:40px;
}



		<div class="coordonnees">
			<ul>
				<li>&#9742; +66 (0)77 25 60 60 <img src="images/transparent.gif" alt="Français" width="16" height="11" class="flag fr"/> <img src="images/transparent.gif" alt="Anglais" width="16" height="11" class="flag en"/></li>
				<li>| &#9742; +66 (0)8 46 28 70 10 <img src="images/transparent.gif" alt="Thaïlandais" width="16" height="11" class="flag th"/></li>
				<li>| E-Mail : <a href="mailto:info@info@locationautomotosamui.com">info@locationautomotosamui.com</a></li>
			</ul>
		</div>


Merci par avance pour votre aide!!
Administrateur
Bonjour,

Un élément en display inline ne peut pas être dimensionné, on ne peut donc pas y appliquer un height 40px (sauf bugs de navigateurs).

Par contre en appliquant ton line-height: 40px; au parent (.coordonnees), cela devrait fonctionner à priori.
Merci pour l'information concernant les éléments en display:inline.

J'obtiens donc le code suivant :

#footer .coordonnees {
	height: 40px;
	line-height: 40px;
	background: transparent url('images/sprite_x.png') repeat-x 0 -40px;
	margin-bottom:10px;
	color:#fff;
	text-shadow: #000 0 1px 1px;
	font-size:14px;
}
#footer .coordonnees li {
	display:inline;
}


Aucun changement sous IETester dernière version (je n'ai pas de IE6 natif)
Administrateur
Julien1926 a écrit :
Aucun changement sous IETester dernière version (je n'ai pas de IE6 natif)

Bizarre.

Dans ce cas, lorsque IE6 fait n'importe quoi, il y a de grandes chances pour qu'il s'agisse d'un problème lié au Haslayout.

Essaye peut-être d'appliquer un zoom:1; sur la liste ou sur les <li>
Cela fonctionne! Merci beaucoup Smiley biggrin

Je n'avais jamais entendu parler de cette propriété...
Je l'ai intégré dans ma feuille de style de la sorte (commentaire conditionnel):
#footer .coordonnees li {display:inline;_zoom:1}