ansaurus

Question

Strict DOCTYPE affecting spacing between images.

Answer 1

A:

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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;

<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>

Allain Lalonde 2009-01-29 00:17:09

thanks - even though it doesn't work. i should get in the habit of doing things like that

Simon_Weaver 2009-01-29 00:19:18

this isn't a common issue? most searches for this issue just yield advice about setting padding to 0 everywhere - which i've done

Simon_Weaver 2009-01-29 00:20:11

Answer 2

+3 A:

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.)

Peter Boughton 2009-01-29 00:24:55

well that works. i HATE it thought! is this the best i'm going to get? interstingly setting font-size:1 or font-size:1000 gives the same sized gap

Simon_Weaver 2009-01-29 00:28:38

seeing that gap disappear is quite a relief. and an even BIGGER relief to see the gap on my actual site disappear. i'm very curious as to any other solutions though so for now i'll leave the question unanswered

Simon_Weaver 2009-01-29 00:31:39

oh and i didn't mean i hate your answer - i just meant - well you know :-) i just reread my comment and i thought i sounded a little ungrateful!

Simon_Weaver 2009-01-29 00:37:32

Don't worry - I know what you mean. :)

Peter Boughton 2009-01-29 07:45:05

Answer 3

+5 A:

Allain Lalonde 2009-01-29 00:31:22

kinda made sense - and it works too. any known side effects of this? i guess i'll see if any of my other images look in the wrong place as i come to it. only thing i'm wondering about is if i ever have inline images in text such as bulletpoints - but then i can always use baseline there

Simon_Weaver 2009-01-29 00:36:29

be sure to also read the article mentioned by ionut (https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps). it goes into great detail and talks about future fix

Simon_Weaver 2009-01-29 01:00:52

Answer 4

+3 A:

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

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

Ionuț G. Stan 2009-01-29 00:47:41

very thorough and helpful article. thanks

Simon_Weaver 2009-01-29 00:59:13

Answer 5

+2 A:

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

facildelembrar 2009-01-29 07:30:52

ansaurus

tags:

views:

answers:

Strict DOCTYPE affecting spacing between images.

related questions