Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Too Much Spacing

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #35897
    angelazou
    Participant

    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/[email protected]/6599951081/in/photostream), and I’ve mocked up a fiddle (http://jsfiddle.net/NWgab/)

    Angela

    #93708
    Mottie
    Member

    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; }
    #93717
    angelazou
    Participant

    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/ )

    #93741
    Mottie
    Member

    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.

    #93767
    angelazou
    Participant

    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/[email protected]/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/[email protected]/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 :)

    #93884
    angelazou
    Participant

    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

    #93893
    angelazou
    Participant

    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/[email protected]/6626263061/in/photostream) and the span element (http://www.flickr.com/photos/[email protected]/6626263077/in/photostream).

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.