CSS ingen A Hover på bildlänk i Box

Hello!

Har en sida uppbyggd med en massa boxar.
Där jag bl.a har lagt in att A hover skall byta färg.

Men nu är det så att även bildlänkarna påverkas av detta
och det kommer en linje under bilden när man drar muspekaren över denna.

Och detta vill jag ha bort, antingen genom att lägga in något i den boxen det gäller eller att lägga detta i headern.

Hur skall jag göra detta?

img {
a hover: #FFFFFF;
}?????

Tack för all hjälp

img {border: none; }

Men om du sen vill ha en ram runt någon/några bilder ändå så får du göra en class (om du har en eller flera på samma sida), ett id (om du har en på samma sida) eller lägga in det inline:

.bilder-med-ram { border: 5px solid #000; }
<img src="bild.jpg" class="bilder-med-ram" />

#bilder-med-ram { border: 5px solid #000; }
<img src="bild.jpg" id="bilder-med-ram" />

<img src="bild.jpg" style="border: 5px solid #000;" />

Exempelvis:

a:hover img{
  border: none;
}

...tar bort ramen runt bilder som man håller muspekaren över.
Sedan kanske du har två till omständigheter... Om du vill att bilderna ska bete sig likadant oavsett om man håller musen över eller inte kan man ha flera CSS locators, separerade med kommatecken. Sen kanske dina bilder alla har en CSS-klass? Lägg till den för att att eventuella andra bilder inuti A-taggar inte ska påverkas. Så får du till slut:

a:link img.minklass,
a:hover img.minklass{
  border: none;
}

Har kommit på vad felet är men, förstår nu inte riktigt hur man skall göra.

Här är ett exempel:

<div id='misc-wrapper'>
        <b:section class='misc' id='misc' preferred='no'>
<b:widget id='BloggerButton1' locked='false' title='' type='BloggerButton'>
<b:includable id='main'>
 <div class='widget-content'>
    <a href='http://www.blogger.com'><img alt='Powered By Blogger' expr:src='data:fullButton'/></a>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>
</b:section>

 </div>

Det visar sig att bilden har en margin på botten, och sedan när man för över muspekaren kontakter den i headern classen:

a:hover {
  text-decoration: none;
  background: #FF9da3; 
  font-size: 15px;
  color: #FFFFFF;
}

Och då ändrar bakgrunden färgen och det blir ett streck under bilden pga av margin.

Har försökt göra:

img {
  margin-bottom: 0;
}

Men verkar som att detta ignoreras.

Bilden är ett (replaced) inline element. IE skapar alltid en textrad för inline element även om däe inte finns text. Bilden hamnar då på textradens base-line som har plats för bokstävernas nergående staplar.

Lägg bilden på textradens botten med vertical-align eller ta bort textraden genom att visa bilden som block, display:block.

img {
  vertical-align: bottom;
}

Tack! det var detta som var svaret :)

Bilden är ett (replaced) inline element. IE skapar alltid en textrad för inline element även om däe inte finns text. Bilden hamnar då på textradens base-line som har plats för bokstävernas nergående staplar.

Lägg bilden på textradens botten med vertical-align eller ta bort textraden genom att visa bilden som block, display:block.

Kod:

img {
vertical-align: bottom;
}