Too Much Spacing

[angelazou]

Hi,

I’m not using any CSS on the table right now except zebra stripping and a 5px padding (which is not showing up), and I noticed there is this huge gap between the check icon and the bottom of the table. Here is a screenshot (http://www.flickr.com/photos/72394808@N08/6599951081/in/photostream), and I’ve mocked up a fiddle (http://jsfiddle.net/NWgab/)

Angela

[Mottie]

It looks like the tr’s and td’s have been switched. Here’s an updated demo. The only other thing missing is this bit of css

td img { vertical-align: middle; }

[angelazou]

um, vertical-align: middle doesn’t solve the problem (actually, I mean that it doesn’t solve the problem I have in the screenshot, but it works well in the demo). I’ve updated the demo, so you can see it here better ( http://jsfiddle.net/NWgab/2/ )

[Mottie]

Hmm, it’s just a few pixels off huh? I played around with it, setting the td line-height, image height, different padding and I’m not sure why it won’t vertically center exactly.

I did notice that if you add a with that as a background image it centers perfectly – demo.

[angelazou]

This is weird. I tried your method, and the line around the check image goes away but the spacing becomes upward instead of downward, as shown in this screenshot (http://www.flickr.com/photos/72394808@N08/6605426885/). I even added

span.check {

display: block;

width: 16px

height: 16px;

background: url(http://link) no-repeat center center;

vertical-align: center;

margin: 0;

padding: 0;

}

but the spacing just won’t go away. This is just annoying strange. I mean, you can tell from this screenshot (http://www.flickr.com/photos/72394808@N08/6605426995/) that there is no margin/padding assigned to this element whatsoever (I mean even if it did, my explicit CSS rules should override it, right?)

PS: despite all the complaining, I’m still looking forward for the countdown. It’s less than 8 hours to go in China. 2012 is almost here! Happy new year everyone :)

[angelazou]

Well, I managed to get the check image to the center, but the size of the row still haven’t reduced. This is so weird, I checked over every img selector, and removed all the margins and paddings (which I thought was the culprit). But it still is that tall. The element inspector in Safari tells me that it’s 42px tall, whereas other text columns are 21px tall.
What else could be causing the extraordinary height?

Angela

[angelazou]

Well, I posted all of the code (with some content modification) in this fiddle http://jsfiddle.net/FLtKW/ , but the bug is not showing (even though I have the entire CSS file in there). I also have uploaded the screenshot for the element inspector of the td element (http://www.flickr.com/photos/72394808@N08/6626263061/in/photostream) and the span element (http://www.flickr.com/photos/72394808@N08/6626263077/in/photostream).

[Author]

Posts