Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Jul 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Why do my images disappear?

    Hey everyone,

    Using a script from Dynamic Drive, I tried a popup image viewer on one of my pages ... http://www.greekcheex.com/Transition/prod/dr.htm ... and found that, when hovering, the thumbnail class drops to the bottom of the page.

    Why is this?

    As always, the CSS:

    Code:
    /* Thanks Dynamic Drive */
    /* http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/ */
    
    .thumbnail {
    	position: relative;
    	z-index: 0;
    	margin: 0px 3px 0px 0px;
    	background-color: transparent;
    }
    
    .thumbnail:hover {
    	z-index: 50;
    	background-color: transparent;
    }
    
    .thumbnail span {
    	position: absolute;
    	background-color: transparent;
    	padding: 5px;
    	left: -1000px;
    	visibility: hidden;
    	color: black;
    	text-decoration: none;
    }
    
    .thumbnail span img {
    	border-width: 0;
    	padding: 2px;
    	background-color: transparent;
    }
    
    .thumbnail:hover span {
    	visibility: visible;
    	position: relative;
    	left: -18px;
    	bottom: 326px;
    	background-color: transparent;
    }
    and the HTML:

    Code:
    	<div id="colors">
    		<h2>Additional Colors:</h2>
    			<div id="swatch">
    				<a class="thumbnail" href="#thumb"><img src="../images/prod/swa1.gif" border="0" /><span><img src="../images/prod/n003b.gif" /></span></a><a class="thumbnail" href="#thumb"><img src="../images/prod/swa3.gif" border="0" /><span><img src="../images/prod/n003bb.gif" /></span></a><a class="thumbnail" href="#thumb"><img src="../images/prod/swa4.gif" border="0" /><span><img src="../images/prod/n003p.gif" /></span></a><a class="thumbnail" href="#thumb"><img src="../images/prod/swa5.gif" border="0" /><span><img src="../images/prod/n003r.gif" /></span></a>
    			</div>
    	</div>
    Thanks in advance for your help!

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by mbabb View Post
    Using a script from Dynamic Drive, I tried a popup image viewer on one of my pages ... http://www.greekcheex.com/Transition/prod/dr.htm ... and found that, when hovering, the thumbnail class drops to the bottom of the page.

    Why is this?
    Firefox is rendering correctly. You have this:
    Code:
    .thumbnail:hover span {
    	visibility: visible;
    	position: relative;
    	left: -18px;
    	bottom: 326px;
    	background-color: transparent;
    }
    The relative positioning seems to be your own invention. The original CSS [1] at Dynamic Drive does not set position: relative for the hover. It should stay at position: absolute so the span is kept out of the document flow.

    [1] http://www.dynamicdrive.com/style/cs...-image-viewer/

  • #3
    New Coder
    Join Date
    Jul 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Koyama, thank you again for your speedy responses! Sorry mine aren't so quick ...

    Quote Originally Posted by koyama View Post
    The relative positioning seems to be your own invention.
    Yes sir, it was, but my main goal was to get the full-size pictures to pop up in the same place, in order to replace the picture of the white shorts.

    Now, at the same url http://www.greekcheex.com/Transition/prod/dr.htm, you'll see I've changed the positioning to absolute, yet I'm having a hard time keeping the images in one spot, even with top: and left: coordinates.

    Any suggestions?

    Code:
    .thumbnail {
    	position: relative;
    	z-index: 0;
    	margin: 0px 3px 0px 0px;
    	background-color: transparent;
    }
    
    .thumbnail:hover {
    	z-index: 50;
    	background-color: transparent;
    }
    
    .thumbnail span {
    	position: absolute;
    	background-color: transparent;
    	padding: 5px;
    	left: -1000px;
    	visibility: hidden;
    	color: black;
    	text-decoration: none;
    }
    
    .thumbnail span img {
    	border-width: 0;
    	padding: 2px;
    	background-color: transparent;
    	position: absolute;
    	top: 10px;
    	left: 10px;
    }
    
    .thumbnail:hover span {
    	visibility: visible;
    	position: absolute;
    	left: 10px;
    	top: -336px;
    	background-color: transparent;
    }

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by mbabb View Post
    Now, at the same url http://www.greekcheex.com/Transition/prod/dr.htm, you'll see I've changed the positioning to absolute, yet I'm having a hard time keeping the images in one spot, even with top: and left: coordinates.

    Any suggestions?
    For an absolutely positioned element remember that the offsets top, right, bottom, and left are taken with respect to the containing block. Read the two quotes at the bottom on this page. And the containing block for an absolutely positioned element is the nearest postioned ancestor. In your case each .thumbnail establishes a containing block. This is not what you want so you need to remove the red part:
    Code:
    .thumbnail {
    	position: relative;
    	z-index: 0;
    	margin: 0px 3px 0px 0px;
    	background-color: transparent;
    }
    Then adjust the offsets to the correct value. Perhaps something like this:
    Code:
    .thumbnail:hover span {
    	visibility: visible;
    	position: absolute;
    	/* left: 10px; */
    	left: 50px;
    	/* top: -336px; */
    	top: 10px;
    	background-color: transparent;
    }
    I made the element slightly off-postioned so you can see what is going on. The offsets are taken with respect to the initial containing block because there is no longer a positioned ancestor. I would prefer to wrap the left part in a relatively positioned div and use offsets from that div instead of for the viewport. In that way you can better move around with the elements without having to change the offsets for the span.

    Note that it isn't working in IE6. When you use selectors of this type:
    Code:
    a:hover span
    you will have to apply a kick [1] to this selector in order that the above one works:
    Code:
    a:hover
    Certain properties can be used for kicking IE. For example background-position even with no background-image. In your case you can do like this:
    Code:
    .thumbnail:hover {
    	z-index: 50;
    	background-color: transparent;
    	background-position: 0 0; /* kick IE6 */
    }
    [1] http://www.satzansatz.de/cssd/pseudo...l#hoverlimited

  • #5
    New Coder
    Join Date
    Jul 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You, sir, are a bonafide genius.

    Thank you again for your help and I'll see you on here soon enough, I'm sure!

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by mbabb View Post
    You, sir, are a bonafide genius.

    Thank you again for your help and I'll see you on here soon enough, I'm sure!
    I'll go along with that.

    Frank.

    Look at this - with koyamas (un-knowing) help.

    http://www.exitfegs.co.uk/steve.html
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #7
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Hello mbabb and efpeetee,

    Your pages are looking nice and work in IE6 too. I must be the first one to correct myself on my comment about how to apply a kick on the selector .thumbnail:hover in order that .thumbnail:hover span will work in IE6.

    What matters is that the .thumbnail:hover selector specifies a change in value for certain properties compared to the .thumbnail styles. At least a change in background-color and background-position works. What is weird is that a change from unspecified background-color to transparent background-color which is the default value also counts as a kick.

    This does not work in IE6: (what mbabb had initially)
    Code:
    .thumbnail {
    	background-color: transparent;
    }
    .thumbnail:hover {
    	background-color: transparent;
    }
    This works in IE6:
    Code:
    .thumbnail {
    	background-color: transparent;
    }
    .thumbnail:hover {
    	background-color: white;
    }
    Surprisingly, this also works in IE6 (The original Dynamic Drive version)
    Code:
    .thumbnail {
    }
    .thumbnail:hover {
    	background-color: transparent;
    }
    This works in IE6
    Code:
    .thumbnail {
    }
    .thumbnail:hover {
    	background-position: 0 0;
    }
    This does not work in IE6:
    Code:
    .thumbnail {
    	background-position: 0 0;
    }
    .thumbnail:hover {
    	background-position: 0 0;
    }
    Some more about this: http://friendlybit.com/css/ie6-bug-i...tor-hover-bug/

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Just out of interest.

    http://www.exitfegs.co.uk/steve.html#thumb

    is a complete mess in Opera.

    Frank - alias effpeetee
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #9
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by effpeetee View Post
    Just out of interest.
    http://www.exitfegs.co.uk/steve.html#thumb
    is a complete mess in Opera.
    The problem with Opera 9 is that in this browser an element with position: absolute and visibility: hidden contributes to the “hover area” for its parent. This has been noted by Bruno Fassino as a problem when implementing distant CSS rollovers. Read issue #2 in this post of his.

    Only Opera seems to have this issue. I'm not sure if this should be considered a bug or not because I don't know if any CSS specification explains how browsers should decide on which pixels the “hover area” of an element should consist of. This particular case is not the only one where browsers disagree what the “hover area” is.

    Bruno notes that one can use display:none/block instead of visibility:hidden/visible to toggle the popup. This would really have been the obvious way of implementing the CSS distant rollover had it not been for IE6. When one tries that method on IE6 it turns out that the popup sometimes does not revert back to display:none when the hover is interrupted. Whether it works or not depends on how far away the popup is from the “triggering anchor element”.

    The authors of the Dynamic Drive code snippet must have been aware of all those issues since the problem in Opera was solved by moving the hidden element far to the left out of view:
    Code:
    .thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    background-color: lightyellow;
    padding: 5px;
    left: -1000px;
    border: 1px dashed gray;
    visibility: hidden;
    color: black;
    text-decoration: none;
    }
    You will need that red part too. This should fix your issue. Also not that this removes the unwanted horizontal scroll bar in Firefox 2, IE6/7, Opera 9, and Safari 3 (beta).
    Last edited by koyama; 07-19-2007 at 06:58 PM. Reason: typo

  • #10
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Works fine now. Thanks for all your help, even though I sneaked it when you weren't looking.

    Is there a way to move the caption to the top of the images.
    I have tried everything I can think of with no success.

    Frank - alias effpeetee
    Last edited by effpeetee; 07-19-2007 at 10:04 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •