Tiny Thumbnails in IE 7

[threetree]

I have a gallery installed on a test page. It looks great in FireFox but the thumbnails which are 110 x 90px display as tiny images in IE7. Can't figure out how to have IE display the images at the correct size. http://www.threetree.com/cauhaus/residential.htm

[threetree]

I found some info in another entry regarding creating a table and stripping the ul/li tags. I tried it in another version of the page and the thumbs are the correct size in IE. I just have to remove the border around each image. Is this the correct solution to the tiny thumb problem? http://www.threetree.com/cauhaus/gallery_table.htm I need to resolve the table cell spacing. If I reduce margin to 0px in the editor and then add cell padding would that work? Haven't figured out the size need for each cell. Right now margin is 4px, thumb width is 110px.

Well, with the table the slide show no longer works in IE. Guess the table isn't the solution after all.

[RoadRash]

Hi,

This happens because you have changed width and height for "Outer box for galleries" (.highslide-gallery ul li) when you created your gallery in the Editor - probably to get rid of the frame around the thumbnails. When you did this, you used width and height that was much smaller than the real size of the thumbnails (width: 50px, height: 40px) so you need to set the width and height to the real size of the thumbnails (width: 110px, height: 90px).

Find this at the bottom of your highslide.css file:

Code: Select all

.highslide-gallery ul li {
	width: 50px;
	height: 40px;
	border: 0px solid #D0D0D0;
	background: #EDEDED;
	margin: 4px;
}

Change it to:

Code: Select all

.highslide-gallery ul li {
	[hilight]width: 110px;[/hilight]
	[hilight]height: 90px;[/hilight]
	border: 0px solid #D0D0D0;
	background: #EDEDED;
	margin: 4px;
}

[threetree]

It solved the problem. Located the edited css and made the change. Thank you!

[LiSkynden]

I had the same problem, so thanks for this, but i also have a problem with IE8 (maybe in all of them) where the thumbnails have an extra white border like this



I only want that dark red one and this is propably something i did in Editor, but what it is? It doesnt show in FF,Safari, Opeta, Chrome ... yeah, haha but in IE.
It should look like this

[LiSkynden]

Ok, i got close enough by removing the border

Code: Select all

.highslide img {
	border: 0px solid #611D10;
}

and then fixing it in the width and height

Code: Select all

.highslide-gallery ul li {
	width: 55px;
	height: 107px;
	border: 0px solid #D0D0D0;
	background: #611D10;
	margin: 3px;
}

It looks nice on IE8 now, and quite nice on IE6 that i have on my XP machine ...
See ya