HTML - Image is not displaying in full

Question

http://revive-blue-introblogger.blogspot.com/2010/07/demonstrating-all-theme-styles.html#comment-form

I was trying to install this theme on my blog and I noticed a little problem - the avatars in the comment section are not displaying in full, they're cut off as well as the container. I've edited the codes a hundred times but I just can't figure out what the problem is. Help would be much appreciated!

Answer 1

Use your developer toolbar (Chrome) and inspect the image. If you don't see anything wrong with the image, work up the DOM until you see the problem. Check their widths, heights, paddings, margins, and "top" and "left" CSS attributes.

This element <div class="avatar-image-container vcard"> has max-height: 36px which is too small.

The image element itself has width and height attributes of 35x35 even though the image is 45x45.

Answer 2

You're restricting the height, that's why it's cutoff.

Comment out the height rules like this:

#comments-block .avatar-image-container {
  left: -41px;
  width: 48px;
  /* height: 48px; */
  margin-top: 25px;
}

.comments .avatar-image-container {
  float: left;
  /* max-height: 36px; */
  overflow: hidden;
  width: 36px;
}

#comments-block .avatar-image-container {
  /* height: 37px; */
  left: -45px;
  position: absolute;
  width: 37px;
}

Turning off those 3 rules shows the image with dimensions that you've defined in the rule #comments-block .avatar-image-container img.

Answer 3

Remove these three and it should do the trick. I think padding is the main culprit here along with other things.

#comments-block .avatar-image-container img {
border-width: 3px 0 3px 3px;
height: 48px;
padding: 5px;
}

---

1) Remove padding from

2) Remove max-height from .avatar-image-container

3) You're done. Play with settings to get desired results.

Answer 4

.comments .avatar-image-container has max-height:36px. Remove it or your avatars will be chop off since this element has overflow:hidden.

The image also has height="35" inline, which is not affecting on chrome, but can be removed.