drawkcaB | Backward Compatible logo

rants and tips about software

Getting strange spaces in complex HTML table layout for image parts?

I just lost a couple hours on this. I’m making a puzzle game in HTML, so I used table to split an image into pieces and display each part at correct place. The problem is that I get weird space beneath every image, as part of TD tag. I tried everything, setting border, cellspacing, cellpadding to zero, playing with CSS margin, padding and display type. Nothing worked. And problem was visible in all browsers.

So I started to create a simple test-case in order to ask question on some programming forums or stackoverflow. However, my sample was working properly. Removing stuff part-by-part from the more complex case I got to the point where everything was the same, but nothing worked. And then it occurred to me. HTML document template was created using an editor that inserts DOCTYPE automatically. It was set to XHTML Strict. Removing the line fixed everything.

So make sure you use non-strict XHTML, or even better HTML in quirks mode. Maybe it sounds “dirty” but it sure saves the time and nerves.

Milan Babuškov, 2011-08-19
Copyright © Milan Babuškov 2006-2024