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


Tags: html,css,image,href

Problem :

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?

Problem: a href link exceeds image which it was meant for

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">
                <a href="http://localhost:81/de/">Deutsch</a>
            </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;
}


Solution :

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

    CSS Howto..

    How to create an on/off switch with Javascript/CSS?

    How to style object when the user clicks it

    JavaScript: how do I make a tooltip follow the cursor *and* flip on collision?

    CSS: How to do image change on rollover

    How to make CSS float left not bend around when browser width is shrunk

    How to remove style type css wordpress from header?

    How to make div height fit the content using css

    Color not showing up in Safari but everything is working in MSIE, FF and Chrome browsers

    Showcase the first n-items in a bootstrap grid

    How to create a div with a diagonal (or angled) top line

    How to set a single value of transform while leaving the other values?

    How can I make this little javascript work with 2 textarea elements without killing the CSS?

    CSS: how to put one image and one block with two

    in one line not using float

    Cutting out the middle portion of an image (example shown)?

    CSS: How can I right-justify text against centered text?

    How can I style a button to look the same as the home button in Google Chrome with CSS? [closed]

    How to style a button's font in CSS?

    How to create an absolutely positioned submenu which appears on css hover

    How to link index.html to css file for github page

    How to make a CSS file valid?

    How do I get a div to fill the width regardless if the brower window is shrunk?

    jQuery UI how to avoid submit button getting css classes?

    How to reverse a repeated image on blogger

    How to modify programmatically with javascript the css ::before and ::after [duplicate]

    How can I workaround this CSS anomaly?

    How to refer to a child class CSS

    How to grows up a div height with a table that has your rows added dynamically?

    How can I style a JavaFX SplitMenuButton in CSS

    How to indent input controls for a nested HTML list using CSS to a single column

    How to select text under multiple “div-li-a href” using css in selenium web driver