Home/ Questions/Q 138219
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T07:13:46+00:00

I am having problems with my image spacing when I switched to XHTML Strict

  • 0

I am having problems with my image spacing when I switched to XHTML Strict DOCTYPE.

The following code – which uses Yahoo’s reset stylesheet to kill off all default browser padding – leaves a gap of about 4 pixels between the two images below but ONLY when I use the strict doctype. Why is this?

It is only a problem in Chrome and Firefox. IE doesn’t show a single pixel between the two images.

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'> <html xmlns='http://www.w3.org/1999/xhtml'>  <head>     <link rel='stylesheet' type='text/css'       href='http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css'> </head>  <body>  <div><img src='http://www.catfacts.org/cat-facts.jpg' border='0'/></div> <div><img src='http://www.catfacts.org/cat-facts.jpg' border='0'/></div>   </body> </html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Using Peter’s answer as a start the following fixes the problem:

    img { vertical-align: bottom }

    The reason this works is that the default for vertical-align is baseline, which equates to the part of the text ‘above the line’ where the dangly bits hang down (lower case g, q, etc all hang below this baseline).

    So in order to leave room it was leaving 4px of space for these overhangs.

    Hope that made sense.

    Edit: Visual aid from source site
    alt text
    (source: brightlemon.com)

    • 0