Results 1 to 5 of 5

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

Threaded View

  1. #1

    Thread Starter
    Fanatic Member stlaural's Avatar
    Join Date
    Sep 2007
    Location
    Quebec, Canada
    Posts
    683

    Resolved [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:
    1. .divTootTipsImageZone
    2. {
    3.     position: relative;
    4. }
    5.  
    6. .divThumbnailLoadWrapper
    7. {
    8.     opacity : 0.4;
    9.     filter: alpha(opacity=40);
    10.     background-color: #000;
    11.     overflow: hidden;
    12. }
    13.  
    14. .ThumbnailLoader
    15. {
    16.     position: absolute;
    17.     left: 50%;
    18.     top: 50%;
    19.     margin-left: -8px; /* -1 * image width / 2 */
    20.     margin-top: -8px;  /* -1 * image height / 2 */
    21.     display: block;
    22. }

    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!
    Last edited by stlaural; May 1st, 2012 at 11:32 AM.
    Alex
    .NET developer
    "No. Not even in the face of Armageddon. Never compromise." (Walter Kovacs/Rorschach)

    Things to consider before posting.
    Don't forget to rate the posts if they helped and mark thread as resolved when they are.


    .Net Regex Syntax (Scripting) | .Net Regex Language Element | .Net Regex Class | DateTime format | Framework 4.0: what's new
    My fresh new blog : writingthecode, even if I don't post much.

    System: Intel i7 920, Kingston SSDNow V100 64gig, HDD WD Caviar Black 1TB, External WD "My Book" 500GB, XFX Radeon 4890 XT 1GB, 12 GBs Tri-Channel RAM, 1x27" and 1x23" LCDs, Windows 10 x64, ]VS2015, Framework 3.5 and 4.0

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width