Webmaster Hub > Un lien qui déborde...

Version complète: sur le forum Webmaster Hub : Un lien qui déborde...

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

Tchesko

mardi 2 novembre 2004 à 16:52

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.

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

Pourquoi?

Mon CSS:

CODE

#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 :

CODE

<?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 &nbsp 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

LaurentDenis

mardi 2 novembre 2004 à 17:16

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

Tchesko

mardi 2 novembre 2004 à 17:24

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

mardi 2 novembre 2004 à 17:32

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

CODE

a {
width: 170px;
}

html>body a {
width: 160px;
}

Ou:

CODE

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%;

CODE

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

mardi 2 novembre 2004 à 17:45

OUH!OUH!

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

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

ENcore merci

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.