Jump to content
Sign in to follow this  
Tchesko

Un lien qui déborde...

Rate this topic

Recommended Posts

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:

Share this post


Link to post
Share on other sites

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:

Share this post


Link to post
Share on other 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...

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...