Inline CSS and Ajax Issue with IE
IE Got Me Again
After spending more time than I care to say troubleshooting a CSS issue with IE7, I thought I'd share the details here in case it saves anybody else some time later down the road.
The Scenario...
I have an application that updates the contents of one of its divs using an ajax call that returns html. Within that retrieved html is a style block (<style>...</style>) defining how I want my table headers (<th>...also contained within the retrieved html) to appear.
IN A NUTSHELL: IE7 does not recognize inline styles that were retrieved via an ajax call.
Perhaps this is a "duh" item to some of you who already knew it, but since my beloved FIREFOX accepted them just fine, it didn't occur to me until I had tried every other possible iteration and syntax to move the styles out of my retrieved html and into my app's global CSS template, which (by the way), is the solution to this issue.
Hope this saves someone else some time and emotional pain.
The Scenario...
I have an application that updates the contents of one of its divs using an ajax call that returns html. Within that retrieved html is a style block (<style>...</style>) defining how I want my table headers (<th>...also contained within the retrieved html) to appear.
IN A NUTSHELL: IE7 does not recognize inline styles that were retrieved via an ajax call.
Perhaps this is a "duh" item to some of you who already knew it, but since my beloved FIREFOX accepted them just fine, it didn't occur to me until I had tried every other possible iteration and syntax to move the styles out of my retrieved html and into my app's global CSS template, which (by the way), is the solution to this issue.
Hope this saves someone else some time and emotional pain.
Subscription Options
You are not logged in, so your subscription status for this entry is unknown. You can login or register here.
Re: Inline CSS and Ajax Issue with IE
This seems like a crazy bug to me. I am surprised that this happens. Why can't everything be a bit more like FireFox :)
Posted by Ben Nadel on May 14, 2008 at 11:50 AM
Re: Inline CSS and Ajax Issue with IE
Oh My God! Thank YOU!!! I can't believe I found this little bit of info - which has indeed saved me hours of futile cursing at IE and the 2 brain-celled idiots that work there.
Many thanks for the tip :-)
Many thanks for the tip :-)
Posted by whimZefx on May 18, 2008 at 7:09 AM
Re: Inline CSS and Ajax Issue with IE
Glad it saved someone else some headache and hair pulling, WhimZefx. :) That's EXACTLY why we should all share the things we learn. ;)
Posted by dougboude on May 18, 2008 at 3:34 PM
Re: Inline CSS and Ajax Issue with IE
If you are creating elements via the DOM, the CSS class attribute must be specified with JavaScript; IE 7 doesn't validate or re-parse any .setAttribute calls
element.className = 'SomeCssClasDeclaredInTheGlobalStyleSheet';
element.className = 'SomeCssClasDeclaredInTheGlobalStyleSheet';
Posted by xdor on December 3, 2008 at 2:06 PM
Re: Inline CSS and Ajax Issue with IE
Thanks, Doug!
Just wanted to verify that the same issue is in place for IE6. Adding all the style information AND links to external stylesheets OUTSIDE of the area with the code being replaced fixed things up just fine.
Just wanted to verify that the same issue is in place for IE6. Adding all the style information AND links to external stylesheets OUTSIDE of the area with the code being replaced fixed things up just fine.
Posted by cc on April 3, 2009 at 1:48 PM
Re: Inline CSS and Ajax Issue with IE
hi,
it seems to me that Firefox3 is not applying inline css anymore?
Some code that worked now is not in FF... all I do is to
it seems to me that Firefox3 is not applying inline css anymore?
Some code that worked now is not in FF... all I do is to
Posted by Cris Rus on May 15, 2009 at 6:54 AM
Re: Inline CSS and Ajax Issue with IE
I have added the style in GLOBAL CSS but still not able to get the effect of dat Style in I.E. but where in firefox it is working fine....
If my WebPage is normal page (Page not called from Ajax) then CSS is working Fine in I.E. but as soon as dat page from Ajax the effect from CSS is negligible.
IN firefox it is working fine but not in I.E.
If my WebPage is normal page (Page not called from Ajax) then CSS is working Fine in I.E. but as soon as dat page from Ajax the effect from CSS is negligible.
IN firefox it is working fine but not in I.E.
Posted by sachin on January 5, 2010 at 6:38 AM
Re: Inline CSS and Ajax Issue with IE
@sachin - yeah, retrieving html content that contains its own css when in IE...IE ignores the css. You have to put those styles outside the ajax call, in the container page in order for the css to be applied to html retrieved via ajax in IE. Just a weird bug I discovered a while back.
Posted by dougboude on January 5, 2010 at 8:56 AM
Re: Inline CSS and Ajax Issue with IE
Thanks for ur prompt reply.
There is no style in the file which is called from ajax.I am using only one file that is Global CSS.And from ajax file only simple html and updated information from server is coming.So no style is coming from Ajax.Let me send you the url where u can check.
http://www.newmiamiarch.org/ip.asp?op=Events_ShowAll_Masses .When u will navigate this ,then u will see on calendar on the right hand side.Please click on the small pics in the caledar then ajax function will call and u will see the difference in FONTS and the colour of the heading and title is everthing is same except the FONTS.
And also click on the right hand side the list of events to check the difference between the navigation through calendar on the right hand side and the list of events below the calendar.This difference is only in I.E.I think CSS is working coz the colour of the heading and title is same,only fonts differ.And for the fonts i am using below class
.styledefault{
font-family:Georgia,Times New Roman,Times, serif;
font-size:12px;
color:#7e7d7d;
line-height:16px;
}
Thanks,
Sachin
There is no style in the file which is called from ajax.I am using only one file that is Global CSS.And from ajax file only simple html and updated information from server is coming.So no style is coming from Ajax.Let me send you the url where u can check.
http://www.newmiamiarch.org/ip.asp?op=Events_ShowAll_Masses .When u will navigate this ,then u will see on calendar on the right hand side.Please click on the small pics in the caledar then ajax function will call and u will see the difference in FONTS and the colour of the heading and title is everthing is same except the FONTS.
And also click on the right hand side the list of events to check the difference between the navigation through calendar on the right hand side and the list of events below the calendar.This difference is only in I.E.I think CSS is working coz the colour of the heading and title is same,only fonts differ.And for the fonts i am using below class
.styledefault{
font-family:Georgia,Times New Roman,Times, serif;
font-size:12px;
color:#7e7d7d;
line-height:16px;
}
Thanks,
Sachin
Posted by sachin on January 11, 2010 at 1:12 AM