Aller au contenu

Un lien qui déborde...


Tchesko

Sujets conseillés

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:

Lien vers le commentaire
Partager sur d’autres sites

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...

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...