|
-
May 1st, 2012, 11:19 AM
#1
Thread Starter
Fanatic Member
[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!
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
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|