28173 sujets

CSS et mise en forme, CSS3

[Resolu] Erreur CSS sous IE (marge en trop)

Bonsoir,

Je souhaite afficher un alphabet dans une div afin de m'en servir pour un moteur de recherche. Mon CSS s'affiche correctement sous FF mais pas sous IE qui semble ajouter une marge de 2px sur le coté gauche du div "alpha".

Voici le 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
<!--
/* Body */

body{
	font:small Verdana, Arial, Helvetica, sans-serif;
	padding:0px;
	margin:0px;
}

/* Alphabet */

#alpha {
	width:286px;
        background:#CCCC33;
	padding:0px;
	margin:0px;
}

#alpha a {
	text-decoration: none;
        color: #ffffff;
	padding:4px 0px 4px 0px;
	display:block;
	background:#CC0000;
}

#alpha a:hover {
	text-decoration: none;
	background: url(userbarhover.gif) center;
	background: #990000;
}

#alpha h1 {
        font: 9px Verdana, Arial, Helvetica, sans-serif;
	float: left;
	margin: 2px 0px 0px 2px;
	width:20px;
	text-align:center;
}

/* Hack */

.spacer {
	clear: both;
}
-->

</style>
</head>

<body>
<div id="alpha">
<h1><a href="#">A</a></h1>
<h1><a href="#">B</a></h1>
<h1><a href="#">C</a></h1>
<h1><a href="#">D</a></h1>
<h1><a href="#">E</a></h1>
<h1><a href="#">F</a></h1>
<h1><a href="#">G</a></h1>
<h1><a href="#">H</a></h1>
<h1><a href="#">I</a></h1>
<h1><a href="#">J</a></h1>
<h1><a href="#">K</a></h1>
<h1><a href="#">L</a></h1>
<h1><a href="#">M</a></h1>
<h1><a href="#">N</a></h1>
<h1><a href="#">O</a></h1>
<h1><a href="#">P</a></h1>
<h1><a href="#">Q</a></h1>
<h1><a href="#">R</a></h1>
<h1><a href="#">S</a></h1>
<h1><a href="#">T</a></h1>
<h1><a href="#">U</a></h1>
<h1><a href="#">V</a></h1>
<h1><a href="#">W</a></h1>
<h1><a href="#">X</a></h1>
<h1><a href="#">Y</a></h1>
<h1><a href="#">Z</a></h1>
<div class="spacer"></div>
</div>
</body>
</html>


Merci de votre aide Smiley cligne
Modifié par MasterPingouin (25 Apr 2007 - 07:21)
Bonjour,

Pour éviter le bug sous ie6, ajoute un display: inline; à #alpha h1.
D'ailleurs, une liste n'aurait elle pas été plus judicieuse à la place des h1? Smiley rolleyes
Modifié par ghost (25 Apr 2007 - 02:22)
ghost a écrit :

D'ailleurs, une liste n'aurait elle pas été plus judicieuse à la place des h1? Smiley rolleyes


Oui sûrement! La méthode des <h1> est employé sur le site de Radioblog et j'ai trouvé ça amusant (^-^).

Merci de ton aide, IE ne fait plus de caprices Smiley cligne

-> Résolu
Sujet clos
Aller à