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

[jscheuer1]

Seems to jump to me in all browsers. Adding the border to the image in your image program might be best. If you still want the effect of the border appearing, though, try:


.gallerycontainer{
background:url(images/7378emainstbkgrd.jpg) 393px 4px no-repeat;

}

These adjustments of a few pixels worked well in FF. However these may vary with browsers. In IE, conditional comments may be used to fine tune, even to fine tune IE versions.

[Veronica]

The jumpy effect IS in all browsers. And hopefully the border, style changes, et al will fix it.

But what I only see in IE6 (and can't figure out) is a space to the right of the top bar (the "jan barber... making your move a memorable one..."), and a space to the right of the footer. All the margins widths seem to add up. ???

[jscheuer1]

OK, I see you made those few pixels adjustment and that seems to take care of the jump in all browsers. I see what Veronica is seeing in IE 6. This (red) placed after your stylesheet link takes care of that:


<link href="testpage6.css" rel="stylesheet" type="text/css"/>
<!--[if lte IE 6]>
<style type="text/css">
#wrapper {
width:757px;
}
</style>
<![endif]-->
<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.galleryco . . .

This, by the way, in your main style sheet is wrong:


body {

background-image:url(images/bkgrdstripes.jpg);
font-family: tahoma; arial, sans-serif;
font-size:76%;
letter-spacing:0.05em;


}

It should be a coma.

[designkitt]

John, I added the code for the alignment problem in IE6. I am unable to check this out until tomorrow morning when I have access to IE6. Hopefully it worked.
I also changed the problem in the body tag.

I just noticed tonight that in Safari the text is underlined (like a link) I think because of the a href for the gallery. I tried moving the end tag </a> so it came before the text, but then the script doesnt work. Is there anyway to correct that. Not a big deal though because not to many people are using this browser anyway.

Thank you so much Veronica and John for all your help!!

Here is a new link to this page:
http://kittelbergerdesign.com/JBarber/portfolio.html

[jscheuer1]

Looking good in IE 6 here! About Safari, if you mean the:

portfoliosubheading

and other text that appears under the images, you may have to explicitly set it to text-decoration:none; inline or in the stylesheet. I cannot be certain about the best way to do this in the stylesheet because it isn't a problem in the browsers I have and shouldn't be in Safari either.

Some ideas:



p.portfoliosubheading {
color: #000;
font:normal 15px palatino, serif;
text-align: center;
line-height: 1.2em;
text-decoration:none;
}


a p {
text-decoration:none;
}


.thumbnail span p {
text-decoration:none;
}

There is always inline:


<a class="thumbnail" href="#thumb"><img src="images/222shorehamsm.jpg" width="100px" height="75px" border="0" /><span><img src="images/222shorehamdr.jpg" /><br />
<p><strong style="text-decoration:none;">Stately Traditional c1929</strong></p>
<br/>
<p class="portfoliosubheading" style="text-decoration:none;">
222 Shoreham Drive
<br/>
Brighton, New York
</p></span></a>

Technically speaking, a <p> cannot be inside either an <a> or a <span>. That may be what is throwing Safari off. You should be able to get the same sort of layout without putting a block level element like <p> inside of an inline element like <span>. That may or may not make Safari happy without requiring additional (text-decoration) styles, but would require styling the .thumbnail class to text-align:center; and some of the other styles used by your contained <p> elements. I worked out this:


<a class="thumbnail" style="text-align:center;color:black;font-family:palatino,serif;font-size:16px;" href="#thumb"><img src="images/222shorehamsm.jpg" width="100px" height="75px" border="0" /><span><img src="images/222shorehamdr.jpg" /><br />
<strong style="line-height:2em;">Stately Traditional c1929</strong>
<br/>
<span style="font-size:15px;position:static;">222 Shoreham Drive
<br/>
Brighton, New York</span>
<br></span></a>

The inline styles I used could be included in the stylesheet instead, but this is assuming this helps out in Safari to begin with and/or that you want to avoid the invalid markup of having a <p> inside a <span>.

[berrigan]

This thread is super old... but the problem still exists. I figured out that in order to avoid those annoying underlines in Safari, you have to explicitly set:

a.thumbnail {
text-decoration: none;
}

With more and more people using iPhones, iPods and iPads, it would be wise to fix!