Geek Answers Handbook

Strict DOCTYPE affecting the distance between images

I am having problems with the interval between images when switching to XHTML Strict DOCTYPE.

The following code, which uses the Yahoo reset stylesheet to destroy all the default browser browser add-ons, leaves a space of about 4 pixels between the two images below, but ONLY when I use strict doctype. Why is this?

This is only a problem in Chrome and Firefox. IE does not show one pixel between 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>
+4
source share
7 answers

Using Peter as a starting solution fixes the problem:

 img { vertical-align: bottom }

The reason for this is because the default value for vertical-align is equal to baseline , which corresponds to the part of the text "above the line" where there are hanging chatter (lowercase g, q, etc. everything hangs below this base line).

Therefore, to leave the room, he left 4px space for these ledges.

Hope that made sense.

Edit: visual help from source site
alt text http://www.brightlemon.com/web-design/blog/images/typography/basics-01.gif

+14
source

More information about hidden image spaces can be found here:

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

+6
source

Using Firebug shows that it is the DIV that causes the interval, not the image.

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

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

+3
source

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

+2
source

Trying to eliminate common errors, I did a code passage check by installing at least 8 verification errors.

Typically, if the browser cannot parse the document in the specified DOCTYPE, no results are specified.

It still does not work, but here is the confirmation 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>
0
source

Display: built-in unit solution definitely didn't work for me.

Vertical alignment: the bottom solution really worked, but with one caveat: depending on the situation, there were images that I had to set instead of vertical alignment: top

0
source

Switching to laid-back standards instead of working hard for me ... supported IE formatting, which I required, but eliminated the odd distance between images in Firefox and Chrome.

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

Used string:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-1
source

More articles:


All Articles