Thumbnails very small

[libralion]

Hi everybody,
I am busy with a new layout for my website.
I have a gallery and I notice that the thumbnail images are being displayed very small. Somehow they are all displayed next to another. I have the same script as I have on my old website and there it works very well. So I think it must be some sort of css setting.
Can somebody help me with this?
This is my testpage: http://www.patriciakaas.nl/test2.htm

Johanna

[MisterNeutron]

The size of the thumbstrip thumbnails is set in the CSS:

Code: Select all

.highslide-thumbstrip-horizontal img {
    width: auto;
    height: 40px;
}

Just change the height - the width will adjust automatically to preserve the aspect ratio.

I don't understand your comment about how the thumbnails are all displaed next to each other - this is a thumbstrip, so that's what they're supposed to do! Perhaps you could give us a link to your old website, so we can see how you want things to look.

[libralion]

Thanks for your answer, but it isn't the heigth that it isn't alright. It is the width of the thumbnails.
On my old site there is an arrow at the right and it only displays a certain amount of thumbnails.
On my new site all the thumbnails are displayed and since I have 59 of them you can't see them very well.
Here is my old site: http://www.patriciakaas.nl/foto.htm

Johanna

[libralion]

Checked my new site in IE and FF too and there the thumbnails are fine.
The weird thing is that my old site plays fine in Chrome.
So it has something to do with the css of the new site and Chrome.

Johanna

[MisterNeutron]

Ah, yes, I see the problem. It's only in Chrome. So far, I can't figure out which piece of the CSS is causing it, but I'll keep looking. Maybe RoadRash will check in - she's usually better at spotting things like this than I am!

[libralion]

Yes Hilde is very good in CSS.

Johanna

[MisterNeutron]

I'm getting closer, but still can't pin it down. If I don't load these three stylesheets, the thumbstrip is back to normal:

Code: Select all

<link href="scripts/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="scripts/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
....
<link href="styles/custom.css" rel="stylesheet" type="text/css" />

It probably involves something in the handling of <table>, <tr>, or <td> elements, or perhaps <img>.

[MisterNeutron]

I've zeroed in on it. If I eliminate these two attributes, things look fine:

In both custom.css and bootstrip.min.css:

Code: Select all

img {
     max-width: 100%;
}

If I turn off both of those, the thumbstrip behaves.

[MisterNeutron]

And I believe this is the easy fix - in your highslide.css, add this:

Code: Select all

.highslide-thumbstrip img {
     max-width: none;
}

(BTW, if you Google for chrome img max-width, you'll find that this is a long-standing, well-known bug in Chrome!)

[libralion]

MisterNeutron you are the best! Thanks a lot. It works like a charm now!
Keep up the good work!

Johanna

[MisterNeutron]

Glad that fixed things.

RoadRash is better at this than I am, but I can sometimes get to the desired result if I keep plugging away at it!