Question

I have this comments section on my site, and in firefox there is a bit of space between each comment where I don’t want it. I have checked with firebug where this space might be coming from, but I honestly have no clue. There’s no margin’s or anything that is at the place of the unwanted space.

JSfiddle: http://jsfiddle.net/GuCAv/

On my site: http://ttrcustoms.us/testarea51/#track=1323924558

Answer 1

ok… here is the high level rundown. You are using display:inline-block where you should be floating the image. inline-block has known issues and should be used sparingly (as you can see why). What is happening here is a design flaw in inline-block which causes it to render white space incorrectly. What you should be using is display:block and then floating the image. The only problem then is the fact that some comments will be too small (the image is now out of flow making it appear 0px high). This is easily solved by giving the comments a min-height. as far as I can tell your css should be as follows:

.fadecomment, .comment {
    position: relative;
    width: 100%;
}

.even {
    position: relative;
    background-color: #303030;
    padding-top: 2px;
    padding-bottom: 2px;
    width: 100%;
    z-index: 0;
    display: block;
    min-height: 36px;
}

.odd {
    position: relative;
    background-color: #404040;
    padding-top: 2px;
    padding-bottom: 2px;
    width: 100%;
    z-index: 0;
    display: block;
    min-height: 36px;
}

.avatar32 {
    width: 32px;
    height: 32px;
    float: left;
    margin: 2px 4px 2px 6px;
}

.thecomment {
    font-size: 11px;
    padding-right: 16px;
}

It’s also good to note that you should be careful when using position:absolute. It also takes the element out of flow making it effectively 0px tall as far as the other elements are concerned. Having the .thecomment out of flow but the avatar not was making all your comments only as tall as the avatar itself. This also fixes that.