Balise <li> et Internet explorer

Bonjour,

Désolé de ne venir ici que pour exposer mes soucis, des que j'aurais acquis un peu plus d'expérience promis je me lance à répondre.

Je ne viens pas totalement les main vide non plus.

J'expérimente un problème avec un menu constitué de 3 colonnes et dans la colonne centrale, de 10 lignes. il s'agit d'un habillage constituée d'images empilées.
Ne souhaitant plus utiliser de <table> j'ai tenté de faire cela en css.

mon architecture est la suivante :

<div id="menu">
<img>une image supérieure</img>
<img class="horizontal">longue bande verticale de gauche</img>
<ul class="horizontal">
    <li class="vertical">element 1</li>
    <li class="vertical">element 2</li>
    . . .
    <li class="vertical">element 10</li>
<ul>
<img class="horizontal">longue bande verticale de droite</img>
</div>

pour le css

#menu
	{
	display: block;
	float: left;
	width: 175px;
	height: 100%;
	}
.horizontal
	{
	display: inline;
	line-height:0; 
	float: left;
	}

.vertical
	{
        display: block;
	}

mon premier souci était sous firefox, j'obtenais un décalage dans les <li>
un décalage de toute les images comme si il y avait un border-bottom de 5 pixel
line-height:0; a résolu ce problème

Maintenant c'est sous IE que j'ai le bordel, toutes mes images ont comme une bordure qui me décale tout l'agencement.

Je traine et je fouille partout pour voir ce qui pourrait me convenir mais je n'y arrive pas.
Si une bonne âme pouvait aiguillée ?

merci
Modifié par singaii (10 Mar 2010 - 12:09)

Salut,

Tu peux facilement corriger cette différence dans internet explorer à l'aide des Qu’est-ce que les commentaires conditionnels.

merci pour ta réponse rapide. en passant mon post c'est retrouver dédoublé ... suite à un édit. mauvaise manip de ma part ?

@ Nico3333fr
en fait je n'ai pas dévoilé toute la structure.
ce que je présente la est en fait mon menu de gauche
il est composé d'une multitude d'image. ce n'est pas la structure globale de mon site juste un menu habillé
si je comprend bien je devrais faire un float left et un float right pour les deux coté de mon menu et agencé en block les images du centre qui s'empilent. je retiens et je vais tester cette solution. mais comme mon agencement tiens sous

pour le moment mon souci viens d'un problème purement IE

@Mikachu
je sais comment faire un code CSS spécifique IE mais je ne sais pas quoi mètre pour régler ce problème d'espace entre chaque images.

en passant, il existe un autre hack que celui écrit dans ses pages :

* html h1 {
  float: left;
}

seul IE execute ce code css

je vais essayer de mettre en ligne le truc pour que l'on comprenne bien.
Modifié par singaii (10 Mar 2010 - 12:41)

Salut,

singaii a écrit :
je vais essayer de mettre en ligne le truc pour que l'on comprenne bien.

Yep !

Mais on peut déjà dire que ton code est plus qu'étrange :
* les éléments IMG semblent être décoratifs et devraient donc logiquement être en background css.
* un display:inline accompagné d'un float:left n'a aucun effet (si ce n'est de corriger un éventuel bug dans IE6 (et IE7 ?)
* un display:block sur les LI est également inutile.
* à quoi peut bien servir le line-height:0 ?
* la classe verticale est inutile puisqu'il suffit de cibler avec ul.horizontal li { ... }

un lien de test

attention aux couleurs flashy. j'ai pour habitude de mettre des 'F0F', 'F00' et autre
un peu partout pour bien voir mes divs.

le découpage de la zone de menu n'est peut être pas des mieux adapté.
pour ce qui est du code, je ne connais pas encore toute les subtilités ni tout les standard
mais je souhaite m'amélioré.

merci encore de passer du temps pour me corriger