[Solved] Internet Explorer 9 and compatibility mode

[Felix]

I've just discovered that one of my websites is having some issues with IE9 not displaying images. Firefox and Chrome are fine.
Some images ARE being displayed correctly and a lot are just showing a placeholder and the red "X".

I'm at a loss to understand why some work and others dont and it seems the only way for users to view the pages correctly is to turn on IE9's compatibility mode.

The images are a mixed lot, including .jpg .png and .gif and none of them have been created in CMYK, all are RGB pictures.

I've Googled the problem, but haven't been able to come up with a solution that resolves the issue.

Here is the site information:
----------------------------------------------

Cms Version: 1.10.3

Installed Modules:

CMSMailer: 2.0.2
Uploads: 1.14.2
MenuManager: 1.7.7
ModuleManager: 1.5.3
News: 2.12.3
Printing: 1.1.2
Search: 1.7
ThemeManager: 1.1.4
FormBuilder: 0.7.2
CGGoogleMaps: 2.2.7
CGExtensions: 1.28.1
SiteMapMadeSimple: 1.2.6
Captcha: 0.4.5
SelfRegistration: 1.6.14
FrontEndUsers: 1.17
Gallery: 1.5.3
CustomContent: 1.7.3
CGUserDirectory: 1.3
CGCalendar: 1.9.1
CGSimpleSmarty: 1.4.10
JQueryTools: 1.0.10
FileManager: 1.2.0
CGFBApp: 1.0.7
Showtime: 3.1
CMSPrinting: 1.0
MicroTiny: 1.1.1


Config Information:

php_memory_limit:
process_whole_template: true
output_compression: false
max_upload_size: 20000000
default_upload_permission: 664
url_rewriting: mod_rewrite
page_extension:
query_var: page
image_manipulation_prog: GD
auto_alias_content: true
locale:
default_encoding: utf-8
admin_encoding: utf-8
set_names: true


Php Information:

phpversion: 5.2.17
md5_function: On (True)
gd_version: 2
tempnam_function: On (True)
magic_quotes_runtime: Off (False)
E_STRICT: 0
memory_limit: 32M
max_execution_time: 30
output_buffering: On
safe_mode: Off (False)
file_uploads: On (True)
post_max_size: 20M
upload_max_filesize: 20M
session_save_path: /tmp (1777)
session_use_cookies: On (True)
xml_function: On (True)


Server Information:

Server Api: cgi
Server Db Type: MySQL (mysql)
Server Db Version: 5.0.92


----------------------------------------------

[Felix]

Just found this:
http://www.computerweekly.com/news/1280 ... plications. It's an article that's over a year old, though.

Interesting comment - "Even the main Microsoft website has a fudge to work around IE8/9 incompatibility issues".

Just took a look at the page source on the Microsoft website and found this meta tag
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Wondering if I add this tag to my template will it fix the 'image not showing' problem?

Answer is no, it didn't. I added the meta tag to global settings and tried emulating 8, 7 then finally IE6, but the issues with the images wasn't fixed. Haaalp!

Would love any ideas on how to fix this...

[Dr.CSS]

Might be a problem with the images names, do they have spaces in them?...

A link to the site would help...

[Felix]

Hi DrCSS,
I've checked some of the non-appearing images for spaces etc and I don't think that is the issue. I've tried changing some of the image names and included hyphens and it hasn't fixed the problem.

Here are some hyperlinks: It's really weird - images on the front page work fine, but images on the scorecard and pennant pages don't.

[Dr.CSS]

First you need to clean up your HTML...

http://validator.w3.org/check?verbose=1 ... rd%2Ffirst

[Mieszko]

Just an idea...

Try to activate developer tools in IE.(F12)
When inspecting image-paths you'll see that it tries to find it at
src=http://www.cheltenhamgolf.com.au/course/scorecard/uploads/images....

which of course is wrong.
So maybe it has to do with your pretty urls setup?

[Jos]

When inspecting image-paths you'll see that it tries to find it at
src=http://www.cheltenhamgolf.com.au/course/scorecard/uploads/images....

which of course is wrong.
So maybe it has to do with your pretty urls setup?

This typically indicates that you probably don't have a {metadata} tag in the head section of your template

The documentation tells:

Add the {metadata} plugin call to the <head> section of your templates. This will automatically insert the base href tag to your site's root so that relative paths to files and images function as expected.

All the default example templates contain this tag, some of them with a "don't remove this" remark

[Felix]

Hi all,

Thanks DrCSS - I'm working my way through that list!

Jos - the templates were standard CMSMS ones and they do have the {metadata} tag. Maybe the issue was the pretty urls but for some reason the issue seems to have resolved and IE9 now views the pictures correctly, (although it still shows the compatibility button).

Thanks for the suggestions and assistance - very much appreciated.