1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Sticky hover problem in Firefox

Discussion in 'CSS' started by sam2698, Jan 30, 2009.

  1. #1
    I am creating a site and if you would click on of the images in the css gallery, a new page opens up and works properly,

    but you come back to the tab the Grey box does not automatically dissappear as it does with other browser, any way I can get it working without having the user to click outside the box.

    And way I could fix this?

    The css code is:

    #gallery {width:520px; height:115px; position:absolute; z-index:7000; left: 635px; top: 80px; }
    #gallery b.default {position:absolute; left:10px; top:10px; width:548px; height:380px; text-align:left;}
    #gallery b.default img {display:block; margin:0 auto 10px auto; border:1px solid #eee; border-color:#555 #ddd #eee #333;}
    #gallery b.default span {display:block; color:#fff; font-family:verdana, arial, sans-serif; font-weight:normal; font-size:11px; width:350px; margin:0 auto; text-align: left;}
    
    #gallery ul {list-style:none; padding:0; margin:0; width:180px; position:relative; float:right;}
    #gallery ul li {display:inline; width:52px; height:52px; float:left; margin:0 0 5px 5px;}
    #gallery ul li a {display:block; width:50px; height:50px; text-decoration:none; border:1px solid #000; border-color:#eee #555 #333 #ddd;}
    #gallery ul li a span {display:none;}
    #gallery ul li a img {display:block; width:50px; height:50px; border:0;}
    #gallery ul li a:hover {white-space:normal; border-color:#555 #ddd #eee #333; background-image: url(<?php bloginfo('template_url'); ?>/images/bg_img.jpg);}
    #gallery ul li a:hover b {position:absolute; left:-300px; top:0; width:100px; height:100px; text-align:center; z-index:20;}
    #gallery ul li a:hover span {display:block; color:#fff; font-family:verdana, arial, sans-serif; font-weight:normal; font-size:11px; width:350px; text-align:left;}
    #gallery ul li a:hover img {margin:0 auto 10px auto; width:auto; height:auto;}
    
    #gallery ul li a:active, #gallery ul li a:focus {white-space:normal; border-color:#555 #ddd #eee #333; background:#777;}
    #gallery ul li a:active b, #gallery ul li a:focus b {position:absolute; left:-300px; top:0; width:100px; height:100px; text-align:center; z-index:10;}
    #gallery ul li a:active span, #gallery ul li a:focus span {display:block; color:#fff; font-family:verdana, arial, sans-serif; font-weight:normal; font-size:11px; width:350px; margin:0 auto; padding-right: 30px;}
    #gallery ul li a:active img, #gallery ul li a:focus img{margin:0 auto 10px auto; width:auto; height:auto; border:1px solid #eee; border-color:#555 #ddd #eee #333;}
    Code (markup):
    HTML CODE:
     <div id="gallery">
    <ul>
    	<li><a href="http://www.etsy.com/view_listing.php?listing_id=19132282" target="_blank"><b><img src="<?php bloginfo('template_url'); ?>/images/gallery/1.jpg" title="" alt="" /><span>This is T1</span></b></a></li>
    	<li><a href="http://www.etsy.com/view_listing.php?listing_id=19132432" target="_blank"><b><img src="<?php bloginfo('template_url'); ?>/images/gallery/2.jpg" title="" alt="" /><span>More T2</span></b></a></li>
    	<li><a href="http://www.etsy.com/view_listing.php?listing_id=18998269" target="_blank"><b><img src="<?php bloginfo('template_url'); ?>/images/gallery/3.jpg" title="" alt="" /><span>Descriptive text can be placed below the image.<br> Testing out with more text. Over here with more.</span></b></a></li>
    	<li><a href="http://www.etsy.com/view_listing.php?listing_id=19133014" target="_blank"><b><img src="<?php bloginfo('template_url'); ?>/images/gallery/4.jpg" title="" alt="" /><span>You can style the descriptive text as you like</span></b></a></li>
    	<li><a href="http://www.etsy.com/view_listing.php?listing_id=19133346" target="_blank"><b><img src="<?php bloginfo('template_url'); ?>/images/gallery/5.jpg" title="" alt="" /><span>Place the descriptive text in a span tag</span></b></a></li>
    	<li><a href="http://www.etsy.com/view_listing.php?listing_id=19133606" target="_blank"><b><img src="<?php bloginfo('template_url'); ?>/images/gallery/6.jpg" title="" alt="" /><span>Photograph descriptive text here</span></b></a></li>
    </ul>
    </div>
    Code (markup):
     
    sam2698, Jan 30, 2009 IP
  2. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
  3. sam2698

    sam2698 Well-Known Member

    Messages:
    941
    Likes Received:
    41
    Best Answers:
    0
    Trophy Points:
    118
    #3
    still doesn't help me out with the gallery.
     
    sam2698, Jan 31, 2009 IP