ansaurus

Question

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

Answer 1

+2 A:

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.

ngroot 2010-09-28 23:18:36

I was afraid that would be the kind of answer I got... :( Thanks anyway

ClarkeyBoy 2010-09-28 23:20:24

Your span doesn't need a class name, just target it with "a > span {}"

Casey 2010-09-28 23:21:02

Guffa got the right answer - using float: left on the images solves the problem!! I was about to add all the spans in too..

ClarkeyBoy 2010-09-28 23:25:41

@Casey: I generally try to never have a span or a div that doesn't have an id or a class, since they're meaningless entities on their own.

ngroot 2010-09-28 23:39:03

@ngroot A containing element with a class name grants meaning to its children, ie: "ul.menu li a span {}"

Casey 2010-09-28 23:52:56

That narrows down its possible meanings, sure. It still doesn't tell you what the span represents. A span that would match the selector that you gave is some inline content within links in items in a list that presumably represents a menu. What the contents of the span within the link represent is missing.

ngroot 2010-09-29 16:52:48

I agree with ngroot here - I like everything to have just one meaning, not multiple possible meanings. However I personally try to make sure everything has (at least) one class, but tend not to use id as a rule. I believe this enables scalability that, through the id attribute, would not be available. For example you can use classes multiple times in one page, but not ids.

ClarkeyBoy 2010-10-01 18:18:19

Answer 2

+4 A:

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

Guffa 2010-09-28 23:22:05

Great thank you thank you thank you! Saves me a lot of time and effort. I tried display: block on the images (as advised on another site) but it never even occurred to me to try float.

ClarkeyBoy 2010-09-28 23:24:49

You may find that using the background-image and background-position properties is an even better solution. It depends on what the content of the images is I suppose.

Casey 2010-09-28 23:55:23

@Casey: Good point. Background images can't be resized though, which might be a limitation in this case.

Guffa 2010-09-29 00:22:00

The inability to resize was the problem I was facing somewhere else - I had an img with class="expand". I tried to set the src from css (so the src was only specified once and so a change of image would only require one change). However I found that the only ways were to set the src in each case or to use background-image - thats where I discovered that limitation. To be honest, unless I am using the same image for, say, 200 images but only want to change the image in 100 of those, I could just replace the actual image file anyway, and rename the original.

ClarkeyBoy 2010-10-01 18:22:25

ansaurus

tags:

views:

answers:

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

related questions