Need help with css image gallery IE6

[designkitt]

Hello,
I have created an image gallery in css that works fine in firefox & IE7, but not in IE6. There is also a problem with alignment in IE6 on the right side of the page too. Does anyone have any suggestions that might make this work?

Here are links to the css and html files:

http://kittelbergerdesign.com/JBarber/portfolio.html
http://kittelbergerdesign.com/JBarber/testpage6.css

[Veronica]

IE6 is very buggy with hover and css.

A fix that might work, is to try changing something on hover that it might recognize, for example the size of the border. Try using

#container a.gallery:hover {
    border:2px solid #000;       /* 2px instead of the original 1px*/
    }

I'm not sure where you got this script, but there's also a nice DD script for this that does work in IE at http://www.dynamicdrive.com/style/cs...image-gallery/

[designkitt]

Veronica I tried using 2px but that just through the alignment off in IE7 when hovered. Unless anyone else has another idea to fix this, I may have to recreate using the DD script.

Any idea why the alignment is off... extra space on the right?

[boogyman]

buggy ? IE6 doesnt support hover... that is why javascript is required for it

[designkitt]

Well I worked up a gallery with the Dynamic Drive code and it works great in IE7, firefox (on my mac) and safari. Just a few problems I cannot figure out how to fix. The enlarged image is not centered in the pop up frame and there isn't any space between and I do not know how to decrease the space between the thumbnail images left and right.

Not sure how it works in IE6. If anyone out there gets the chance, please check this page in IE6. A larger image with text should pop up to the right.

Here's the url:
http://kittelbergerdesign.com/JBarber/portfoliodd.html

Thank you!

[Veronica]

Actually, IE6 does support :hover on anchor tags, which is what this script was using.

And yes, to answer the last question - it does work fine in IE 6 now.

One thing - you might want to change the style for your default image. It needs a border, and perhaps some re-sizing, otherwise it jumps when you go to the new images.

[designkitt]

I would like to add a border. Do you know if I can add coding to do this or do I have to create one in photoshop? I will also adjust the size. It does have that annoying jump when hovered.

Thanks veronica!

[Veronica]

Since it's a background image, I would probably just add the border in photoshop and adjust the size so it matches the other images with their border.

[designkitt]

So glad this is working in IE6. That script was a great suggestion. Just had a chance to view this myself.

Veronica I noticed in IE6 that on the right side both the banner and footer are not aligning since there is a small space between them and the background. I did add a clearit div but that does not seem to be helping. Any idea how to correct this?

[Veronica]

I just noticed it. It looks fine in other browsers, just not IE6. If the client uses IE6, maybe you could tell them it's not a flaw, it's a new design feature? I'll try looking at it later today more closely.