ansaurus

Question

IE doesn't apply css loaded through ajax.

Answer 1

+1 A:

The style tag is only allowed in the head section. Placing it somewhere else is simply invalid and that has nothing to do with IE.

More information.

By the way, to solve your problem if you can´t put the styles in a global style-sheet, you can use the 'style' attribute to modify elements:

<p style="...">

Or you can use an iframe but then you'd have to serve a whole page instead of just a few tags.

jeroen 2010-06-28 16:39:22

No one cares that it's invalid. It works. Even in IE (except when it's used through ajax which still doesnt work if you add it to the head).

tybro0103 2010-06-28 16:48:32

I had already added a possible solution, but if it´s invalid and it doesn´t work, maybe you should care ;-)

jeroen 2010-06-28 16:53:18

the style attribute doesn't work for dynamically added elements in IE either.

tybro0103 2010-06-28 16:53:47

What version of IE?

jeroen 2010-06-28 16:54:55

tybro0103 2010-06-28 16:55:22

I've tried 7 and 8... pretty sure something as old as 6 would be a no

tybro0103 2010-06-28 16:56:12

I´ve just tried it in both IE8 and IE7 (compatibility view) and the style attribute seems to work fine.

jeroen 2010-06-28 17:08:25

Answer 2

+1 A:

You might want to start using jQuery's .CSS methed for dynamic style changes like that.

$("#jane").css('color', '#0F0');

Or just plain jane Javascript:

document.getElementById['sally'].style.color = '#0F0';

EDIT:

Have your ajax inject this:

<div id="jane">        
    <div id="sally">Hi, I'm Sally!</div>
    <script>document.getElementById['sally'].style.color = '#0F0';</script>
</div>

Or Why not just inject elements with inline styles computed server side?:

<div id="jane">        
    <div id="sally" style="color:#0F0">Hi, I'm Sally!</div>
</div>

Tim Santeford 2010-06-28 16:47:30

Yeah that's cool. What would really be awesome is if jQuery (or w/e library) would recognize the new css and do that automagically.

tybro0103 2010-06-28 16:51:40

You could also send a JSON array with all the style changes your page needs and then use jQuery to apply them.

Tim Santeford 2010-06-28 17:02:20

Answer 3

A:

Tybro,

I was once looking for you automagic as well. I think iframes is the way to go -- not ajax. It loads what's inside the <head> tags and IE6+ will apply the style sheet as soon as it loads.

The only drawback is iframes are expensive (zzzzzz....)

One other thought (a "valid" thought in fact) is to shove this into your ajax callback request:

var automagicStyler = function(stylefile) {
var link = document.createElement('link');
link.href = stylefile;
link.rel = 'stylesheet';
link.type = 'text/css';
document.createElement('head');
document.getElementsByTagName('head')[0].appendChild(link);
};

automagicStyler('mystylefile2.css');

Have the ajax do its thing and then create head tags in which to embed your stylesheet. I haven't tried it but it sounds like maybe/maybe.

If not, give in to iframes. A bit clunky and old school compared to "ajaxxxxx" but it'll do the trick.

Best of luck!

Emile 2010-06-29 08:58:17

eeeee... iframes = bad. 99% of the time. The other one percent is for when you for some reason need to display a page from a completely different site inside of your site.

tybro0103 2010-07-06 16:13:21

iframes is only part of my answer dude...don't vote down. :( vote up. :)

Emile 2010-07-15 05:32:21

ansaurus

tags:

views:

answers:

IE doesn't apply css loaded through ajax.

related questions