Tiffany B. Brown

a mish-mosh of stuff

Getting rid of spaces between vertically-stacked images

So you’ve got an HTML page (or HTML e-mail) with vertically-stacked images. And you’ve noticed a little problem: Each image is followed by a line of blank white space.

So you check your code. You remove all of the line breaks and spaces from around your img tag. Then you refresh your browser window. And guess what: you’ve still got spaces.

Vertically-stacked images

The issue (properly) occurs when your document has a strict or XHTML 1.1 DOCTYPE (view an example). Most browsers (including IE 6) will add a thin space after each image. That‘s fine if you’re just organizing images on a page. But for e-mail layouts, and splash pages, you probably don’t want that space.

The solution

You‘re in luck: There are three.

Switching to a transitional DOCTYPE will send most browsers into quirks mode. You’ll need to use a few more hacks to get Internet Explorer 6 to behave, but it‘s not a bad option.

Using HTML 3.2 also provides good consistency, but you lose the ability to use CSS and scripting. It’s not so bad for HTML e-mails, though.

You could also eliminate the DOCTYPE entirely, but I don’t recommend this because it will result in all kinds of browser wackiness.

For best results, I recommend sticking with the strict DOCTYPE, and using display: block; in your CSS. Doing so presents the best cross-browser rendering, while still solving the post-image space issue.

More information on DOCTYPE switching

  • http://www.rashidmuhammad.com/ Rashid Z. Muhammad

    Interesting. I always thought that the presence of any strict or transitional doctype greater than HTML 4.01 would put a browser (well IE or Gecko anyway) into standards compliance mode.

    Tangentially, I remember an article by Ian Hickson a few years back saying that using the XHTML doctype was pointless anyway unless your page was being parsed by a machine, and also because IE6 didn’t support any xml mime type and without that you weren’t really complying with the standard.

    I do remember a few workarounds using server side code, but don’t know many people who have put them into production because it seems like most people who think they want XHTML really just want HTML 4.

    Any thoughts on this? Do you use an XHTML strict doctype? If so, do you use the CDATA blocks as well for your scripts?

  • http://www.rashidmuhammad.com Rashid Z. Muhammad

    Interesting. I always thought that the presence of any strict or transitional doctype greater than HTML 4.01 would put a browser (well IE or Gecko anyway) into standards compliance mode.

    Tangentially, I remember an article by Ian Hickson a few years back saying that using the XHTML doctype was pointless anyway unless your page was being parsed by a machine, and also because IE6 didn’t support any xml mime type and without that you weren’t really complying with the standard.

    I do remember a few workarounds using server side code, but don’t know many people who have put them into production because it seems like most people who think they want XHTML really just want HTML 4.

    Any thoughts on this? Do you use an XHTML strict doctype? If so, do you use the CDATA blocks as well for your scripts?

  • http://www.tiffanybbrown.com/ tiffany

    I believe that’s the case. Strict will definitely trigger standards compliance mode — except IE if you include the XML declaration <?xml blah blah blah?>.

    This particular site is XHTML strict. I almost always use external scripts, so CDATA blocks are a non-issue.

    For my projects at work, I’ve gone back to using HTML 4.01 Strict for much the same reasons Hickson gave.

  • http://www.tiffanybbrown.com/ tiffany

    I believe that’s the case. Strict will definitely trigger standards compliance mode — except IE if you include the XML declaration <?xml blah blah blah?>.

    This particular site is XHTML strict. I almost always use external scripts, so CDATA blocks are a non-issue.

    For my projects at work, I’ve gone back to using HTML 4.01 Strict for much the same reasons Hickson gave.

  • http://www.rashidmuhammad.com/ Rashid Z. Muhammad

    Cool, I have had plans on writing machine-consumable output from my web apps as kind of a pseudo web service, but wanted them to double as actual human-readable display pages as well using XSLT but the whole mime type thing made me scuttle it and I just started working on a SOAP API. I’d stil like to see if anyone was actually doing such a thing.

    I’m not much of a scripter, but the CDATA thing always sounded kind of clunky in an HTML file. Then again, inline script in general is clunky as well so, one good turn…

  • http://www.rashidmuhammad.com Rashid Z. Muhammad

    Cool, I have had plans on writing machine-consumable output from my web apps as kind of a pseudo web service, but wanted them to double as actual human-readable display pages as well using XSLT but the whole mime type thing made me scuttle it and I just started working on a SOAP API. I’d stil like to see if anyone was actually doing such a thing.

    I’m not much of a scripter, but the CDATA thing always sounded kind of clunky in an HTML file. Then again, inline script in general is clunky as well so, one good turn…