CODEWITHSUNDEEP
htmlcss
CupOfTea696
CupOfTea696

Reputation: 1295

Firefox css issue (unwanted space between elements)

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

Upvotes: 1

Views: 1409

Answers (3)

Eric Yin
Eric Yin

Reputation: 8983

maybe you mean the space (3px) between each comment, ok

I saw 

.thecomment {
position: absolute;
}

This make the span short than others, remove it. Or give a height anyway

Upvotes: 0

Joseph Marikle
Joseph Marikle

Reputation: 78530

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.

Upvotes: 1

Rogel Garcia
Rogel Garcia

Reputation: 1915

It seems that style=height: 58px; is doing that, removing the height should solve the problem.

I figured that this style made the block higher but other stlyes with height set could make the same effect.

Try to don't used fixed heights.

This is for the first comment.

For the second (lighter background) what made it larger is the avatar.

The other answer about the absolute positioning is also a good tip, using a more fluent layout instead of fixing positions and sizes is recomended.

Upvotes: 0

Related Questions