[RESOLVED] Image with absolute positioning makes div 2px higher

Hi Guys I'm having a strange problem with divs, image and positionning I just can't seem to fix it. First here's the divs and content :

HTML Code:

---

<div id="divToolTipsImageZone" class="divToolTipsImageZone">
        <div id="divToolTipsContentZone" class="divToolTipsContentZone">
          <div id="divThumbnailLoadWrapper" class="divThumbnailLoadWrapper">
            <a href="javascript:SetFullPreviewProgressBarIcon(true);" title="Document Title" rel="lightbox-iframe">
              <img id="imgToolTipsQuickFilePreview" border="0" src="_layouts/Images/Alexya/Findability/Preview/icons/white_thumbnail.png"/>
            </a>
          </div>
          <img id="imgThumbnailLoader" src="_layouts/Images/Alexya/Findability/Preview/loaders/spinner.gif" class="ThumbnailLoader" style="border: 0;" border="0"/>
        </div>
      </div>

---

And here's the important CSS :

CSS Code:

.divTootTipsImageZone
{
    position: relative;
}
 
.divThumbnailLoadWrapper
{
    opacity : 0.4;
    filter: alpha(opacity=40); 
    background-color: #000;
    overflow: hidden;
}
 
.ThumbnailLoader
{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -8px; /* -1 * image width / 2 */
    margin-top: -8px;  /* -1 * image height / 2 */
    display: block;
}

white_thumbnail.png is exactly 100px X 110px and spinner.gif is 16px X 16px.
The problem I'm having is that divThumbnailLoadWrapper size is automatically set to 100px X 112px instead of 100px X 110px So I see a dark gray bar 100px X 2px UNDER the image white_thumbnail.png and as you can see spinner.gif IS NOT a child of divThumbnailLoadWrapper, it is simply positionned to be displayed over it. I do NOT get this problem if I do not show the spinner.gif so I'm pretty sure the problem comes from there :P

So basically, I want to to be able to show the image spinner.gif, I still want id to be absolute positioned to be centered in its parent div but I don't want it to affect divThumbnailLoadWrapper div.

Thanks for any help you can bring!

Apply display:block to your white_thumbnail image; better?

Quote:

---

Originally Posted by SambaNeko

Apply display:block to your white_thumbnail image; better?

---

YES! so simple yet it would've taken me forever to find. I hate styling web pages and applications :mad::p I don't do it often so I always have a hard time finding solutions to those small yet frustrating layout problems.

thanks a lot!

As to what the problem actually is, the default display type on images is "inline," which automatically creates space beneath the baseline of the element for descending characters in text (like p,j,g,y) that are on the same line. This space is unnecessary in cases where you've got just an image; so "block" gets rid of it.

Thanks for the explanation, I learned something!