Firefox and the A IMG Combo
I noticed this a few Firebug upgrades ago… but I didn’t care to solve it until now.
When you inspect an IMG (image) tag that is wrapped in an A (anchor) tag, you will see that the A tag is not actually expanding to cover the image. (Fig 1.) The A tag is represented as a horizontal bar that extends several pixels above and below the baseline of your image.
At first this is surprising, but once you verify that it still functions as expected, you scratch your head and move on to more pressing matters. And pray that the Pixel Bitch doesn’t notice.
Figure 1. Inspecting the A tag of the A IMG combo (with Firebug in Firefox). See how it’s flattened at the base of the image? ^
I played with the CSS display property of the A tag until I got it to cover the image. First try: div.ad a { display:block; }
Okay, so now the “A” tag now displaces the correct height of the image. And there is the added benefit of losing that extra 5px or so pixels of vertical margin underneath of the image. (Fig. 2.) It’s odd because that amount of space has a certain minimum height that’s based on the font and line-height since the default is display:inline.
Figure 2. Fixed on inspection and behaving properly!^
The net effect is about a five pixel decrease in padding under the image. And if you still have :focus on, you’ll see that it snugly wraps the image border instead of just appearing at the base.
The permanent fix to this minor issue? Set display block on all A tags that have child IMG tags.
a>img { display:block; }
Veddy nice.