3

For a site I'm working on, I'd like to have a dotted outline appear around links when they are focused/hovered/active. I'd like this to happen for text and image links.

The issue I have is that whilst my code works great in Firefox and IE, in Chrome 7.0.517.41 the dotted outline is the same height as my text, not the height of the image.

Sample code:

<!DOCTYPE html> 
<html lang="en"> 
    <head>
        <style type="text/css">
            BODY { font: 15px/1.5 sans-serif; }
            a:focus, a:hover, a:active { outline: 1px dotted #11aa22; }
        </style>
    </head>
    <body>
        <a href="#">
            <img src="http://sstatic.net/stackoverflow/Img/wmd-buttons.png" />
        </a>
    </body>
</html>

This is annoying. As a workaround I use javascript to apply a class to distinguish anchors containing images, and ensure that the outline for anchors containing images is applied to the anchor, not the image:

a:focus, a:hover, a:active { outline: 1px dotted #11aa22; }
a:focus.img, a:hover.img, a:active.img { outline: none; }
a:focus img, a:hover img, a:active img { outline: 1px dotted #11aa22; }

And in my document ready

$('a:has(img)').addClass('img');

Is there a better way to do this?

SamStephens
  • 5,721
  • 6
  • 36
  • 44
  • This also is an issue in Safari on PC (but not Opera). – aslum Dec 02 '11 at 16:50
  • For documentation sake, this works if the outline style is set to "auto". For any other style applied (such as "solid", "dotted" etc), Chrome shows this annoying and inconsistent behavior. Similar issue posted here: http://stackoverflow.com/questions/17146707/outline-is-drawn-incorrectly-on-chrome-if-outline-style-is-set-to-solid-and-n – tanushree Jun 17 '13 at 15:42

1 Answers1

6

You have to set links as blocks for they wrap images, as 

a { display:inline-block; }

eg.

MatTheCat
  • 18,071
  • 6
  • 54
  • 69
  • this can affect the layout is ways you don't want – Moin Zaman Oct 20 '10 at 07:38
  • So why is this only different in Chrome? ... also, did you mean to put something in your answer after eg. :-) – SamStephens Oct 20 '10 at 07:38
  • @Moin, yeah, I'm not keen on changing the display style of my a – SamStephens Oct 20 '10 at 07:39
  • 1
    inline-block won't change the layout. – MatTheCat Oct 20 '10 at 07:41
  • 1
    I agree with MatTheCat. I use `display: block;` to have an `a` tag cover the entire width and height of its container all the time. – ClarkeyBoy Oct 20 '10 at 08:29
  • Contrariwise `display: block;` will cause links take all width available. You can avoid this using `float`which display elements as blocks but be careful with layout too ^^ – MatTheCat Oct 20 '10 at 08:33
  • Yeah I actually want them to take all width, and height... I use them in a menu made up of a `ul` and lots of `li` tags. I want the user to be able to click anywhere within them to go to the URL in the `a` tag. – ClarkeyBoy Oct 20 '10 at 08:36
  • Did a little research and tried this in a few browsers, and it works for me. Thanks Mat. @Moin: I'd be keen to know exactly what you mean, I couldn't see any side effects. – SamStephens Oct 20 '10 at 09:14
  • I'll second that - I dont know of any side effects that this technique could have on anything else... It may well be that it has big side effects in IE5 or something - but lets be honest... who actually cares about anything prior to IE7 anyway. – ClarkeyBoy Oct 20 '10 at 09:24
  • My targets are pretty much IE7/8, Chrome latest, Firefox 3.5, Safari latest. It's a personal project, and I just don't have the time to test every browser. – SamStephens Oct 20 '10 at 22:11
  • This prevents links containing text from wordwrapping, it's pretty nasty. I've gone back to the workaround I detailed in the question. – SamStephens Oct 26 '10 at 06:26