Rogue Padding Below Images
This post is an old post from my previous blog but I thought it might be still useful to some people so I'll repost it here rather than deleting it.
Last week I was modifying the default Drupal Bluemarine theme to incorporate a custom designed layout for a client, and was getting some strange image padding issues when viewing the web site in Firefox. Each of the <img> tags in the web site has about 2 or 3 pixels of padding below each image, and thus causing horizontal white lines between images in the heading of the site.
I tried everything I could to try to remove the padding but nothing worked. So I did a search around and came across the Quirksmode site, which deals with the different ways browsers interpret the CSS, in particular Strict mode and Quirks mode. At the beginning of every HTML document should be a <!DOCTYPE> tag, which tells the browser which version of HTML or XHTML specification the document uses.
In the case of the Bluemarine theme, the <!DOCTYPE> was set to XHTML 1.0 Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
This Quirksmode page best describes what is happening:
In quirks mode img has a default display: block, while in really strict mode it has a default display: inline.
If an image is displayed inline, it leaves a slight space below it. This is because the image is placed on the baseline of the text, and below the baseline there should be some more space for the descender characters like g, j or q.
The offshoot is that in strict mode it's not possible to make a container fit tightly around the image, unless, of course, you explicitly say img {display: block}.
All I needed to do was to add the following text to my CSS file, and everything displayed fine. If you are ever having trouble with rogue padding, or can't figure out why some of your elements are not displaying the way they should, remember to check your <!DOCTYPE>.
Comments
Rogue Padding Below Images
1.0 Transitional has this same issue.
My basic rule of thumb is : if you're using any tag as a display object always use display:block
Post new comment