Kudos to the Lazyweb

Posted: Mon, 28 January 2008 | permalink | No comments

Wow, I think I got more "search results" than Google from yesterday's lazyweb search on HTML formatting. <grin> It turned out to be quite simple, as over 40 people were kind enough to point out to me -- in HTML, images are textual, "inline" elements, and so they get treated like text, in that if there's whitespace (any amount) between them, the browser treats them as separate "words" and puts some space in there. That also explains why they moved depending on the font size I chose -- the size of inter-word spacing is, of course, dependent on your font size.

I'd like to thank everyone who responded and helped me out. In addition to getting the answer to my problem (which was simply "remove all whitespace between the image tags and butt them right up next to each other", like this: <img ... /><img ... /><img ... />) I got a couple of other useful related tips (like switching the images to display: block and then treating them like a div with floating and such).

As much as it pains me to say it, though, I think I'll be following the tip given to me by one respondant: "just use tables". Yes, the gods of good web design shall smite me, but it is insanely difficult to get a really good, cross-browser layout happening using just CSS. It was fun to play the tweaking game the first couple of times (my blog layout is all CSS, for example, and my brigade's website, which I recently re-did, is all CSS), but each of those took me hours to get what are, at the end of the day, pretty basic and not particularly good looking sites. When all is said and done, it's just too damned hard.


Post a comment

All comments are held for moderation; markdown formatting accepted.

This is a honeypot form. Do not use this form unless you want to get your IP address blacklisted. Use the second form below for comments.
Name: (required)
E-mail: (required, not published)
Website: (optional)
Name: (required)
E-mail: (required, not published)
Website: (optional)