[SOLVED] Image display problems in IE
 

I have built a table to hold three images. The centre and right images display correctly in all browsers but the image in the left table box is really, really tiny in IE, though it shows properly in Firefox, Chrome and Safari.

I've searched the forum and tried a few things recommended, like deactivating the empty left sidebar (didn't work) or putting something in it (didn't work). I've also re-saved the image and uploaded it again but it still hasn't changed. The page source shows it as the size it should be displaying at, but isn't.

Hope you can help.
Cathie

http://lascalles.lu

what are the three images, do they show on the front page?
does it change size when you resize the page?
Do the other images change size?
what code did you use to add them to your page?
is there a difference in the code between the images?

Two of the images are jpegs, which is what the problematic logo is (the Spanish Embassy). The third image is a png (Peruvian embassy). I believe it's the front page - I'm not sure about the terminology. If I look under Reading Settings I have Home (the name of my page) designated as Front Page.

I just tried to resize the page in Firefox and NO they do not resize but they do in Safari. WTF?

As for code, I used HTML. That's all I know.

<table style="width: 100%;" align="center">
<tbody>
<tr>
<td><a href="http://lascalles.lu/wp-content/uploads/2010/11/spain2.jpg"><img class="alignright size-full wp-image-54" title="spain2" src="http://lascalles.lu/wp-content/uploads/2010/11/spain2.jpg" alt="Spanish Embassy logo" width="146" height="156" /></a></td> etc., etc.

I don't know what you mean about a difference in code between the images. The next two images are put in <td> as well. The only difference is alignment (center for middle image, left for right image).

Am I making sense? I'm pretty new at this so I may not be explaining myself clearly.

copy exactly the code you used

<table style="width: 100%;" align="center">
<tbody>
<tr>
<td><a href="http://lascalles.lu/wp-content/uploads/2010/11/spain2.jpg"><img class="alignright size-full wp-image-54" title="spain2" src="http://lascalles.lu/wp-content/uploads/2010/11/spain2.jpg" alt="Spanish Embassy logo" width="146" height="156" /></a></td>
<td><a href="http://www.vdl.lu/" target="_blank"><img class="aligncenter size-medium wp-image-8" title="vdlux" src="http://lascalles.lu/wp-content/uploads/2010/11/vdlux-300x174.jpg" alt="&quot;Ville de Luxembourg logo&quot;" width="155" height="88" /></a></td>
<td><a href="http://lascalles.lu/wp-content/uploads/2010/11/peru_embassy3.png"><img class="alignleft size-full wp-image-56" title="peru_embassy3" src="http://lascalles.lu/wp-content/uploads/2010/11/peru_embassy3.png" alt="Peruvian Embassy logo" width="146" height="156" /></a></td>
<span id="__caret"> </span></tr>
</tbody>
</table>

I have to admit I used the wysiwyg table maker.

ok, now I want you to examine the three table cells (everything from the <td> to the </td>) and tell me what is different about them

Two cups of coffee later and after doing an in-depth analysis by copy & pasting them in TextWrangler all I can see is that the two embassy logos probably shouldn't be links (the problem with wysiwyg editors) but other than that they look the same. I do see some things that should be cleaned, like the quotes around the alt text for vdl being just one. Other than I don't see any differences. All the end tags are there. The spacing is all the same.

I'm at a loss! What did I do wrong?

I didn't put span id tag in either. Don't know what that does, that's how simple my skills are.

did you notice that two of the images have a class of 'size-medium' and one has a class of 'size-full'

these classes have different CSS rules applied to them causing the element (in your case the images) to behave differently. Try changing them all to 'size-full'

(p.s. sorry I'm going to have to give you a 'D' - but if you spent two cups of coffee looking, I'll give you a 'A' for effort :) )

Wow! Who'd have thought that something so minor (in my eyes) could be so important? So I took the logo, resized it in Photoshop, uploaded, inserted and saved it. Miracle of miracles the Spanish Embassy logo now is the right size in IE!! Yay!

One tiny, tiny glitch. Now the Ville de Luxembourg logo doesn't show in IE. W.T.F!!!

I can see it in Safari, Chrome and Firefox but not in IE. Why does IE even exist????

Now what have I done wrong? The only difference I can find is that I'm using an exterior link on the image. (Do I get an A for thinking of that :o ??)

I think it has to do with the color space - the images that work are RGB, the one that doesn't is CMYK and IE is very picky.

But why did it show before? It was always CMYK.

Oh for God's sake! I converted it to RGB and guess what? It works in IE! Picky, picky, picky.

How do web designers maintain their sanity when working with IE?

I forgot to thank you, so Thank you! I would never have figured this out on my own.