28173 sujets

CSS et mise en forme, CSS3

Bonjour a tous,
je suis nouveau sur le forum et je débute en CSS

J'ai depuis la sortie d'IE7 un probleme de liste
En effet ma page étais optimisée pour IE6 et FF mais désormais IE7 ne l'interprete plus comme il faut ! Smiley fache
voici l'URL en question : voir le plan du site

J'ai 4 niveau de liste imbriquée et dans IE7 elle se chevauchent
Voici la feuille de style

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #0066CA;
}

ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
}
.acat{
	color:#FFF;
}
.afab{
	color:#000;
}
.agam{
	color:#000;
}
.aprod{
	color:#000;
}

#ListCategories li {
	background-color:#666;
	padding-left:50px;
	font-weight:bold;
	display:block;
	height:20px;
}
#ListFabricants li {
	background-color:#999;
	padding-left:100px;
	font-weight:normal;
	display:block;
	height:20px;

}
#ListGammes li {
	background-color:#CCC;
	padding-left:100px;
	font-weight:normal;
	display:block;
	height:20px;

}
#ListProduits li {
	background-color:#FFFFFF;
	padding-left:100px;
	font-weight:normal;
	display:block;
	height:20px;

}



Y a t'il un moyen/hack pour que le probleme soit corrigé ?

Quelqu'un a t'il déja rencontré ce probleme ?
Merci de votre aide.
Modifié par captusite (09 Feb 2007 - 15:03)
Bonjour,

Le validateur HTML du W3C me retourne 6125 (six mille cent vingt-cinq) erreurs et avertissements. Il y a peut-être une piste à creuser de ce côté là ?

De plus, je ne sais pas si tu as remarqué mais le rendu est très différent entre IE6 et Firefox. La FAQ du forum parle de ce problème (différence entre les navigateurs de retrait à gauche pour les listes).

Enfin, si j'augmente la taille du texte dans Firefox, ça chevauche dans tous les sens. Pas glop.

Je vois deux problèmes pour l'instant :
- des listes imbriquées non valides (un élément ul ne peut pas contenir directement un autre élément ul, mais ne peut avoir pour enfant que des éléments li) ;
- ces height: 20px qui trainent partout et qui ne servent à rien.
Merci florent
A priori le probleme venait des hauteurs spécifié a 20px
le reste des erreurs sont les balises Alt sur mes fleches (résolu) et les éléments ul les un à l'intérieur des autres.
Mais la, je sais que ce n'est pas conforme, mais je n'ai pas d'autres idées pour contourner le probleme. En tous cas, ca marche Smiley biggrin

Merci beaucoup