Member Avatar for Woobag

Hey, Im trying to do a CSS rollover border color change for my images (which are links). Problem is, the border only partly covers the image, going about half way up the image on the sides, and not covering the top at all.

Id post some code, but considering the easy nature of what im trying to do i didnt think it would be necessary.

Thanks for your help,
-ryan

  • 3 Contributors
  • 8 Replies
  • 136 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by FC Jamison

Dani AI

Generated

A partial border around a linked image usually means the border is being drawn on an inline box that does not match the image's rendered box (baseline gaps, line-height, or quirks-mode issues). A robust, cross-browser fix is to put the border on the anchor itself, make the anchor wrap the image as a block-level box, and make the image a block so there is no inline white-space or baseline offset.

Example (attach a class to the <a> and keep the image clean):

a.thumb {
  display: inline-block;
  line-height: 0;
  padding: 0;
  border: 1px solid #999;
  text-decoration: none;
  zoom: 1;       /* gives hasLayout in old IE */
  *display: inline; /* legacy IE6/7 hack if needed */
}

a.thumb img {
  display: block;
  border: 0;
}

Key troubleshooting points:

  • Put the ID/class on the anchor (not the IMG) so :hover applies to the element that actually gets hovered.
  • Remove any HTML border="..." or inline style on the image; those can override stylesheet rules.
  • Ensure a standards DOCTYPE is present so browsers use consistent box math (e.g., <!DOCTYPE html>).
  • If IE6 still misbehaves, zoom:1 or making the anchor display:block (or using the inline-block fallback shown) forces Layout/Repaint and usually fixes the half-border issue.
  • If all else fails, use a small JS hover-class fallback (as suggested) or the image-swap approach mentioned for maximum compatibility.

Use the browser inspector to check computed styles and see which rule is winning; that will quickly show whether the border is on the anchor or the image and why the top/side edges are being clipped.

Recommended Answers

All 8 Replies

Member Avatar for FC Jamison

...and

a:link img, a:visited img { border: 1px solid #000000 }
a:hover img { border: 1px solid #FF0000 }

didn't work?

Member Avatar for Woobag

Yes, this works. Thanks for the help.

I saw something reference the "img" part in CSS, but i couldnt apply it to work correctly in my situation.

Sweet, and since i wanted to name it, i came up with this.

#car:link img, #car:visited img { border: 1px solid #000000 }
#car:hover img { border: 1px solid #FF0000 }
Member Avatar for FC Jamison

You might have some cross-browser compatibility issues with that solution.

Member Avatar for Woobag

You guessed it. In I.E. the image links are the lighter gray, and do not change colors. The image links at the top of my page (this page is included by a index.php - for example) are showing in the purple "visited" color as the would do so normally. I think i can solve the latter of those two problems, but what do you think about correcting the first?

Member Avatar for FC Jamison

If you've named the image, try

a:link img#car, a:visited img#car { border: 1px solid #000000 }
a:hover img#car { border: 1px solid #FF0000 }
Member Avatar for Spector

why dont you just make diffrent images for rollover?

Member Avatar for Woobag

Rollovers are more complicated, and customizing them on the fly is a bit of a pain. I am going for a style and it can be acheived both ways, and this way is the easiest.

Edit- I still get no "hover" functionality in IE6.

Member Avatar for FC Jamison

ok...on my photo gallery page (), I use a combination of css and javascript to achieve this effect.

<img src="image.jpg'" class="rolloverOff"  onMouseOver="this.className='rolloverOn'" onmouseout="this.className='rolloverOff'" /></a>
.rolloverOff {
  border: 1px solid #999999;
}

.rolloverOn {
  border: 1px solid #FFFFFF;
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.