Dear Lazyweb: Where Are Those Borders Coming From?

Posted: Sun, 27 January 2008 | permalink | No comments

CSS is a lovely principle, but between browser bugs and an insanely complex standard in practice, it's not nearly so fun.

Today's case in point: I want three images stuck right next to each other. I've got an example of the sort of thing I want to do -- in that example, I want the three coloured squares to be adjacent, not separated by several pixels of whitespace, and for there to be no white between the boxes and the bottom border.

In order to make this happen, at the moment, I've got to set negative right and bottom margins, which to me is just completely screwed up -- negative margins, to me, means overlap, not adjacency. What makes it even worse is that different browsers need different pixel counts. So far I've tested on IE6 and Firefox 1.5.

The thing that really does my head in, though, is that fact if I change the font size the gap changes. So somewhere inside of both IE6 and Firefox 1.5, there's some relative size getting in the way of just sticking pictures next to each other.

Update: I've been given the solution. Thanks to the 50 or so people who responded; it's great to know there's so many helpful people out there.


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)