468,170 Members | 2,006 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,170 developers. It's quick & easy.

Further to: css-only image popup when hover image link: is it possible?

A few days ago, Jim answered (THANK YOU, Jim) my question about how to
make an image pop up when an image link is hovered. That discussion is
here:

http://groups.google.com/group/comp....b2599e189fce58

Jim's stylesheet made everything work beautifully in FF; and in IE,
too. But when I changed his stylesheet to display thumbnails
horizontally rather than vertically (change display:block to
display:inline), things didn't go so well in IE (still works perfectly
in FF). Under IE, each thumbnail is displaced left by 4 or 5 px when
it's hovered. The problem shows up innocently (the rest of the site has
ADULT content) here:

http://www.simple-nude.com/demo.html

I've tried to change padding and border-width, but neither has any
effect.

Can someone tell me why the four thumbs are displaced left when I hover
them, please? Some evidence might be seen in the bogus
underline-looking graphic at the right-bottom of each thumb.

Thanks and thanks again.

-- fredo

Nov 29 '06 #1
6 5610
Nik
fredo wrote:
>
http://www.simple-nude.com/demo.html

I've tried to change padding and border-width, but neither has any
effect.

Can someone tell me why the four thumbs are displaced left when I hover
them, please? Some evidence might be seen in the bogus
underline-looking graphic at the right-bottom of each thumb.
The problem disappears (IE6) when I remove the lne
div#links a:hover {border:0px black dashed;}
from your CSS. I can't offer any insight as to why this might be.

Nik
Nov 29 '06 #2
Nik
Nik wrote:
fredo wrote:
>>
http://www.simple-nude.com/demo.html

I've tried to change padding and border-width, but neither has any
effect.

Can someone tell me why the four thumbs are displaced left when I hover
them, please? Some evidence might be seen in the bogus
underline-looking graphic at the right-bottom of each thumb.

The problem disappears (IE6) when I remove the lne
div#links a:hover {border:0px black dashed;}
from your CSS. I can't offer any insight as to why this might be.

Nik
The underline effect can be cleared by adding text-decoration:none to
div#links a{}.

Nik
Nov 29 '06 #3
Nik wrote:
The problem disappears (IE6) when I remove the lne
div#links a:hover {border:0px black dashed;}
from your CSS. I can't offer any insight as to why this might be.
Yes, the thumbnails don't move with that change, but in that case the
larger image doesn't show up for me. Nik, can you please tell me if the
larger image (.im2) pops up when you take that line out? If so, what
version of IE? Thanks, Nik.

I should have said before that I'm using IE6.

And thanks for pointing out that the underline fragments go away when I
say text-decoration:none.

-- fredo

Nov 29 '06 #4
Nik wrote:
The problem disappears (IE6) when I remove the lne
div#links a:hover {border:0px black dashed;}
from your CSS. I can't offer any insight as to why this might be.
Yes, the thumbnails don't move with that change, but in that case the
larger image doesn't show up for me. Nik, can you please tell me if the
larger image (.im2) pops up when you take that line out? If so, what
version of IE? Thanks, Nik.

I should have said before that I'm using IE6.

And thanks for pointing out that the underline fragments go away when I
say text-decoration:none.

-- fredo

Nov 29 '06 #5
Nik
fredo wrote:
>
Yes, the thumbnails don't move with that change, but in that case the
larger image doesn't show up for me. Nik, can you please tell me if the
larger image (.im2) pops up when you take that line out? If so, what
version of IE? Thanks, Nik.

I should have said before that I'm using IE6.
You know, I was so hung up on the moving thumbnails that I never looked
at the **** popup!

Anyway, the problem is that you have white space betwen the two <img>
tags in each <a>. If you delete this so that instead of

<a>
<img>
<img>
</a>

You have
<a>
<img><
img>
</a>

You will see the jumping disappear.

I'm, on IE6, at least for the rest of today.

Nik
Nov 29 '06 #6

Nik wrote:
Anyway, the problem is that you have white space betwen the two <img>
tags in each <a>. If you delete this ... You have
<a>
<img><
img>
</a>

You will see the jumping disappear.
Nik
That works perfectly! That you Nik and Jim.

-- fredo

Nov 29 '06 #7

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

27 posts views Thread by hholidayy | last post: by
145 posts views Thread by Mark Johnson | last post: by
37 posts views Thread by Jeff Thies | last post: by
7 posts views Thread by Kerberos | last post: by
13 posts views Thread by dave | last post: by
30 posts views Thread by Diane Wilson | last post: by
7 posts views Thread by Paul Watt | last post: by
59 posts views Thread by phil-news-nospam | last post: by
1 post views Thread by shapper | last post: by
reply views Thread by kamranasdasdas | last post: by
reply views Thread by gcreed | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.