28173 sujets

CSS et mise en forme, CSS3

Compatibilité IE FF pour les li

Bonjours tout le monde je sais que les pb de compatibilité ont souvent été déjà traité mais je n'arrive pas à trouver la solution de celui-ci.

Je fais un petit menu en ligne à base de <ul> et de <li>

<ul class="menu">
	<li><a href="#">Accueil</a></li>
	<li><a href="#">L'&eacute;quipe</a></li>
	<li><a href="#">Nos R&eacute;alisations </a></li>
	<li><a href="#">Revue de Presse  </a></li>
	<li><a href="#">Nous contacter </a></li>
	</ul>


et un CSS:

.menu { background:url(dossier/fondentete.png)}

 .menu li {float: left; background:url(dossier/fondentete.png); 
width: auto; height:37px; }

.menu a {color: black; text-decoration:none; 
border-right: inset 1px #EEF5F9;  height:37px; 
display:block; text-align:center; 
 background:url(dossier/fondentete.png);
 padding:0px 4px;line-height: 30px ; }


Je voudrais qeu la taille de mes <li> s'adaptent à leur contenu

Mais losque je ne spécifie pas le width, FF l'interpréte comme s'adatant à la taille du texte:

alors que IE lui donne par défaut une taille de 100% du <ul>:

Et du coup mon menu n'est plus en ligne mais en colonne.
si j'essaye width: auto
même pb
savez vous coment faire pour que IE interpréte la taille du li comme FF
Merci upload/8768-exalsa1.jpg upload/8768-exalsa2.jpg
Modifié par simon250 (16 Jun 2007 - 15:53)
Bonjour,

Une petite page en ligne et éventellement une capture écran permettrait de mieux analyser et comprendre ton problème. J'avoue n'avoir pas compris grand chose.
voila j'ai apporté les copies d'écran qui je pense peuvent vous aider à comprendre le pb
merci
Modifié par simon250 (16 Jun 2007 - 15:55)
ton probleme est lié à un problème que j'ai très souvent rencontré.

dans le cas d'un menu de la sorte : 

<ul>
   <li><a href="#">Pouet</a></li>
   <li><a href="#">Toto</a></li>
   <li><a href="#">Truc</a></li>
</ul>


Maintenant on va seulement parler de IE (car tous les autres navigateurs n'ont aucun problème)
Si tu flottes les <LI> aucun soucis tout marche, si tu mets un display:block sur les <A> aucun soucis cela fonctionne aussi.
Mais si tu commence à mettre une hauteur sur les <A>, tout pète.
En fait le problème vient du concept du HasLayout, concept à la fois utile et à la fois super chiant.
Le hasLayout est appliqué sur l'élément si tu lui mets une dimension, lui applique le display:inline-block, ou encore en utilisant le zoom:1.
Et donc lorsque le haslayout est appliqué, les A veulent prendre toute la largeur.

Donc la solution qui je te propose, est de spécifier un _width:1%; et un _white-space:nowrap sur les <A>. cela forcera les <A> à ne faire que la largeur de leur contenu. (n'oublie pas les underscore devant les propriétés afin de les faire passer en hack IE).

Et supprime le height que tu appliques sur tes LI, il n'y en a pas besoin, puisque tu mets déjà une hauteurs sur les <A>


Voila si cela peut t'aider à résoudre ton problème. Mais après avoir monté plus d'une vingtaine de systèmes d'onglets, plus de 30 ou 40 systèmes de nav en CSS, je peux t'assurer que cela corrigera ton problème.
Modifié par Gatsu35 (16 Jun 2007 - 21:43)
Salut.

Tu as donné la même image de fond à ton ul, tes li et tes a. Est-ce vraiment indispensable? Seule celle du ul est nécessaire à mon avis. Quant aux hauteurs, je ne les aurais simplement pas déclarées du tout. Et joué avec les padding haut et bas des a pour obtenir la hauteur voulue.
<nicolas> a écrit :
Salut.

Tu as donné la même image de fond à ton ul, tes li et tes a. Est-ce vraiment indispensable? Seule celle du ul est nécessaire à mon avis. Quant aux hauteurs, je ne les aurais simplement pas déclarées du tout. Et joué avec les padding haut et bas des a pour obtenir la hauteur voulue.

C''est souvent chiant de ne pas déclarer de hauteur et apres t'es obligé de tatonner. Au mieux tu déclares un padding-top et un height. Tu ne mets pas de padding-bottom, comme ça aucun soucis
Laurent Denis a écrit :
min-height, min-height, please... Pas height ni d'astuces douteuses...

_height pour IE5/6 :o et min-height pour tout le monde Smiley lol

Et accessoirement je ne sors pas d'astuces douteuse :o c'est du réfléchi (jusqu'à ce que tu m'apportes la preuve du contraire, car j'ai aussi envie d'apprendre et de comprendre)
Bonjour,

Ma position est peut-être stupide mais pourquoi se compliquer la vie avec tout ça, ne serait-il pas plus simple de mettre li en display:inline, et l'arrière-plan sur le ul ? Je ne comprend pas pourquoi on retrouve 3 fois le même background dans ton css…
Modifié par zzzazzz (17 Jun 2007 - 12:37)
Gatsu35 a écrit :
ton probleme est lié à un problème que j'ai très souvent rencontré.


Le hasLayout est appliqué sur l'élément si tu lui mets une dimension, lui applique le display:inline-block, ou encore en utilisant le zoom:1.
Et donc lorsque le haslayout est appliqué, les A veulent prendre toute la largeur.

Donc la solution qui je te propose, est de spécifier un _width:1%; et un
_white-space:nowrap sur les <A>. cela forcera les <A> à ne faire que la largeur de leur contenu. (n'oublie pas les underscore devant les propriétés afin de les faire passer en hack IE).

Et supprime le height que tu appliques sur tes LI, il n'y en a pas besoin, puisque tu mets déjà une hauteurs sur les <A>


whaou!! je reviens de WD et je constate avec plaisir que la communauté s'est penchée sur mon cas.
Grand merci pour cette explication qui m'explique la source du pb et me donne une réponse.
J'ai trouvé une autre façon de contourner le pb qui évite de passer par un hack.
Je ne sais pas si elle est réglo et had hock sur tout les navigateurs:

je mets les balise <A> en float: left

et le tour est réglé.

mais est ce trés conventionnel?

en ce qui concerne mon back ground, effectivement aucun besoin de le répéter tant de fois, des restes malheureux de mes essaies de code.

merci à tous
Sujet clos
Aller à