By default, images align themselves to the baseline of any text they might end up sitting next to, which leaves space below them for the descenders of any letters (like the stick of a "p"). The code above aligns the image to the bottom of the descenders.

Pullo
—
2013-02-12T12:09:29Z —
#3

Thank you Ralph, both for the fix and for the concise explanation.Suffice to say, that worked a treat.

ralphm
—
2013-02-12T12:55:53Z —
#4

You're welcome. That issue used to drive me bonkers, and I think img {vertical-align: bottom;} was pretty much the first thing I learned about in these forums, so I have a soft spot for it now.

Thanks for posting such a clear working example. I wish everyone could do that!

polyhedra
—
2013-02-12T16:11:01Z —
#5

Okey that works great and you don't see the hover on the image but it still is there. Mabye try being more specific on your selectors. Adding an ID to your link will make your CSS only target that link and not the image.

1) do note that vertical-align:top ; works just as well. Essentially you just want to align the image with its white space.

Okey that works great and you don't see the hover on the image but it still is there. Mabye try being more specific on your selectors. Adding an ID to your link will make your CSS only target that link and not the image.

This is why THINKING OUT your code is important. Let's break it down:
a:hover{background-color:#AFD6FF; } will target the anchor element on hover. Any anchor element, and specifically THE anchor element, regardless of it's content. As selectors cascade DOWNWARDS you can select a (contained) tag based on it's container , but not the other way around.

if you gave the anchor explicit dimensions which were lager than the image you will see the BG color is still there!

so the solution is to code differently:

1) TARGETING THE ANCHOR. We need to add a class to anchor containing images , and set the background to transparent there.a.image:hover{background-color:transparent; } (note am NOT targeting the IMG, as the IMG has no baring to the bg color of it's parent element. Note also that a class might be better suited than an ID , far less heavy handed and allowable to use elsewhere int the code.

2) CHANGING THE SOURCE. Les desirable, but just as effective is to wrap all non IMG content of anchors in spans and then target via a:hover span. of course now you have to redo your markup and your CSS

3) ralphs solution. but if your anchors are ALWAYS text OR imgs, and they shringk wrap what raplh suggested is quite adequate.

Remember CSS is basically trickery. No solution is actually 'right' , it merely get the job done for that specific situation.. which is why situational thinking is important when coding.

polyhedra
—
2013-02-12T18:52:28Z —
#7

Thanks that was a good interesting read. Understanding that there are many different ways to go about CSS is important I agree. The more techniques you know the better "future proof" it will be. I like how you pointed out why setting a:hover img to transparent was not having an effect, haha I did not even notice.:p

Pullo
—
2013-02-12T19:14:13Z —
#8

Thank you dresden_phoenix, for taking the time to explain this in more depth.

In my current situation, the images with the unnecessary hover background are part of an image gallery generated by Wordpress.It would be a pain in the neck to add an individual class name to them by hand, the same goes for wrapping them in a span.Also, if the client wants to add more images, this is an unnecessary step that is likely to confuse.Therefore I opted to use Ralph's solution. It is simple to implement and des exactly what I want.

dresden_phoenix said:

Remember CSS is basically trickery. No solution is actually 'right' , it merely get the job done for that specific situation.. which is why situational thinking is important when coding.

I like this quote

Thanks again.

Stomme_poes
—
2013-02-12T19:16:38Z —
#9

dresden said:

1) do note that vertical-align:top ; works just as well. Essentially you just want to align the image with its white space.