Results 1 to 5 of 5

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

  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

  2. #2
    Frenzied Member
    Join Date
    Apr 2009
    Location
    CA, USA
    Posts
    1,516

    Re: Image with absolute positioning makes div 2px higher

    Apply display:block to your white_thumbnail image; better?

  3. #3

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

    Re: Image with absolute positioning makes div 2px higher

    Quote Originally Posted by SambaNeko View Post
    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 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!
    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

  4. #4
    Frenzied Member
    Join Date
    Apr 2009
    Location
    CA, USA
    Posts
    1,516

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

    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.

  5. #5

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

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

    Thanks for the explanation, I learned something!
    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