HTML/ CSS: A href exceeds linking image - how to avoid? - html

Question

I put three HTML-elements in a row using inline-block: 2 images linking to external websites (green boxes in the image below) and one div-tag with a search-form an a language selection.
The problem is now, that next to the images - on their right sides - there is also a hidden link. To make it visible I set text-decoration:underline and a blue background in active mode (see image).
How can I limit the a href to only the images?
HTML code looks like that:
<div id="logo">
<a href="http://website1.example">
<img src="image1.gif">
</a>
<a href="http://website2.example">
<img src="image2.gif">
</a>
<div id="headermodules">
<form class="search" method="post" action="index.php">
<input type="text" value="Suchen...">
</form>
<div id="languageselection">
<ul class="languageselection">
<li id="active_language">
Deutsch
</li>
<li>
<a href="http://localhost:81/en/">English
</li>
</ul>
</div>
</div>
<span style="width: 100%;"></span>
</div>
The CSS looks like that:
#logo
{
position: relative;
height:129px;
text-align: justify;
z-index: 0;
border-top: 0px solid #000;
}
#logo img
{
display: inline-block;
vertical-align: middle;
}
#logo span
{
width: 100%;
height: 0;
display: inline-block;
}
#headermodules
{
display: inline-block;
vertical-align: middle;
}

Answer 1

You should have the a elements styled to inline-block and not the img. The img should be display: block. I think that should do it.
#logo a { display: inline-block; }
#logo img { display: block; }