Un lien qui déborde...

Tchesko · 2 Novembre 2004

Bonjour,

Quelqu'un à t'il une solution à ce problème?

Il s'agit d'une simple liste de liens en texte avec un effet a:hover.

IE ne faisant jamais rien simplement, il faut lui renseigner une valeur width pour qu' il considère le bloc parent et non le seul texte comme zone de survol.

Jusqu'ici, tout va bien.

Seulement voilà, j'utilise un padding pour que mon texte ne soit pas collé au bord de mon bloc. :whistling:

Et chose étrange, IE répond correctement à ma demande alors que Fireworks et Opera craquent en faisant déborder mon lien en dehors du cadre prévu par mon UL. (le débordement correspond au double de mon padding-left). :blink:

Pourquoi?

Mon CSS:

#nav_centre{
	font: 11px Verdana, Arial, Helvetica, sans-serif;
	padding:0px;
	margin:0px;
	width:170px;
	border: 1px solid #000000;
}

#nav_centre UL{
	padding:0px;
	margin:0px;
	display:block;
}

#nav_centre LI {
	padding:0px;
	margin:0px;
	list-style-type: none;
	border:none;
}

#nav_centre A{
	display: block;
	color: #666666;
	text-decoration: none;
	line-height:50px;
	margin:0px;
	padding-left:10px;
	width:100%;
}

#nav_centre A:hover {
	background-color: #F7FAF5;
	border-top: 1px solid #B3B3B3;
	border-bottom:  1px solid #B3B3B3;
	line-height:48px;
}

Et le classic XHTML :

<?xml version="1.0" encoding="iso-8859-1" ?>
<!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" lang="fr" xml:lang="fr">
<head>
<title>essai de nav</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link href="styles/nav_iso.css" rel="stylesheet" type="text/css" />
</head>

<body>
<ul id="nav_centre">
<li><a href="#">lien 1</a></li>
<li><a href="#">lien 2</a></li>
<li><a href="#">lien 3</a></li>
<li><a href="#">lien 4</a></li>
</ul>
</body>
</html>

Ne trouvant pas de parades, j'ai supprimé le padding et ajouté des devant mes textes... :nono: Pour cette fois ça passe, mais je ne pourrais m'en contenter longtemps...

Si quelqu'un à une idée... Qu'il n'hésite pas :hypocrite:

LaurentDenis · 2 Novembre 2004

Remplace le width:100% par width:160px; (les 170px du conteneur moins le padding).

Tchesko · 2 Novembre 2004

Hum...

Déja tésté, cela résoud le problème sous Mozilla, mais sous IE(6) je me retouve avec un espace à droite, l'effet est appliqué sur les 160px et plus sur le bloc (qui fait 170px)...

:nono:

LaurentDenis · 2 Novembre 2004

Utilise un hack pour spécifier la largeur incorrecte pour IE, par exemple:

a {
width: 170px;
}

html>body a {
width: 160px;
}

Ou:

a {
width: 160px  !important;
width: 170px;

Ou utilise la propriété box-sizing pour Opera et son équivalent pour Mozilla afin de leur faire utiliser le box-model Microsoft sur les <a>, dans lequel tu pourras utiliser uniquement width:170px; ou width: 100%;

a {
box-sizing: border-box;
-moz-box-sizing: border-box;
}

Ou encore le doctype switching pour faire passer tous les navigateurs en Mode Quirks qui forcera également le box model Microsoft...

Tchesko · 2 Novembre 2004

OUH!OUH!

Un grand merci, le B.M.H. fonctionne parfaitement

:wub:

C'est domage que l'on en soit encore a faire du tripotage... Ca me rappelle les grandes heures du DHTML...

ENcore merci

Connexion

Un lien qui déborde...

Sujets conseillés

Tchesko

LaurentDenis

Tchesko

LaurentDenis

Tchesko

Veuillez vous connecter pour commenter

Parcourir

Activité