Lien border-bottom décale image

Bonjour,

J'ai mis un border-bottom sur mes liens de texte mais ça décale les images qui ont des liens dans FF et IE8.

Passez votre souris sur le logo et vous verrez que sur hover, l'image se replace.

Merci de m'aider

Exemple:
http://demo.suitevox.com/jardinsmillen/test/index.html

*{ margin:0; padding:0;}
body{ background-color:#645a4e; color:#5e5f62l; font-weight: normal; font-style: normal; line-height:normal; font: 18px 'CorporateCondensedRegular', sans-serif; font-size-adjust: 0.56; text-align:justify;}
p{padding:0 30px 0 30px;}
a img{border:0; text-decoration:none;}
a:link, a:visited, a:active{ color:#df7e03; text-decoration:none; border-bottom:dotted 1px;}
a:hover{ color:#df7e03; text-decoration:none; border:0;}
h1, h2, h3, h4, h5, h6{font-size:1px; font-weight: normal; text-align:left}
h1{ background:url(../img/bullet-heading.gif) no-repeat 15px 30px; font-size:32px; color:#7a2019; padding:25px 0 0 60px;}
.floatLeft{ float:left;}
.clearBoth{ clear:both;}

#containerBig{ background-color:#fff; overflow:hidden;}
#lang, #header, #container01, #footer{ margin:0 auto;}
#header, #container01, #container02, #footer{width:980px;}
#logo{float:left; width:300px;}
#lang, #headerImgAcc{float:right; width:680px;}
#lang{height:30px; text-align:right; padding-top:10px;}
#lang a{color:#5d5353; text-decoration:none; border:0;}
#lang a:hover{color:#df7e03; text-decoration:none; border-bottom:dotted 1px;}
#slogan01{float:right; width:680px; height:100px; background:url(../img/slogan-01.gif) no-repeat; text-align:right;}
#slogan01 h1{ color:#fff; font-size:32px; background:none; text-align:right; padding:40px 20px 0 0; }
#container02{float:left; padding-bottom:30px; background: url(../img/bg-main.gif) repeat-y; overflow:hidden;}
#container03{float:right; width:680px;}
#container03 #accImg{float:right; width:284px; padding-left:30px;}
#header{ width:980px;}
#footerBig{ clear:both; background:url(../img/bg-bottom.gif) repeat-x;}
#footer{height:15px; padding:132px 0 15px 0; color:#b5acac; font:10px Arial, Helvetica, sans-serif}
#copyright{float:left; width:300px;}
#design{float:right; width:300px; text-align:right;}

Salut,

Le problème est plutôt simple. Quand tu ajoutes un border, ça joue sur le height / width de ton element. Dans ton cas, tu passes d'une bordure à rien. Donc ça décalle et c'est normal.

Il y a deux moyens de régler ça simplement. Tu fais une exception pour le lien du menu et tu enlèves la bordure que tu as mis à tous les liens.

OU

Tu ne mets que la bordure au lien du container3.

Donc on aurait
a { color:#df7e03; text-decoration:none; border-bottom:dotted 1px;}
#logo a { border:none; }

OU
#container03 a { color:#df7e03; text-decoration:none; border-bottom:dotted 1px;}


À ta place, je prendrais la deuxième option. Il n'y a ( dans ton exemple ) que les liens dans le texte que tu veux affecter avec ton border-bottom. Le logo et le menu ne devrait pas avoir ce CSS là. Ainsi, en spécifiant seulement les liens du container03, ça applique le CSS seulement aux liens dans le contenu / texte.

J'espère que ça répond à ta question.

Merci Sorano,

Par contre si je mets un lien à une image dans le container03, j'aurai encore le même problème J'ai fais un test justement en mettant un lien sur l'image de la dame.

Tu peux mettre des bordures transparente à tes éléments. Comme ça la bordure va exister mais ne sera pas visible.

a { border:1px solid #000 }
a:hover { border-color:transparent }

Dans cet exemple là, la bordure va exister mais ne sera plus visible et par conséquent, rien ne bougera.

De plus, à moins d'insister pour le "dotted", tu peux utiliser le text-decoration:underline qui ne causerait pas non plus de soucis de décallage.

J'espère que ça t'aidera.

Ce n'est pas un problème de faire un style spécifique pour le div #logo.

Pourquoi peut-on faire un style spécifique pour le div #logo et lorsque l'on applique ce même style pour le a img{} pour qu'il influence toutes les images avec un lien, ça ne fonctionne pas?

C'est ça que je veux faire

Merci Sorano.

Je ne suis pas certain de comprendre.

Le style actuel s'applique sur tous les liens.

a:link, a:visited, a:active {
   border-bottom:1px dotted;
   color:#DF7E03;
   text-decoration:none;
}

Alors c'est sur que si tu appliques un CSS sur a img ça ne fonctionnera pas car on parle pas du même élément. Un lien versus une image; c'est comme vouloir enlever une bordure à un élément qui en a déjà pas, ça fait donc rien.

Donc, si je reprend depuis le début et que tu veux que seulement le texte ait le style avec la bordure, tu as encore plusieurs options avec tes éléments et tes sélecteurs.

Par exemple dans ton code les liens du texte sont tous dans un <p>. Tu pourrais donc écrire :

a { text-decoration:none; }

p a { border: 1px dotted #DF7E03; }

Ainsi, les a img ( qui ne sont pas dans un p ) comme ton logo et l'image de la madame dans ton container03 ne seront pas affecté.

J'espère que ça t'aide encore une fois