1

I'm having a hard time researching this problem since I don't know exactly what the box around the image link is called.

I have this simple, basic code in a text widget on a WordPress site:

<a href="https://www.facebook.com/ShiversShavedIce"><img src="http://shiversshavedice.com/wp-content/uploads/2015/01/facebook.png" title="Shivers Shaved Ice on Facebook" /></a>
<a href="http://twitter.com/shiverstexas"><img src="http://shiversshavedice.com/wp-content/uploads/2015/01/twitter.png" title="Shivers Shaved Ice on Twitter" /></a>
<a href="http://instagram.com/shiverstexas"><img src="http://shiversshavedice.com/wp-content/uploads/2015/01/instagram.png" title="Shivers Shaved Ice on Instagram" /></a>
<a href="http://visitor.r20.constantcontact.com/d.jsp?llr=sn7abbnab&p=oi&m=1113504903602&sit=8kb6nh8hb&f=37e341e0-2a18-443e-9467-cedf64a6e113"><img src="http://shiversshavedice.com/wp-content/uploads/2015/01/newsletter.png" title="Keep Up With Us!" /></a>
<a href="mailto:shiverstexas@gmail.com"><img src="http://shiversshavedice.com/wp-content/uploads/2015/01/email.png" title="Email Shivers" /></a>

In Firefox it works fine. When you click one of the links, a sort of marching-ants type box appears around the images, only the ants aren't marching.

enter image description here

But in Chrome, that link box thingy shows up underneath the image link:

enter image description here

I'm on a mac, the first screen cap is mine, the second is the client's on a PC. It seems like this would be a float issue of some kind? But this is a very basic WordPress theme that has not been customized all that much. I think the links still work fine in the Chrome situation, but the box showing up underneath doesn't look great and is a bit distracting.

Thanks, I know this is probably super basic, I'm just a bit lost.

DaniP
  • 37,813
  • 8
  • 65
  • 74
Jessica W.
  • 13
  • 2
  • 1
    The box around is called outline ... it's a property triggered by the focus state on the link. The issue can be a problem with another CSS. – DaniP Feb 10 '15 at 21:10
  • Please also include the CSS that you have for the relevant HTML. It looks here like you just need to set `a { display: inline-block }` in your CSS. Check out the link above by showdev for a more in-depth answer. – TylerH Feb 13 '15 at 20:31

1 Answers1

1

The single pixel wide grey outline is the default :focus styles in the browser. You can fix the layout of the outline using display: inline-block; on the a tags. This will make their layout expand to wrap the img elements.

While not the most-precise CSS selector, you could do something like this.

.widget-area .textwidget a {
    display: inline-block;
}

Additionally, you can customize the outline styles using CSS like this.

.widget-area .textwidget a:focus {
    outline: 0 none;
    /*Some other styles here.*/
}
Alexander O'Mara
  • 58,688
  • 18
  • 163
  • 171