28173 sujets

CSS et mise en forme, CSS3

[Résolu] Hauteur pour span imbriqués (ALL ok, IE bug)

Bonsoir,

Voilà quelques heures que je m'arrache les cheveux sur un problème de CSS.
J'ai simplifié mon code pour vous présenter le problème.

J'aimerais obtenir le résultat suivant :
http://teddy2you.com/temp/css-ok.png

Et ce, à l'aide de spans imbriqués tels que dans le code suivant :
<html>
<head>
</head>
<style type="text/css">
#header { width:600px; height:100px; border:1px solid #000; }
#menu { margin-top:40px; }
#menu ul { margin:0; padding:0; }
#menu ul li { list-style:none; display:inline; margin:0 20px; }
#menu ul li .span1 { padding-left:35px; background:#CCC; border:1px dotted #000; }
#menu ul li .span2 { background:#EFE; border:1px solid #0C0;}
#menu ul li .title { margin-right:35px; background:#EDE; }
#menu ul li a { text-decoration:none; }
.title, .span1, .span2 {  padding-top:8px; padding-bottom:8px; } /* agrandir en hauteur. Marche pas sous IE */
</style>
<body>
<div id="header">
	<div id="menu">
		<ul>
		<li>
			<a href="#">
			<span class="span1"><span class="span2"><span class="title">
			item 1</span></span></span>
			</a>
		</li>
		<li>
			<a href="#">
			<span class="span1"><span class="span2"><span class="title">
			item 2</span></span></span>
			</a>
		</li>
		<li>
			<a href="#">
			<span class="span1"><span class="span2"><span class="title">
			item 3</span></span></span>
			</a>
		</li>
		</ul>
	</div>
</div>
</body>
</html>


Ca s'affiche correctement sous FF, Opéra, Konqueror... mais IE m'affiche ça :
http://teddy2you.com/temp/css-ie.png

Si j'enlève la dernière ligne CSS, ça passe partout, mais j'aimerais pouvoir agrandir en hauteur mes éléments.
C'est pour cela que j'ajoute un padding pour les forcer à s'étirer en hauteur :
.title, .span1, .span2 {  padding-top:8px; padding-bottom:8px; }


Avec cette ligne, ça passe sous tous les navigateurs SAUF IE (6 et 7).

Le code peut être testé ici : http://tinyurl.com/267eht

La finalité est de créer des arrondis adaptables en largeur et cliquables, en remplacant les couleurs d'arrière plan par des images d'arrière plan.

Meci d'avance ! Smiley biggrin
Modifié par flat (03 Feb 2008 - 19:56)
Finalement, poster ici m'aura aidé à trouver une solution ! Smiley biggrin

En toute logique, il suffirait d'utiliser 
.title {  padding-top:8px; padding-bottom:8px; }
pour agrandir en hauteur tous les spans, vu qu'ils sont imbriqués.

C'est ce qui se passe sous IE, mais bizarrement sous firefox, les spans "conteneurs" (.span1 et .span2) ne s'agrandissent pas bien que le span "contenu" (.title) s'agrandit.

Pour y remédier, il suffit apparement de les mettre tous en flottants :
.title, .span1, .span2 { float:left; }


Bizarre...
Sujet clos
Aller à