IE problem (gallery)

[Yizi]

Hi,

My gallery doesn't look right in IE and i can't figure out why? can anyone who is expert in this filed have a look at it and tell me how this can be solved.

http://www.ivyhomes.co.uk/ivyhomes/gallery.php

Thanks,
Yizi

[Centauri]

When sitting things side by side, you have to make sure the maths adds up for the total width, especially in IE6. At the moment, the only reason the thumbs sit next to the main image is due to the <li>s being floated so that the height of the <ul> is zero, and it actually sits above the main image - in IE, the <ul> will surround the <li>s and as the <ul> is not floated the main image cannot sit nest to it.

Fix is to float the <ul> left and make it a fraction narrower, and make the main image container narrow enough to fit. An overflow setting on this container will ensure it doesn't slide behind the float and the auto side margins can be zeroed :

.galleria {
	list-style:none;
	width:190px;
	float: left;
}

.galleria_container {
	margin: 0 0 60px;
	height: 438px;
	width: 520px;
	overflow: hidden;
}

[Yizi]

When sitting things side by side, you have to make sure the maths adds up for the total width, especially in IE6. At the moment, the only reason the thumbs sit next to the main image is due to the <li>s being floated so that the height of the <ul> is zero, and it actually sits above the main image - in IE, the <ul> will surround the <li>s and as the <ul> is not floated the main image cannot sit nest to it.

Fix is to float the <ul> left and make it a fraction narrower, and make the main image container narrow enough to fit. An overflow setting on this container will ensure it doesn't slide behind the float and the auto side margins can be zeroed :

.galleria {
	list-style:none;
	width:190px;
	float: left;
}

.galleria_container {
	margin: 0 0 60px;
	height: 438px;
	width: 520px;
	overflow: hidden;
}

OK i understand what you say and changed the code to what you gave me, what i dont understand is that how i can make the <ul> narrow, you mean by adding a?

.galleria ul { width: xxx;}

if thats not the case how else, and at the moment the width of the pictures are 500px, how small you should think i need to make them to fit properly?

Thanks,
Yizi

[Centauri]

The .galleria class is the <ul> - it was originally 200px and I narrowed it to 190px to allow enough room for the larger image.

[Yizi]

Ahh right so all i have to do now is to narrow the image down right?

[Centauri]

No images need to be changed at all - the images are 500px wide and the .galleria_container is 520px wide.

[Yizi]

well that won't work because if the container is 250px and images are 500px we only get left with 20px and the size of <ul> is 200px as you said... am i right?

[Yizi]

i think i kind of got confused, i have a look at it again and i let you know.

[Centauri]

No, .galleria_container only contains the large image. The list is outside this, contained within #gallery. #gallery is 760px wide - .galleria I changed to 190px wide and .galleria_container I changed to 520px wide, which leaves a 50px wide margin on the right hand side.

[Yizi]

OK i got what you mean now, im very sorry, but this should solve our problem but i made the changes and i still have the problem.

[Yizi]

I have doubled check it looks fine in Firefox but not in IE, neither chrome.

[Yizi]

OK i just learned to new things today, one to calculate the width etc and the other one to clear the catch so i can see the changes, the problem is fixed, thanks so much!