swa66 - 11:02 pm on Oct 12, 2013 (gmt 0)
You can't just pick what you want and then expect it all to work. E.g. you use a html5 doctype, but use prehistoric html inside (nobr, font, long obsolete attributes, tables abused for layout, ...)
Chose what level you code against and STICK to that.
First of all validate your code. As long as you're not there, browsers are going to "help", and it'll backfire - big time.
If you want to see what browsers make of your contraptions: use something like the developer tools in FF or inspect element in chrome: they will SHOW you what element is where.
(in case of the code you call lucy-2: it's the <nobr> that causes the vertical gaps.
But it's all irrelevant if this isn't your goal, and how different browsers deal with crappy code is even more unpredictable than usual.
So, what's the ultimate goal ?
Putting icons on a map ?
You don't need a grid for that. You can position the icons anywhere (on or off of a grid). And you certainly don't need thousands of empty cells for that.
Positioning things is much easier, simpler, faster, ... than what you're trying to do now.
- start with what you want as an end goal.
- VALID code: use a validator such as [validator.nu...] or [validator.w3.org...]