Firefox, gaps in table cells

[gothwalk]

Originally published at Now Is A Long Time Too. You can comment here or there.

Yesterday, after lunch, winding down through a long series of formatting problems on the current project, I found some odd gaps in table cells. For some reason, places where we had nicely formatted tabular data with images in some of the cells, there was a gap of two pixels at the bottom of the cell. I flexed my (by now, reasonably well developed) CSS muscles, and went to work. Some hours later, I was still staring at it. I cut it down to a bare bones test case. It still happened. I ripped out every single bit of CSS individually, margin, margin-bottom, padding, padding-bottom, and it still happened. And eventually, trying ridiculous things, I found it.

It was the gods-bedamned doctype. 6 hours work. One line of code.

Comments

[ex-agname.livejournal.com]

And this is why being a UI developer for web applications sucks :)

[ex-agname.livejournal.com]

Also - I said I'd let you know the success of the onkeyup/onkeydown solution for hitting the delete key to remove an item from a listbox. It worked! The code goes like this (E&OE):

<input ... >

function removeSelected(e)
{
var oEvent = window.event ? window.event : e;
if (oEvent.keyCode==46)
{
var myText = document.getElementById("myInput");
myText.value="";
}
}

[ex-agname.livejournal.com]

bah, it removed the input type equals text when I posted - you get the idea :)

[sares2000.livejournal.com]

With the very worst debugging problems, I've sometimes concluded that it's actually faster to simply start from scratch and build up the code again bit by bit, checking it at every step.

[loupblanc.livejournal.com]

Which browser?

Because one thing you need to be aware of is that IE puts a margin of 2 or 3 px underneath an image unless you specify it as "display: block" like so:

/* IE Hack */
* html #tableid img{
  display:block;
}

This usually does the trick.

Though what do you mean by the Doctype? Did you change the type of Doctype or just remove it altogether. If the latter, working in quirksmode will only take you so far.

Check out www.positioniseverything.net as well as alistapart, especially this page

[mollydot.livejournal.com]

Eek. That's quite confusing when code appears directly under that icon.

[loupblanc.livejournal.com]

what do you mean "directly under"? It looks well spaced to me :?

[mollydot.livejournal.com]

It's due to my view. It's fine when I leave off the ?style=mine
In my own view it looks like:



Now, why on earth am I going to so much trouble to show you what it looks like for me? I suspect I might be procrastinating...