28173 sujets

CSS et mise en forme, CSS3

Bug IE7 sur lien display:block

Bonjour,

J'ai utilisé sur un site des liens a:hover avec display:block
pour pouvoir attribuer une couleur de background quand on
survole le lien. Pas de soucis sour IE6 Mozilla Opera mais cela ne fonctionne pas sous IE7...Quand on survole les liens toute la page
tremble ! voici le code si qqun peut m'aider... d'avance merci !



[b]CSS[/b]

.blocServices {
overflow:auto;
width:100%;
background:#ededed; 
font-size:10px;
font-weight:bold;
}
.colServices {
float:left;
width:50%;
text-align:left;
}
.blocServices a {
display:block;
padding-left:10px;
border-left:4px solid #ccc;
height:15px;
font: bold 9px verdana, arial, sans-serif;
color:#999;
text-transform:uppercase;
}
.blocServices a:hover {
color:#000;
height:15px;
text-decoration:none;
border-left:4px solid #000;
background:#ccc;
}

[b]HTML[/b]

<div class="blocServices">
    <div class="colServices">
    <a href="#">meteo</a>
    <a href="#">flux rss</a>
    <a href="#">lettre eco</a>
    </div>
    <div class="colServices">
    <a href="#">newsletter</a>
    <a href="#">archives</a>
    <a href="#">forums</a>
    </div>
</div>
Hello,

Je n'ai pas réussi à reproduire le problème sous IE7. Par contre:

1. Avec Firefox, le clic sur les liens fait apparaitre une «bordure» en pointillés (en fait générée via la propriété outline qui influe sur la largeur des liens et donc du contenu... et on se retrouve avec des apparitions intempestives de barres de défilement.
Correction -> on utilisera overflow: hidden plutôt que overflow: auto pour contenir le dépassement des flottants.

2. Avec Internet Explorer 6 et 7, les deux colonnes se retrouvent l'une en dessous de l'autre, à cause d'un arrondi des valeurs en pixels un peu aléatoire (en gros, 50%+50% fera non pas pile 100% du nombre de pixels disponibles en largeur dans le conteneur, mais 100%+1px... et donc ça ne tient plus, et la deuxième colonne passe à la ligne.
Correction -> on évitera de caser des flottants sur pile 100% de la largeur.

Exemple de page corrigée:
<!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=UTF-8" />
	<title>Test</title>
	<style type="text/css">
	.blocServices {
		overflow:hidden;
		width:100%;
		background:#ededed;
		font-size:.7em;
		font-weight:bold;
	}
	.col1 {
		float:left;
		width:50%;
	}
	.col2 {
		margin-left: 50%;
	}
	.blocServices a {
		display:block;
		padding-left:10px;
		border-left:4px solid #ccc;
		height:15px;
		font: bold .9em verdana, arial, sans-serif;
		color:#999;
		text-transform:uppercase;
	}
	.blocServices a:hover {
		color:#000;
		height:15px;
		text-decoration:none;
		border-left:4px solid #000;
		background:#ccc;
	}
	</style>
</head>
<body>
<div class="blocServices">
    <div class="colServices col1">
    <a href="#">meteo</a>
    <a href="#">flux rss</a>
    <a href="#">lettre eco</a>
    </div>
    <div class="colServices col2">
    <a href="#">newsletter</a>
    <a href="#">archives</a>
    <a href="#">forums</a>
    </div>
</div>
</body>
</html>
Sujet clos
Aller à