Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Center area post/pages (http://forum.bytesforall.com/forumdisplay.php?f=32)
-   -   [SOLVED] Image display problems in IE (http://forum.bytesforall.com/showthread.php?t=12023)

deluxcanuck Jan 5, 2011 07:37 AM

[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

juggledad Jan 5, 2011 11:15 AM

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?

deluxcanuck Jan 5, 2011 02:56 PM

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.

juggledad Jan 5, 2011 03:32 PM

copy exactly the code you used

deluxcanuck Jan 5, 2011 03:48 PM

<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.

juggledad Jan 5, 2011 06:22 PM

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

deluxcanuck Jan 5, 2011 11:57 PM

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.

juggledad Jan 6, 2011 04:20 AM

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 :) )

deluxcanuck Jan 6, 2011 02:36 PM

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 ??)

juggledad Jan 6, 2011 03:17 PM

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.

deluxcanuck Jan 6, 2011 11:40 PM

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

deluxcanuck Jan 7, 2011 12:49 AM

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?

deluxcanuck Jan 7, 2011 01:00 AM

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


All times are GMT -6. The time now is 03:16 AM.

Powered by vBulletin® Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.