28172 sujets
CSS et mise en forme, CSS3
Ok, réponse rapide, simple et concise.
Le problème, c'est que lorsque des images sont utilisées pour créer un menu vertical, comme ceci :
Je n'arrive pas à "coller" les images. Il y a toujours, sous IE, une marge (1px ou plus) entres elles.
margin et padding sont à zéro, pour les "li", pour "ul", "list-style-type" à none...
En remplaçant la liste "ul" par une liste "dd", plus de problème.
Vous avez-une idée du pourquoi ?
Le problème, c'est que lorsque des images sont utilisées pour créer un menu vertical, comme ceci :
<ul>
<li><a href=""><img ...</></a></li>
<li><a href=""><img ...</></a></li>
<li><a href=""><img ...</></a></li>
</ul>Je n'arrive pas à "coller" les images. Il y a toujours, sous IE, une marge (1px ou plus) entres elles.
margin et padding sont à zéro, pour les "li", pour "ul", "list-style-type" à none...
En remplaçant la liste "ul" par une liste "dd", plus de problème.
Vous avez-une idée du pourquoi ?
_Yannick_ a écrit :
En remplaçant la liste "ul" par une liste "dd", plus de problème.
Ça n'a aucune espèce de pertinence.
Si vraiment la liste UL et/ou les LI posent problème, une solution mauvaise mais éventuellement acceptable serait de virer ce balisage, pour ne garder qu'une série de liens. De là à remettre un balisage différent donnant une information erronée (liste de définition)...
Pour le problème lui-même, il y a peut-être un lien avec ça:
http://www.alsacreations.com/article/lire/626-impact-rendu-indentation-code.html
Ou un problème lié aux flottants ou à du HasLayout dans IE, peut-être. Ou autre chose encore. Difficile de se prononcer, surtout sur un bug d'IE 6-7, sans voir la page elle-même.
Merci pour le lien, il s'agit du problème évoqué effectivement ici
Mais j'ai beau prendre en compte les suggestions, je n'arrive pas à coller les images du menu vertical. Le problème se produit sur IE6 et 7.
Ci-dessous, une version minimaliste pour que vous voyez le problème. J'ai mis les CSS dans le fichier html pour faciliter les essais.
Les images sont pas présentes, mais sous IE, un cadre se dessine à la place et permet de voir le soucis.
EDITION : trouvé !
Tout est ok en ajoutant, pour la balise 'li', ceci dans les CSS :
font-size: 0;
line-height: 0;
Modifié par _Yannick_ (18 Mar 2009 - 18:39)
Mais j'ai beau prendre en compte les suggestions, je n'arrive pas à coller les images du menu vertical. Le problème se produit sur IE6 et 7.
Ci-dessous, une version minimaliste pour que vous voyez le problème. J'ai mis les CSS dans le fichier html pour faciliter les essais.
Les images sont pas présentes, mais sous IE, un cadre se dessine à la place et permet de voir le soucis.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Nouveau fichier 2</title>
<style type="text/css" media="screen">
ul{
list-style-type: none;
margin:0;
padding:0;
height:72px;
}
li{
margin:0;
padding:0;
width:346px;
height:24px;
border:solid 1px;
}
img{
display:block;
width:346px;
height:24px;
}
</style>
</head>
<body>
<ul><li><img src="images/test.gif" width="346" height="24" /></li><li><img src="images/test.gif" width="346" height="24" /></li><li><img src="images/test.gif" width="346" height="24" /></li></ul>
</body>
</html>EDITION : trouvé !
Tout est ok en ajoutant, pour la balise 'li', ceci dans les CSS :
font-size: 0;
line-height: 0;
Modifié par _Yannick_ (18 Mar 2009 - 18:39)