CSS Image Gallery problem

[Betong]

1) Script Title: CSS Image Gallery

2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...image-gallery/

3) Describe problem:
I have used this script on two websites. 1 is uploaded to the Internet and the other isn't as yet. I have used the scripts exactly as on the DD site, without alteration.

The site that is up-loaded works fine in both FireFox 2 and IE 7.

The other site is still under construction. The code works ok in this site as well, except for one thing. In IE 7 the captions under the large pics displays one word only per line instead of all the words on the one line. But it displays correctly in FireFox 2.

Is this because it is not uploaded to the Internet?

Also is there a setting I can change to make the text under the large pics longer? Currently it takes up about 43% of a 480 width pic. I would like to extend it to about 60% or 65%.

As a matter of interest, I think CSS Image Gallery is a great bit of coding.

[jscheuer1]

Without seeing the installation it would be hard to say for sure. However, it is unlikely that just going live would change the layout of the page. And it's likely that you have some width set for something that is causing the text to wrap. I'd guess it's the width of the gallerycontainer div. But it could be a parent element of that div. Or something else - as I say, hard to tell without seeing the page.

If you need more help, put the page up live somewhere, just as a test page if you like, and post a link to it.

Please post a link to the page on your site that contains the problematic code so we can check it out.

[Betong]

Hi John,

Thank you for your reply. I should have thought of that. I'll put up the problem page tomorrow and post a link to it. I'll also post a link to the page that is working.

Many thanks.

[Betong]

Hi John,

In case you are monitoring this thread I have put up a new one as this was getting a bit old. It was put up on 17 June.

The new Thread has the URLs in it that the problem scripts are on. But here is a copy of that post to save you searching for it.

http://www.edible-advertising.com/about.html

This site which is still under final construction, but is basically okay. The code works ok in this site, except for one thing. In IE 7 the captions under the large pics displays one word only per line instead of all the words on the one line. But it displays correctly in FireFox 2.

I have used this script on on another web site at these 2 pages:
http://www.bouldercombe-district.com...-tea-2007.html and
http://www.bouldercombe-district.com...-tea-2008.html

Both pages work fine in IE 7 and FireFox 2.

The only changes I have made to the scripts is the highlighted lines below.

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px; I have changed the value to -500px
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
I also added: text-align: center; Because I wanted the text to be centred.
}

But I have also experimented with changing all altered values to the same on all three pages and I still have the same results.

I am stumped.

Also is there a setting I can change to make the text under the large pics longer? Currently it takes up about 43% of a 480 width pic. I would like to extend it to about 60% or 65%.

Despite all this I still like the script. Just wish it would work better in IE on the new site. I know it is probably something silly that I have done but can't see.

[jscheuer1]

Your 'working' pages' links are broken. The non-working page is in quirks mode. If the working pages use a valid URL DOCTYPE, that might be the difference. However, at least in IE 7, the non-working page seems to respond well to:

.thumbnail span { /* CSS for enlarged image */
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px; /* I have changed the value to -500px */
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
text-align: center; /* added Because I wanted the text to be centred */
white-space:nowrap;
}

[Betong]

Thanks John, that works fine as you said.

I am a long way from knowing as much as I would like to.

I really appreciate the help.