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

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

fredo - 29 Nov 2006 10:32 GMT

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.infosystems.www.authoring.stylesheets/browse
_thread/thread/e9a21d6f46ac7168/40b2599e189fce58?hl=en#40b2599e189fce58

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

Reply to this Message

Nik - 29 Nov 2006 10:42 GMT

> http://www.simple-nude.com/demo.html
>
[quoted text clipped - 4 lines]
> 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

Reply to this Message

Nik - 29 Nov 2006 11:16 GMT

>> http://www.simple-nude.com/demo.html
>>
[quoted text clipped - 10 lines]
>
> Nik

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

Nik

Reply to this Message

fredo - 29 Nov 2006 13:39 GMT

> 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

Reply to this Message

Nik - 29 Nov 2006 14:26 GMT

> 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

Reply to this Message

fredo - 29 Nov 2006 17:18 GMT

> Anyway, the problem is that you have white space betwen the two <img>
> tags in each <a>. If you delete this ... You have
[quoted text clipped - 5 lines]
> You will see the jumping disappear.
> Nik

That works perfectly! That you Nik and Jim.

-- fredo

Reply to this Message

fredo - 29 Nov 2006 13:48 GMT

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

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / November 2006

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