28172 sujets

CSS et mise en forme, CSS3

Retour de chariot indésirable sous Chrome et Safari

Bonjour!

Je rencontre un problème sous Chrome et Safari. J'ai une barre de navigation horizontale composée d'éléments de liste (li) en display:inline dans une liste (ul) au comportement par défaut sans largeur spécifiée.

Il y a suffisamment d'espace pour que ma navigation s'affiche sur une seule ligne mais un mot de retrouve toujours sur la ligne suivante avec Chrome et Safari.

Mon xhtml est valide, mes CSS sont valides, les margin et padding sont à 0 (sauf celle servant à distancer mes éléments).

Voici le xhtml:
<ul id="meta">
            <li><a href="#"><img src="images/icon_facebook.gif" width="16" height="16" alt="" />Suivez-nous sur facebook !</a></li>
            <li><a href="#"><img src="images/icon_joindre.gif" width="16" height="12" alt="" />Nous joindre</a></li>
            <li><a href="#"><img src="images/icon_membres.gif" width="14" height="16" alt="" />Espace membres</a></li>
    </ul>


Voici les CSS:

*{
	margin:0;
	padding:0;
	border: 0;
}
ul#meta {
	list-style-type: none;
	position: absolute;
	right: 280px;
	top: 17px;
	background-color: #0FF;
	text-align: right;
}
ul#meta li {
	display: inline;
	padding-right:20px;
	background-color: #600;	
}
ul#meta li:last-child {
	padding-right: 0px;
}

ul#meta a {
	text-transform: uppercase;
	font-size: 0.75em;
}
ul#meta a img {
	margin-right: 8px;
}



Vous pouvez y jeter un oeil (en haut de la page complètement): http://www.riasq.net/nouveau/
J'ai appliqué des couleurs de fond pour vous aider à visualiser le problème

Est-ce que quelqu'un peut m'aider? Smiley smile

Merci!
Modifié par spinnaker (24 Aug 2010 - 16:41)
Bonjour.

Ce comportement est normal, il est dû au display: inline.

Deux solutions : remplacer ton display: inline par un float: left; ou encore supprimer les espaces indésirables dans le html, par exemple : 
<ul id="meta"><li><a href="#"><img src="images/icon_facebook.gif" width="16" height="16" alt="" />Suivez-nous sur facebook !</a></li><li><a href="#"><img src="images/icon_joindre.gif" width="16" height="12" alt="" />Nous joindre</a></li><li><a href="#"><img src="images/icon_membres.gif" width="14" height="16" alt="" />Espace membres</a></li></ul>


En espérant t'avoir renseigné.
Wow, j'ai perdu des heures à essayer plein de choses et ça fonctionne enfin! Merci beaucoup!

Est-ce qu'on peut m'expliquer en quoi ce comportement est normal?
Modifié par spinnaker (24 Aug 2010 - 16:48)
Grosso modo, quand un élément est inline, les espaces, tabulations, retours chariots qui le suivent sont interprétés comme un seul espace. Par exemple
<span>Tata</span>     <span>Titi</span>
<span>Toto</span>


donnera Tata Titi Toto

Edit: Grillé! Smiley sweatdrop
Modifié par Florian_R (24 Aug 2010 - 16:52)
J'ai fait quelques tests rapides là. Avec le inline à la place du float, si on rajoute plusieurs mots au derniers li, le dernier part toujours à la ligne mais le ul s'adapte bien.

Si on retire le padding-right des li, tout rentre dans l'ordre.

Je suis curieux à mon tour de savoir à quoi cela est dû...
Sujet clos
Aller à