Welcome to WebmasterWorld Guest from 54.160.131.144

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Image gallery causing padding

     

Seedy

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

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

WebmasterWorld Senior Member 5+ Year Member



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

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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month