I'm using AJAX to update page content. In my page callback I have a few commands and end with ajax_render().

When I click the AJAX link from another page, the content updates, all my JS and CSS for that page are added, and everything works perfectly. However, in IE8 and below, the CSS does not update. I don't know if IE8 is not appending the CSS file to the head, or if it is but just not rendering it. All the JS files are being added, it's just a problem with the CSS. This is also the case with aggregation both off and on.

I should mention I'm also using the html5_tools module.

Anyone have any ideas?

Comments

Hello,
Sorry if this dumb :) Do you have a typo in your post? How can all 3 of these conditions be true at the same time ?

  • CSS for that page are added
  • CSS does not update
  • I don't know if IE8 is not appending the CSS file to the head

I am going to guess, "CSS does not update" means the page doesn't render as expected :) Are you generating HTML 5 tags (like <section> or <article>. If so, I would check whether the web browser in question is capable of rendering those tags.

You are on the correct path :) Inspect the raw server response (I.E. document source). That raw response should help indicate where the rendering issue is.

Finally, an idea, a little hokey, but it might help :) Save the raw server response to a temp file. Then see if chromium or firefox can render the temp file. I use current versions of both Chromium and Firefox, they both include dom and css inspectors, Kind if hokey :) But might help you :)

Thinking is the best way to travel.

It appears ajax.js is adding the CSS in this format:

<style media="all">@import url("http://www.mysite.com/sites/default/files/less/50b7e33dccff55.13161735/sites/default/themes/temp/css/notfront.css?me9f30");</style>

It seems IE does not like this format. I've tried manually prepending this to the head and it still doesn't work. Though if I use this format:

<link rel="stylesheet" type="text/css" href="http://www.mysite.com/sites/default/files/less/50b7e33dccff55.13161735/sites/default/themes/temp/css/notfront.css?me9f30" />

it works. But the CSS data passed to ajax.js is not in that format. So, same problem as here http://stackoverflow.com/questions/5912972/problem-to-load-css-with-jquery-in-ie8.

Anyone have any ideas?

CSS aggregation is the solution here. Doesn't work with it off. Same problem described here.