5 replies [Last post]
deronsizemore
deronsizemore's picture
Offline
Enthusiast
Last seen: 11 years 9 weeks ago
Timezone: GMT-5
Joined: 2007-01-18
Posts: 113
Points: 14

Hi - on this site http://kentuckygolfing.com I am setting up three books from Amazon under the "Recommended" section on the right sidebar. I have a border set around these anchors of #ccc and then I have a hover border set around them to #3080cb. The problem, as you can see is that the border does not wrap the whole image. What do I need to do to get the border to wrap the whole image?

Also, if you look closely, there is a small space (about 2px or so) between the bottom of the image and the border. Where is this small space coming from? I have no padding set on the images and I've also used * {padding: 0, margin: 0} to remove default padding/margins from elements.

Thank you.

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 8 years 22 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

try increasing the height of

try increasing the height of the li-element. it looks as though the anchor is trying to expand but is limited by the size of the li.

the 2px should be fixable by setting overflow: hidden; to the img element, or containing anchor

As a rule, I never touch anything more sophisticated and delicate than myself

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 10 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

You've targeted the anchor

You've targeted the anchor and not the image. The space below the image is reserved for descenders of a font. Setting the image to display: block or vertical-align: bottom will eliminate the space.
l#recommended li a img {
border: 2px solid #ccc;
vertical-align: bottom;
}

ul#recommended li a:visited img {
border: 2px solid #ccc;
}

ul#recommended li a:hover img {
border: 2px solid #3080cb;
}

ragamuffin
ragamuffin's picture
Offline
Leader
Iowa
Last seen: 12 years 8 weeks ago
Iowa
Joined: 2005-06-02
Posts: 691
Points: 0

wolfcry911 wrote:Setting the

wolfcry911 wrote:
Setting the image to display: block or vertical-align: bottom will eliminate the space.

actually...you will need to set both

- r

#recommended img { border: none; vertical-align:bottom; }

ul#recommended li a {
border: 2px solid #ccc;
display:block;
}

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 10 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

actually, you won't. There

actually, you will and you won't. There are a couple of things going on here. My comment about the space below images was a general one and either can generally be used to correct it. You're placing the display: block on the anchor, which is different than what I had suggested.

In this situation, there are two ways to solve the problem, and we each hit on one. The problem originally was that the images were protuding out of the inline anchor. I had addressed it by putting the border on the image rather than the anchor. The other way, as you've pointed out, is to set the anchor to display: block which would then encompass all it's inline children (assuming no dimensions were set). The vertical-align: bottom placed on the image will fix IE in either method.

deronsizemore
deronsizemore's picture
Offline
Enthusiast
Last seen: 11 years 9 weeks ago
Timezone: GMT-5
Joined: 2007-01-18
Posts: 113
Points: 14

Thank you everyone! That

Thank you everyone! That got me straightened out. I appreciate it.