28173 sujets

CSS et mise en forme, CSS3

Décalage gauche des <li> sous IE5 pc

Yo !

J'ai remarqué un problème de décalage des <ul> sous IE5pc depuis un petit moment déjà, et je n'ai toujours pas réussi à le résoudre...

En fait il s'agit de 18px à gauche des <ul>
...Ni margin, ni padding de la feuille de style par défaut du navigateur en cause, ceux-ci sont initialisés dans la feuille de style auteur.

On pourra même remarquer que ce "bug" existe sur 90% des menus de ce site: http://css.maxdesign.com.au/listamatic/
Quand même, ces menus ne sont pas les plus sales CSSement parlant, pourtant. ^^"


Petite illustration du problème:

Tous les navigateurs:
upload/2502-autres.png

IE5pc:
upload/2502-IE5.png

Savez-vous comment résoudre cette horreur ?
Je me creuse la tête depuis des mois là dessus. :|
Modifié par Nigel (24 Feb 2006 - 16:12)
p, ul, a, li {
	padding:0;
	margin:0;}


;P
Le pire, c'est que les marges et padding sont bien initialisés...
Le bug n'apparait que sous IE5...
Je ne comprend absolument pas d'où sort cette marge gauche fantôme.

Par exemple: http://css.maxdesign.com.au/listamatic2/vertical14.htm
Celui-ci a le même problème. Smiley smile

En investigant un peu plus, après avoir mis des border aux UL et LI, je remarque que la marge s'applique entre le ul et le li, ce n'est pas le ul qui est décalé.

Malheureusement, padding et margin sont bien précisés pour les deux... Y a bien autre chose qui déglingue tout... La présence d'images ?
Et non... J'ai enlevé mes images. Smiley ohwell


Tenez, je vous donne les propriétés CSS de mon menu:


	#menu ul {
		margin-bottom:29px;
		width: 180px;}
	
	#menu li {
		border-bottom: 1px solid #9E908D;
		width: 180px;}
	
	#menu ul li a {
		display: block;
		width: 180px;}
	
	#menu ul li a img { border:none; }
	
	.opacite {
	opacity:0.6;
	filter:alpha(opacity=60);}
	
	a.opacite:hover {
	opacity:1;
	filter:alpha(opacity=100);}


Et les propriétés générales:


#menu {
	position: absolute;
	left:0;
	top:266px;
	width: 180px;}

p, ul, a, li {
	padding:0;
	margin:0;}
	
a {color:#666666; text-decoration:none;}
a img {border:none;}
a:hover { color:black; }

ul {
	list-style-type: none;
	font-size:1px; /* BUG IE SPOTTED ;P */}


Voilà donc tout ce qui touche au menu qui délire sous IE5...
En ce qui concerne l'HTML... ben rien de sorcier:


<div id="#menu">
  <ul>
    <li></li>
    <li></li>
  </ul>
</div>


Oui, je sais bien que je pourrais enlever le div menu, mais voilà, je compte certainement ajouter autrechose dans la div que ce ul. Smiley cligne
Modifié par Nigel (24 Feb 2006 - 16:22)
Sujet clos
Aller à