...

View Full Version : Why do my images disappear?



mbabb
07-18-2007, 12:27 AM
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:



/* 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:



<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!

koyama
07-18-2007, 05:49 AM
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:


.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/csslibrary/item/css-popup-image-viewer/

mbabb
07-18-2007, 09:27 PM
Koyama, thank you again for your speedy responses! Sorry mine aren't so quick ...


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?



.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;
}

koyama
07-18-2007, 11:02 PM
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 (http://www.satzansatz.de/cssd/tmp/apboxpercentagewidth.html). 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:


.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:


.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:

a:hover span
you will have to apply a kick [1] to this selector in order that the above one works:

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:


.thumbnail:hover {
z-index: 50;
background-color: transparent;
background-position: 0 0; /* kick IE6 */
}

[1] http://www.satzansatz.de/cssd/pseudocss.html#hoverlimited

mbabb
07-19-2007, 01:07 AM
You, sir, are a bonafide genius.

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

effpeetee
07-19-2007, 10:11 AM
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

koyama
07-19-2007, 01:44 PM
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)


.thumbnail {
background-color: transparent;
}
.thumbnail:hover {
background-color: transparent;
}

This works in IE6:


.thumbnail {
background-color: transparent;
}
.thumbnail:hover {
background-color: white;
}

Surprisingly, this also works in IE6 (The original Dynamic Drive version)


.thumbnail {
}
.thumbnail:hover {
background-color: transparent;
}

This works in IE6


.thumbnail {
}
.thumbnail:hover {
background-position: 0 0;
}

This does not work in IE6:


.thumbnail {
background-position: 0 0;
}
.thumbnail:hover {
background-position: 0 0;
}

Some more about this: http://friendlybit.com/css/ie6-bug-ignored-selector-hover-bug/

effpeetee
07-19-2007, 02:21 PM
Just out of interest.

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

is a complete mess in Opera.

Frank - alias effpeetee

koyama
07-19-2007, 05:53 PM
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 (http://archivist.incutio.com/viewlist/css-discuss/76330).

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:


.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).

effpeetee
07-19-2007, 07:52 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum