Affichage spécifique des filets avec propriété border dans ie7

Bonjour,

Je constate que le menu vertical que j'ai conçu en CSS et qui comporte un filet horizontal pour chaque <li> ne réagit pas pareil dans msie7 : le filet ne se porte pas sur la largeur de la colonne mais sur la largeur du texte. Quelqu'un a t-il déjà entendu de ce problème ?

Merci de vos infos...

Bonjour..

Il me semble que les bordures sont appliquées à l'ensemble de l'élément, c'est à dire à toute la largeur de celui-ci.
Si ce dernier est de type block, ce comportement ne me semble pas bizarre outre mesure...
(Mais bien sûr, je peux me tromper)

Pourrais-tu nous montrer le code employé ?
Ca nous aiderait à nos faire une idée de ce que tu souhaite obtenir exactement et surtout de constater le problème de manière beaucoup plus concrète.

Effectivement le menu comporte la propriété display: block mais comme je le disais cela devrait correctement mettre le filet sur toute la largeur et pas seulement sur le texte ...

.menu ul {
	float: left; 
	display: inline;
	list-style: none; 
	/* width: 170px; */
	margin: 0; 
	padding: 0; 
	/* border-bottom: solid 1px #ccc; */
}	
.menu li {
	margin: 0; 
	padding: 0;
}
.menu li.titre {
	vertical-align: top; 
	margin: 0; 
	padding: 0px 5px 4px 20px; 
	color: #FF6633; 
	text-transform: uppercase; 
	font-weight: bold; 
	font-size: 100%;
}
.menu li.group a {
	[b]display: block;[/b] 
	min-height: 1.5em; 
	height: auto !important; 
	height: 1.5em; 
	line-height: 1.4em; 
	margin: 1px 0px 1px 0px; 
	padding: 0px 7px 0px 10px; 
	border-top: solid 1px #ccc;  
	border-left: solid 10px #00B8D4; 
	color: #666; 
	font-weight: bold; 
	font-size: 100%;
}
.menu li a {
	[b]display: block; [/b]
	min-height: 1.5em; 
	height: auto !important; 
	height: 1.5em; 
	line-height: 1.5em; 
	margin: 1px 0px 1px 0px; 
	padding: 0px 7px 0px 10px; 
	border-left: solid 10px #FEA346; 
	color: #666; 
	text-decoration: none; 
	font-size: 100%;
}
.menu li a:hover {
	border-left: solid 10px #FFC890; /* orange clair */
	color: #000; 
	text-decoration: none;
}
.menu li.group a:hover {
	border-left: solid 10px #F04B0D;
}
.menu li a.selected {
	border-left: solid 10px #F04B0D; /* orange foncé */
	color: #000; 
	text-decoration: none;
}

voici le HTML :

<div class="menu">
<ul>
<li class="titre">ESPACES THEMATIQUES </li>
<li class="group"><a href="#">Premier thème</a></li>
<li class="group"><a href="#">2e thème</a></li>
<li class="group"><a href="#">Troisième thème</a></li>
      <li><a href="#">- 1er sous-thème</a></li>
      <li><a href="#">- 2e sous-thème </a></li>
      <li><a href="#">- Le troisième sous-thème</a></li>
</ul>
</div>