<li> et internet explorer: bug?

yannouk · 12 Février 2004

Bonjour. je mets au point un site avec des css

je vous invite a jeter un oeil sur un probleme que je rencontre

megannonces dot com (svp aucun link je veux pas que gg le reference sans contenu)

sous opera, aucun probleme pour le menu en haut (hauteur de 20 px)
sous ie, la hauteur double quasiment.

voici mon code

code xhtml

Code:

<div id="menu">
 <ul>
  <li><a href="#">Immobilier</a></li>
  <li><a href="#">Auto-Moto</a></li>
  <li><a href="#">Emploi</a></li>
  <li><a href="#">Rencontres</a></li>
 </ul>
</div>

code css

Code:

#menu {
	background: #D7DCDF url(images/onglet_b.png) no-repeat;
	top: 60px;
	position: absolute;
	width: 400px;
	left: 300px;
	height: 20px;
	border-top: 1px solid #9CACB1;
	border-right: 1px Aucune #9CACB1;
	border-bottom: 1px solid #9CACB1;
	border-left: 1px solid #9CACB1;
}	
#menu li  {
	display: inline;
	padding-left: 6px;
	margin-left: 0px;
	font-size: 12px;
	font-variant: small-caps;
	height: 18px;
}

si je vire les li, la taille originale de 20px est restaurée...j'en conclus que la balise li a, par defaut, une margin bottom != 0
mais meme si j'impose cette marge a 0, le probleme reste entier. Une idée?
A+++

yannouk · 12 Février 2004

je vous ai collés?

BadProcESs · 13 Février 2004

Faut croire ! :mrgreen:

yannouk · 13 Février 2004

bon tampis, je vous en veux pas (pour cette fois hein

), c'est ie qui est collé dans l'histoire

mahefarivony · 13 Février 2004

yannouk a dit:
megannonces dot com

puis

yannouk a dit:

Code:

<div id="menu">
 <ul>
  <li><a href="#">Immobilier</a></li>
  <li><a href="#">Auto-Moto</a></li>
  <li><a href="#">Emploi</a></li>
  <li><a href="#">Rencontres</a></li>
 </ul>
</div>

certains ont du se dire : "ouh la, un futur concurrent, il veut pas qu'on creuse notre propre tombe non plus ?" :mrgreen:

François · 13 Février 2004

Bonjour,

Je pense que ca vient des feuilles de styles par défaut différentes selon les navigateurs.

Essaye margin-top: 0px;margin_bottom: 0px;

A+

Kmacleod · 13 Février 2004

Cette mise en page est faite avec quel doctype ?

SIBELIUS · 13 Février 2004

Tu as mis les marges de UL à zéro (car elles ne le sont pas par défaut) ?

jm · 13 Février 2004

Je suis pas sur de comprendre la necessite du <li></li> dans ce cas?
j'ai l'impression que tu n'as besoin ni du <ul> ni du <li> et le resultat souhaite devrais etre facile a obtenir... maintenant j'ai peut-etre mal compris... :lol:

#menu {
background: #D7DCDF url(images/onglet_b.png) no-repeat;
top: 60px;
position: absolute;
width: 400px;
left: 300px;
height: 20px;
border-top: 1px solid #9CACB1;
border-right: 1px Aucune #9CACB1;
border-bottom: 1px solid #9CACB1;
border-left: 1px solid #9CACB1;
}
#menu a {
display: inline;
padding-left: 6px;
margin-left: 0px;
font-size: 12px;
font-variant: small-caps;
height: 18px;
}

devrais suffir a avoir le resultat voulu non?

Juste curieux ...

JM

SIBELIUS · 13 Février 2004

JM > pour des raisons d'accessibilité et de sémantique, un menu se construit à l'aide de puces.

yannouk · 13 Février 2004

effectgivement des <a> seraient plus simple, mais comme le dit sibellius je veux cette fois respecter la semantique

pour le doctype:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

je fais du strict mais si je mets strict ie le lit pas mais enfin ca c un autre pb

ah ben voila: je viens d'appliquer la marge 0 sur UL comme dit sibellius, et ca marche

je te remercie grandement