5568 sujets

Sémantique web et HTML

Bonjour à tous,
voila j'ai un menu simple du style :


<ul class="menu">
	<li class="titre">TITRE1</li>
	<li class="titre">TITRE2</li>
	<li>
	<ul class="sousmenu">
		<li>Sous-titre2.1</li>
		<li>Sous-titre2.2</li>
	</ul>
	</li>
	<li class="titre">TITRE3</li>
	<li class="titre">TITRE4</li>
	<li>
	<ul class="sousmenu">
		<li>Sous-titre4.1</li>
		<li>Sous-titre4.2</li>
	</ul>
	</li>
</ul>


et avec la feuille de style correspondante :

body{font:12px sans-serif;margin:0em}

ul.menu,ul.sousmenu{list-style-type:none;margin:0em;padding:0em}
ul.menu li.titre{background-color:#69b;margin-bottom:0.2em}

ul.sousmenu{margin-left:2em;padding:0em}
ul.sousmenu li{font-weight:bold;color:#fff;text-decoration:underline;background-color:#ccc;margin-bottom:0em}



Ce menu s'affiche très bien sous firefox upload/12000-firefox.gif mais sous IE7 upload/12000-ie7.gif j'ai espace horrible entre TITRE2 et Sous-titre2.1.
Est-ce un bug connu ou y'a-t-il une parade contre ça ?
D'avance merci pour votre aide.
Modifié par tioneb369 (23 Apr 2007 - 13:25)
Salut,

Pour constater un peu plus précisément ton problème et être en mesure de t'aider, il serait bien que tu nous fournisses dans l'idéal une page en ligne, ou au moins l'intégralité de ton code, et/ou des images explicatives si nécessaire, comme le recommande la règle 13 du forum. Smiley cligne
En l'état, j'ai peur qu'il soit difficile de t'apporter une solution.
voilà, j'ai complété mon topic...
ca devrait être plus explicite maintenant.

Je pense que le problème est que sous IE 7 le list-style-type:none permet d'enlever la puce du 3ème LI mais l'espace est toujours occupé, contrairement à firefox qui n'occupe pas l'espace et qui n'affiche pas la puce.
Modifié par tioneb369 (23 Apr 2007 - 12:47)
C'est le code HTML qui est erroné, à priori. Il faudrait faire ceci :
<ul class="menu">
	<li class="titre">TITRE1</li>
	<li class="titre">TITRE2
	<ul class="sousmenu">
		<li>Sous-titre2.1</li>
		<li>Sous-titre2.2</li>
	</ul>
	</li>
	<li class="titre">TITRE3</li>
	<li class="titre">TITRE4
	<ul class="sousmenu">
		<li>Sous-titre4.1</li>
		<li>Sous-titre4.2</li>
	</ul>
	</li>
</ul>
Ok autant pour moi, j'avais pas vu que le 1er UL imbriqué se trouvait bien dans le LI de titre2, c'est bon comme ca, il suffit juste de modifier ma CSS désormais...
Merci à FLORENT V. et à tous.
Je clôture le topic.
A+