Strict DOCTYPE affecting spacing between images

StackOverflow https://stackoverflow.com/questions/489974

  •  20-08-2019
  •  | 
  •  

Question

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>
Was it helpful?

Solution

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)

OTHER TIPS

More information about the misterious image gaps can be found here:

https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

Using Firebug shows that it is the DIV that causes the spacing, rather than the image.

I set font-size: 0; for the top div and the gap goes away.

(Oddly, there is/should be an inherited font-size:0; from the body in the reset-min.css so not sure why this worked.)

In strict doctypes, image becomes an inline element, and behaves like text. Hence you need to change its vertical-align property, or change its display property to display: block, or display:inline-block

Trying to rule out common errors, I made the code pass validation by fixing no less than 8 validation errors.

Generally if a browser can't parse the document in the DOCTYPE given, results are unspecified.

It still doesn't work mind you, but here's the validating code:

<!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" />
    <title>Required</title>
</head>

<body>

    <div><img src="http://www.catfacts.org/cat-facts.jpg" alt="cat1" /></div>
    <div><img src="http://www.catfacts.org/cat-facts.jpg" alt="cat2" /></div>

</body>
</html>

The display:inline-block solution definitely did not work for me.

The vertical-align:bottom solution did work, but with one caveat: depending on the situation, there were images that I had to instead set to vertical-align:top

Switching to loose standards instead of strict worked for me... kept the IE formatting that I required, but eliminated the odd image spacing in Firefox and Chrome.

https://developer.mozilla.org/en/Gecko%27s_Almost_Standards_Mode

Used the line:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top