28172 sujets

CSS et mise en forme, CSS3

Padding a -> IE

Bonjour,
Quelqu'un pourrait me rapeller pourquoi sur IE un block conteneur
ne s'adapte pas à la taille d'un <a> dont on a changé le padding ?
J'ai peut-etre mal vu le comportement mais ca m'a l'air de se passer comme ca
tu parle d'un block ?? Smiley murf Smiley confus

du doit parler d'un code dans le genre :
<div id="block">
<a href="http://quelquepart.com">le libellé </a>
</div>

Smiley rolleyes

??
C'est ca le height du div a pas l'air de s'adapter à celle du <a>
Par exemple avec
CSS:
a {
 padding: 5px;
 border: 1px solid gray;
}
HTML:
<div>
<a href="http://quelquepart.com">le libellé</a>
</div>

Sous IE on voit pas les bordures du <a>
ouais je m'en doutais ...

les div sous IE6 ne respect pas la norme W3C
ta une solution en mettant le padding sur ton div et en enlevant le padding sur le A si et seulement si ton div contient seulement un "a"
il passe sous tout les navigateurs normalement a tester

Je sais c'est pas propre mais bon .... Smiley cligne
dotmessy a écrit :
...les div sous IE6 ne respect pas la norme W3C...

Ca on avait vu, si il y avait que les div
dotmessy a écrit :
ta une solution en mettant le padding sur ton div et en enlevant le padding sur le A si et seulement si ton div contient seulement un "a"

Mon but étant d'allumer un bouton quand on passe dessus sans JS
c'est pas une solution pour moi. Une autre suggestion peut-etre ?
Bonjour,

Je ne suis pas certain d'avoir réellement saisi le problème, mais à mon avis il faut traiter l'élément "a" comme un élément de type "block" ou "inline-block".

Solution "inline-block" (que je préfère) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html dir="ltr" lang="fr" xml:lang="fr" xmlns ="http://www.w3.org/1999/xhtml">

<head>

<meta content="text/html; charset=ISO-8859-15" http-equiv="content-type" />

<meta name="language" content="fr" />

<meta http-equiv="Content-Language" content="fr" />

<style type="text/css" media="screen">

#bloc-conteneur {word-spacing:-4px;} /* pour éviter un espace entre les éléments "a" */

a {
display:inline-block;
padding:5px;
background:yellow;
word-spacing:0; /* pour supprimer l'héritage de #bloc-conteneur */
}

a:hover {background:red;}

</style>

</head>

<body>

<div id="bloc-conteneur">

<a href="#">Lorem ipsum</a>
<a href="#">Lorem ipsum</a>
<a href="#">Lorem ipsum</a>
<a href="#">Lorem ipsum</a>
</div>

</body>

</html>


Solution "block" :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html dir="ltr" lang="fr" xml:lang="fr" xmlns ="http://www.w3.org/1999/xhtml">

<head>

<meta content="text/html; charset=ISO-8859-15" http-equiv="content-type" />

<meta name="language" content="fr" />

<meta http-equiv="Content-Language" content="fr" />

<style type="text/css" media="screen">

a {
display:block;
float:left;
padding:5px;
background:yellow;
}

a:hover {background:red;}

</style>

</head>

<body>

<div id="bloc-conteneur">

<a href="#">Lorem ipsum</a>
<a href="#">Lorem ipsum</a>
<a href="#">Lorem ipsum</a>
<a href="#">Lorem ipsum</a>
</div>

</body>

</html>
Tu avais bien compris ma question et ta
réponse est tout à fait satisfaisante merci Smiley smile
Sujet clos
Aller à