<li> et internet explorer: bug?

yannouk

WRInaute passionné
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+++
 

mahefarivony

WRInaute accro
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

WRInaute occasionnel
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+
 
J

jm

Guest
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
 

yannouk

WRInaute passionné
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
 

Discussions similaires

Haut