homepage Welcome to WebmasterWorld Guest from 54.205.254.108
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS Image gallery causing padding
Seedy




msg:4425605
 3:41 pm on Mar 6, 2012 (gmt 0)

A small image-hover CSS gallery has a large area of padding below the images causing unnecessary scroll bars to appear. It's there permanently, not just during hover but I cannot seem to work out why. Can anyone spot what's causing it please?
Thank you in advance.

<div id="gallery">
<img class="default" src="blank.png" alt="">
<ul>
<li><a class="gallery" href="#x" title="" rel="nofollow"><img src="1tn.gif" alt=""><b><span></span><i><img src="1.png" width="524" height="344" alt=""></i></b></a></li>
<li><a class="gallery" href="#x" title="" rel="nofollow"><img src="2tn.gif" alt=""><b><span></span><i><img src="2.png" width="524" height="344" alt=""></i></b></a></li>
<li><a class="gallery" href="#x" title="" rel="nofollow"><img src="3tn.gif" alt=""><b><span></span><i><img src="3.png" width="524" height="344" alt=""></i></b></a></li>
<li><a class="gallery" href="#x" title="" rel="nofollow"><img src="4tn.gif" alt=""><b><span></span><i><img src="4.png" width="524" height="344" alt=""></i></b></a></li>
<li><a class="gallery" href="#x" title="" rel="nofollow"><img src="5tn.gif" alt=""><b><span></span><i><img src="5.png" width="524" height="344" alt=""></i></b></a></li>
<li><a class="gallery" href="#x" title="" rel="nofollow"><img src="6tn.gif" alt=""><b><span></span><i><img src="6.png" width="524" height="344" alt=""></i></b></a></li>
</ul>
</div>


a.gallery, a.gallery:visited, a.gallery:hover, a.gallery:active {}
#gallery {width:100px; float:right; padding-left:50px; position:relative; top:10px; }
#gallery .default {position:absolute; left:22px; top:7px; border:0px solid #00ffff; z-index:0; }
#gallery ul {list-style:none; padding:0; margin:0; width:130px; float:right; }
#gallery ul li {display:inline; width:70px; height:60px; float:left; }
#gallery ul li a {display:block; width:70px; height:50px; text-decoration:none; padding:4px; border:1px solid #003366; }
#gallery ul li a img {width:70px; height:50px; border:0; }
#gallery ul li a b {position:absolute; left:-9999px; display:block; width:570px; height:360px; }
#gallery ul li a:hover,
#gallery ul li a:active,
#gallery ul li a:focus {white-space:normal; border-color:#00ffff; outline:0; }
#gallery ul li a:hover b {position:absolute; left:-600px; top:0px; z-index:100; }
#gallery ul li a:active b,
#gallery ul li a:focus b {position:absolute; left:-600px; top:0px; }
#gallery ul li a b i {display:block; width:570px; height:60px; text-align:center; display:table-cell; vertical-align:middle; }
#gallery ul li a b i img {width:auto; height:auto; border:1px solid #00ffff; }

 

alt131




msg:4426871
 8:54 am on Mar 9, 2012 (gmt 0)

Hi Seedy and welcome to css :)

Great code sample - made it easy to spot that <b> is the culprit. Setting a background-color and something like left:-99px in the snippet makes this easier to see: In a simple terms, the height is still being accommodated, even though the element has been positioned off screen to the left.

Seedy




msg:4426877
 9:24 am on Mar 9, 2012 (gmt 0)

Great, thank you alt131. By reducing to -99px, I see exactly what you explained.
Would you suggest a particular fix or would you, as I'm considering, just accept the consequences? It isn't after all that much of a problem, but more of a niggle.

Thanks :)

Edit:
I added ' top: -9999px;' which seems to work well. About to test it on other browsers, etc.

#gallery ul li a b {position:absolute; left:-9999px; top: -9999px; display:block; width:570px; height:0px; }

Edit2:

Yes, all seems well. Many thanks for your help.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved