CSS linked images are being underlined ("a" display is set to block)

Question

I have a menu for which I wanted all of the space around the text, within each individual item, to take the user to the specified page. I looked around on the web and found that the best solution is to set the "a" display to block, as follows:

a {
    display: block;
    height: 100%;
    text-decoration: underline;
}

I have managed to get this working perfectly but want to put images in some of them - like a calendar icon for the events option. I notice it is now underlining the links too. Is there any way to get rid of this? The links have padding-right set to 5px if that helps narrow down the cause / solution.

So all the relevant code is as follows:

a {
    display: block;
    height: 100%;
    text-decoration: underline;
}
a > img {
    text-decoration: none;
    border: none;
    padding-right: 5px;
    width: 1.8em;
    height: 1.8em;
}

Many thanks in advance.

Regards,

Richard

PS It is Google Chrome in which I am having this problem - I have not currently checked it in any other browsers.

Answer 1

Images are inline elements, so they are treated as part of the text. It's not the image that is underlined, it's the text that contains the image that is underlined, so it doesn't help to prevent underlining for the image.

You can turn the images into block elements by floating them, then they are not part of the text:

a > img {
    float: left;
    border: none;
    padding-right: 5px;
    width: 1.8em;
    height: 1.8em;
}

Answer 2

I think your best option is to get rid of the underline text-decoration property for the a element, put the link text in a span with common class, and apply text-decoration: underline to that class.