Question

I have a WordPress site that uses a JQuery plugin called Hover-Caption ( https://github.com/coryschires/hover-caption ).

The main page of site: (http://brighidfitzsimons.com) looks good.

However in Internet Explorer 9, a similar page based on Category adds a 282px top offset to the post thumbnail image. (http://brighidfitzsimons.com/category/lifestyle/)

I am new web developer so I am struggling to figure out how to isolate problem. Based on this stackoverflow entry ( How do I get rid of an element's offset using CSS? ) my current train of thought is to add a IE specific CSS sheet to ‘reverse’ the offset but I can’t seem to get at the offending element. Also I’m confused why works on main page but not on category page. If you watch page loading carefully, it initially loads correctly then at the very end the images are moved down. Perhaps this is a clue.

First stackoverflow entry so I hope I have followed correct ettiquete. Please advise if you need me to provide any more information.

Thanks for taking time to read problem.

Regards Simon

Answer 1

It has something to do with the substitutions of the content inside the title, probably some quirk about ie9 which someone else would have more of an idea for me
just so you can take my word for it: http://jsfiddle.net/BXjK3/
the first two i have removed all the greater, lesser and quotes and it works, but I would say the browser does the substitutions before Javascript can see it, and it all goes down-hill

edit: worth mentioning the reason it looks like that is because the text is no longer properly contained, and so the display none is not taking effect on it, pushing all the images down and making it a jumble, due to the way the content is loaded the ie inspection cannot show me how the text is after the javascript, only what was loaded on page load, so i can’t give you more help than that