Décalage de liste et de liens avec IE

simous · 7 Septembre 2006

Bonsoir toutes et à tous,

Me voilà confronté à un problème avec IE, c'est pas nouveau certes mais un peu ennervant.

Le code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
	<title>test</title>
	<link rel="stylesheet" type="text/css" href="test.css" />
</head>

<body>

 <ul>
				<li><a href=#>test 1</a></li>
				<li><a href=#>test 2</a></li>
			   <li><a href=#>test 3</a></li>
				<li><a href=#>test 4</a></li>
				<li><a href=#>test 5</a></li> 
			</ul>

</body>
</html>

La CSS :

ul {
	list-style: none;
	margin: 0px;
	padding: 0px 5px;
	}

li a {
	list-style: none;
	height: 44px;
	width: 83px;
	padding: 60px 0px 0px 0px;
	margin: 0px;
	float: left;
	clear: none;
	border: 1px solid #FF0000;
	color: #000;
	text-decoration: none;
	display: inline;
}

li a:hover {
	color: #FE9900;
	height: 44px;
	width: 83px;
}

Le résultat : http://www.kooliss.net/test/

Chaque liste se décale vers le bas avec IE.

Je ne comprends vraiment pas.

Bien évidemment, j'ai effectué une recherche, je n'ai pas trouvé mon bonheur.

Merci de votre aide

PS : désolé si ce problème est connu et classique, mais je ne trouve pas de solution.

aymericj · 7 Septembre 2006

Bonsoir simous,

Quelques petites erreurs dans ton css, vvoici une version modifiée :

ul {
	list-style: none;
	margin: 0px;
	padding: 0px 5px;
	}

li {float: left;}	

li a {
	display:block;
	list-style: none;
	height: 44px;
	width: 83px;
	padding: 60px 0px 0px 0px;
	margin: 0px;
	clear: none;
	border: 1px solid #FF0000;
	color: #000;
	text-decoration: none;
}

li a:hover {
	color: #FE9900;
	height: 44px;
	width: 83px;
}

En fait dans le code que tu proposais, le float était attribué à l'élément " li a" et non pas à l'élément "li".

J'ai ajouté un display:block à l'élément "li a" pour changer son comportement parce que c'est un élément naturellement "en ligne".

Wala.

Aymeric

simous · 7 Septembre 2006

:thumbsup:

Excellent !!

Je savais que j'étais passé à côté de quelque chose mais je ne voyais pas quoi ! Surtout que ça fonctionnait avec Firefox !!

Un grand merci aymericj

Connexion

Décalage de liste et de liens avec IE

Sujets conseillés

simous

aymericj

simous

Veuillez vous connecter pour commenter

Parcourir

Activité