Image Caption plugin problem with IE9 [SOLVED]

[gollum]

Having solved the problem with Lightbox and IE9 (see separate post), I am left with the problem of image captions generated with the Image Caption plugin not displaying correctly in IE9. I am mystified by this and despite having looked carefully at the code am quite unable to find a solution!

The caption text which on all other browsers appears under the image, in IE9 appears to the right or left at the top of the image depending on the alignment. An example can be seen on the home page at http://www.veloclubrutland.org.uk although of course you can only see the problem with IE9. The problem only occurs in IE native mode, compatibility mode does work - by which I mean the caption is under the image and is the same as in Firefox/Safari/IE6-8.

If any html/css gurus can point out what the problem is, I can fix the plugin. Thanks for reading.

[Dr.CSS]

I would try using either the jQuery no-conflict call in your jquery function call instead of in a js call above it, or use the jquery lightbox script so it doesn't conflict with scriptaclous one...

[gollum]

Thanks for thinking about this problem but it is not caused by jQuery conflicts. The problem does not impact browsers other than IE9 and the Image Caption plugin does indeed transform something like:

Code: Select all

<img style="float: left;" title="The title text" src="uploads/images/Pictures/Paul.jpg" alt="" width="200" height="257" />

into:

Code: Select all

<div style="width: 200px;" class="captionborderright">
<img class="rightcaption" style="float: right;" title="The title text" src="uploads/images/Pictures/Paul.jpg" alt="" width="200" height="257">
<p class="captiontext">The title text<p>

In browsers other than IE9 the caption text appears under the image whilst in IE9 it appears to the left of the right aligned image.

The problem is with the way the css is actually rendered. Whilst my knowledge of CSS is limited, in this case I think IE actually gets it right. I think that we need a block level element to hold the caption text.

Changing the Image Caption plugin such that it transforms the img tag to the following:

Code: Select all

<div style="width: 200px;" class="captionborderright">
<img class="rightcaption" style="float: right;" title="The title text" src="uploads/images/Pictures/Paul.jpg" alt="" width="200" height="257">
<div class="captiontext">The title text</div>

That is changing the <p> element to a <div> cures the problem and the caption text is displayed corretly in all the browsers I have tried including IE9.

I hope that will help anyone else who encounters this problem with this useful plugin.

Oh, and you will also need to change the image caption css file such that the element is styled correctly i.e. change the p.captiontext to div.captiontext

[Dr.CSS]

Maybe changing the css to display:block on the p would have helped, <p> is a block element but maybe ie9 doesn't understand that it is, wouldn't be the first time IE didn't understand a standards compliant call...

[gollum]

Postscript.

Whilst the above is true, there is a further problem if ImageCaptions appear on the same page as another element which requires prototype.js i.e. lightbox in Gallery or Album which casues the caption text to render in the "wrong" place in IE9.

The solution, discovered after a lot of experimentation, is to upgrade jQuery to version 1.5.X, this in addition to having to upgrade prototype to the latest IE9 compatible version to get Lightbox to work with IE9. Not sure what version of jQuery comes with CMS Made Simple but I had 1.4.2.

So in the end I have something which renders pages with Ligthtbox and ImageCaptions the same in IE 9 as in other browsers. To summarise:
Update prototype.js
Update jQuery.js
Modify ImageCaptions to contain the captiontext in a DIV element.