IE 9 Suddenly Not Displaying CSS on Wordpress Site

I was wondering if anybody has a clue why this wordpress site, that uses a supposedly cross browser theme, would look so funky in IE 9? It looks the CSS is nowhere to be found. In other browsers it seems to be fine. To the best of my knowledge it looked fine on IE 9 a while ago. Now it’s all this …


If you look at it in another browser, you get something much better:


Not sure what’s causing the insanity.

Here’s the live site: http://cullitonquinn.com/

Thanks

I just tried to open the site in FF and received the following message:

Revolution Slider Error: You have some jquery.js library include that comes after the revolution files js include.
This includes make eliminates the revolution slider libraries, and make it not work.

To fix it you can:
1. In the Slider Settings -> Troubleshooting set option: Put JS Includes To Body option to true.
2. Find the double jquery.js include and remove it.

To the best of my knowledge, it looks like you might have changed something “a while ago” to cause the problem.
Good luck. :slight_smile:

Thanks ronpat. Seems to have worked … when I check the site in IE9 at browserstack.com, the slider still doesn’t show up. And yet in an actual version of IE 9 I can see the slider functioning … In your expertise, does this indicate further trouble?

Thanks

Firefox is happy with the slider today… no error messages. I do not have a copy of IE9 in which to test and I have no experience with browserstack. I really cannot offer anything more.

The error message that appeared in FF mentioned double jQuery includes. I do not know what that means, but I noticed the following duplication:
These 2 <script> lines: 180,181
are duplicated here: 601,602

As an aside, I also noticed that the following <ul> is improperly constructed. First child elements must be <li>s; no <p>s are allowed outside of <li>s :slight_smile:
(lines 582-589)


<ul>
<!--Facebook-->[color=red]</p>[/color]
<li><a href="https://www.facebook.com/culliton.quinn.landscape" target="_blank"><img style="margin-top:6px;margin-left: 4px" class="align right size-full wp-image-63" alt="Facebook" src="http://cullitonquinn.com/wp-content/uploads/2014/03/cq-facebook-opt.png" width="21" height="21" /></a></li>
[color=red]<p><!--houzz--></p>[/color]
<li><a href="http://www.houzz.com/pro/culliton-quinn/culliton-quinn-landscape-architecture" target="_blank"><img style="margin-top:6px;margin-left: 2px" class="align right size-full wp-image-64" alt="Houzz" src="http://cullitonquinn.com/wp-content/uploads/2014/03/cq-socialicons-houzz-opt.png" width="21" height="21" /></a></li>
[color=red]<p><!--Pinterest--></p>[/color]
<li><a href="http://www.pinterest.com/cullitonquinn/" target="_blank"><img style="margin-top:6px;margin-left: 2px" class="align right size-full wp-image-63" alt="Facebook" src="http://cullitonquinn.com/wp-content/uploads/2014/03/cq-socialicons-pinterest-opt.png" width="21" height="21" /></a></li>
</ul>

Another off-the-wall thought… it seems logical that IE9 might have a problem emulating IE10. Maybe there is a better place to put this tag: (or maybe < IE10 ignores it)


<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10">

There are probably other issues affecting IE9 and the slider. This is about all I can offer.

It can’t:)

All that meta tag will do is ensure that IE10 and IE11(+) will render in ie10 mode (which basically holds the browser back as you lose the improvements and stability of ie11). It may have been ok to use it earlier on when newer versions of IE were usually more broken than the last but those days have changed.

To stop IE9/8 pages defaulting to quirks mode it would be better to use the “edge” value instead. In that way when an error is encountered it won’t drop into quirks mode (why that was a good idea anyway is beyond me as it seems to have caused more problems than it fixed).


&lt;!--  Force IE to use the latest version of its rendering engine --&gt; 
&lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;

Note that the above meta tag should really be the first meta tag in the page.

Thanks everybody. I’ve tried the meta tag both ways and still can’t get the slider to function in IE9. I know I saw it functioning briefly yesterday, but today it’s dead again.

I’m still trying to locate the double script tags and fix the syntax errors in the social media area. This theme doesn’t make it very obvious where to do that …

Does anybody know how I can locate the part of the theme that will allow me access to the script tags? They must be added automatically by the plugin. The includes look as if they don’t get backed out when you deactivate the plugin, now I gotta try to find out how to remove the redundant <script> include for jquery.themepunch.plugins.min.js … it is definitely in there twice. It’s not in the header.php file with other <head> content, I know that …

That, or I noticed it appears once in the <head> and then again down again in the <body> … I wonder if this is due to the fact that I checked the “Put JS Includes To Body” option on the revolution slider? At any rate … my suspicion is that this is the main reason the slider doesn’t slide in IE9.

My problem is, on a WordPress site, I don’t know where to go to make these edits …

Thanks

I’ve moved the thread to the wordpress forum as this seems to be more of a cms question now than a css one :slight_smile:

Thank you …