CODEWITHSUNDEEP
htmlcssgoogle-chromeunderline
ClarkeyBoy
ClarkeyBoy

Reputation: 5010

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

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.

Upvotes: 4

Views: 5302

Answers (4)

Santiago Diaz
Santiago Diaz

Reputation: 31

I tried eveything in the comments to no avail, what worked for me was modifying div which contained all the tags. I have an inkling that they are only underlined when in their absolute default position. Here was the div each tag was wrapped in, no other tricks were applied.

.myDiv {
    display: flex; 
    justify-content: center;
    align-items: center;
}

Upvotes: 0

Rudolf Real
Rudolf Real

Reputation: 2028

I was running in the same doubt. The text-decoration set to none works for me:

<a href="..." style="text-decoration:none;">
    <img src="...">
</a>

As was said befor, you can use a class to make this more generic.

Nice question by the way, It looks totally strange in my website when I saw some minus at the bottom of images. Then I realize that was an underlying.

Upvotes: 0

Guffa
Guffa

Reputation: 700472

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

Upvotes: 11

ngroot
ngroot

Reputation: 1176

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.

Upvotes: 2

Related Questions