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

[fredo]

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

[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

[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

[fredo]

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

[fredo]

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

[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

[fredo]

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