IE not including CSS

Hey all, I'm relatively new to AJAX and have been using it a lot with PHP on the server side. I just wrote a function that allows a JS call to the server to retrieve a page of HTML code and then uses innerHTML to insert that code into a space into the page currently loaded in the browser. My problem is that if the page retrieved from the server pulls in a CSS file, like <link rel="stylesheet" type="text/css" href="/theme/style2.css"> ...the elements for this style sheet are not used in the page that was retrieved. This is only a problem for IE, apparently, seems to work fine on Firefox. Any suggestions would be greatly appreciated. -- Skip Evans Big Sky Penguin, LLC 61 W Broadway Butte, Montana 59701 406-782-2240 http://bigskypenguin.com =-=-=-=-=-=-=-=-=-= Check out PHPenguin, a lightweight and versatile PHP/MySQL development framework. http://phpenguin.bigskypenguin.com/

Have you tried <style>     @import(/theme/style2.css); </style> ----- Excess quoted text cut - see Original Post for more ----- -- mxAjax / CFAjax docs and other useful articles: http://www.bifrost.com.au/blog/

How are the directory and files setup? ~Terry Have you tried <style>     @import(/theme/style2.css); </style> ----- Excess quoted text cut - see Original Post for more ----- -- mxAjax / CFAjax docs and other useful articles: http://www.bifrost.com.au/blog/

The directory structure is like this: public_html (main doc root) public_html/theme (location of CSS files) But the way the PHP code is structured all script files get included into the document root, so all references to any files, images, etc, are all relative to the doc root, so /theme/style2.css does work in Firefox. It only fails in IE. Should I try moving the CSS file and HTML file to the doc root to see if IE is having some kind of directory issue? Skip Bader, Terrence C CTR MARMC, 231 wrote: ----- Excess quoted text cut - see Original Post for more -----

try theme/style2.css  with no initial "/".... The directory structure is like this: public_html (main doc root) public_html/theme (location of CSS files) But the way the PHP code is structured all script files get included into the document root, so all references to any files, images, etc, are all relative to the doc root, so /theme/style2.css does work in Firefox. It only fails in IE. Should I try moving the CSS file and HTML file to the doc root to see if IE is having some kind of directory issue? Skip Bader, Terrence C CTR MARMC, 231 wrote: ----- Excess quoted text cut - see Original Post for more -----

Hey all, No luck with removing the leading '/'. I think what may be playing into it is the fact that this is basically an inline chunk of HTML so that perhaps IE doesn't know what do to with the following: <style type="text/css"> @import "theme/style2.css"; </style> ...when it is insert via JS between <div> tags using innerHTML= Does that sound reasonable? Skip Bader, Terrence C CTR MARMC, 231 wrote: ----- Excess quoted text cut - see Original Post for more -----

what happens when you fully resolve the name... http://www.somwhere.com/theme/style2.css  ?? Hey all, No luck with removing the leading '/'. I think what may be playing into it is the fact that this is basically an inline chunk of HTML so that perhaps IE doesn't know what do to with the following: <style type="text/css"> @import "theme/style2.css"; </style> ....when it is insert via JS between <div> tags using innerHTML= Does that sound reasonable? Skip Bader, Terrence C CTR MARMC, 231 wrote: ----- Excess quoted text cut - see Original Post for more ----- into the document root, so all references to any files, images, etc, are all relative to the doc root, so /theme/style2.css does work in Firefox. It only fails in IE. > > Should I try moving the CSS file and HTML file to the doc root to see if IE is having some kind of directory issue? ----- Excess quoted text cut - see Original Post for more -----

Hey, Same thing. Works fine on FF, nada on IE. I think the problem is that this HTML file, which can be designed by the client and dropped in to be read via the AJAX call goes into a place like this: ...<td>   <div id="maincontent">   </div>     </td> So when it is read and you have: oject.innerHTML=content; ...in the JS, IE doesn't know where these style elements from the import should go or how to apply them. Am I on the right track maybe? Skip Bader, Terrence C CTR MARMC, 231 wrote: > what happens when you fully resolve the name... > http://www.somwhere.com/theme/style2.css  ?? > -- Skip Evans Big Sky Penguin, LLC 61 W Broadway Butte, Montana 59701 406-782-2240 http://bigskypenguin.com =-=-=-=-=-=-=-=-=-= Check out PHPenguin, a lightweight and versatile PHP/MySQL development framework. http://phpenguin.bigskypenguin.com/

----- Excess quoted text cut - see Original Post for more ----- Yes, that sounds right. I don't think it's anything to do with directory structure, it's to do with IE not being able to use a style section which is dynamically set up inside the BODY via innerHTML in that way. Can you use an iframe instead of a div and reference the file simply via the iframe's src (dynamically if necessary) rather than writing it in as text? That way the customer's HTML file would get processed as a standalone document. Nick

Client is against iframes. I'm not sure why, and be honest I'm not familiar with their usage. Skip Nick de Voil wrote: ----- Excess quoted text cut - see Original Post for more -----

IE does not support downloading styles and applying them via document.write or ELEMENT.innerHTML = However, if you put the styles directly on the elements, then that will work. For example     <style type='text/css'>        .myElement { color: green; }     </style>     <span class='myElement'>someText</span> will have black text. But      <span style='color:green;'>someText</span> will have green text.

> IE does not support downloading styles and applying them via > document.write or ELEMENT.innerHTML = This isn't my experience... I've several apps that download content (including styles) via an AJAX call.  The content is then pumped into a DIV using innerHTML and all the new styles work as expected (in IE 6 and 7 at least). Now you can't (as the original post mentions) include a <link> tag - this doesn't work (in this scenario it would almost definitely be invalid HTML anyway), but both examples you gave should work when inserted via innerHTML - they do for me. Although I wonder if this could be done... my panelManager component has a load() method which lets you insert content with <script> tags.  It scans the material for the tags and then loads the script so it works (normally inserting text with <script> tags using innerHTML wouldn't run the script). I think it would be possible (even easy) to do something similar with <link> tags... Jim Davis

----- Excess quoted text cut - see Original Post for more ----- Figured this one out - it's silly. Here's the "rules": IE will, indeed, load styles of any kind (linked via the <link> tag, declared in a <style> or inline with the "style" attribute) into a div (or whatever) via innerHTML. HOWEVER IE requires (for some reason) requires that the <style> or <link> tags are NOT the first elements on the page. For example this works: <p>Hello, how are you!</p> <link rel="stylesheet" href="insert.css" type="text/css"> <style>   p { color: blue; } </style> But this does NOT: <link rel="stylesheet" href="insert.css" type="text/css"> <style>   p { color: blue; } </style> <p>Hello, how are you!</p> IE needs something that affects the layout up there - all of the following can be "first" on the page and will allow IE to find styles: <br> <p>Something</p> <h1>something else</h1> But none of the following will work: <!-- A comment --> <p></p> <h1></h1> I've tested all of this in IE 6, FF 2 and Opera 9.  I don't have IE 7 handy (will when I go home tonight). It's an odd bug - probably has something to do with the order of rendering but who knows.  In any case it's easy to fix: just put your style last on your includable pages. (Note that this same "trick" doesn't work for scripts - they are still ignored in all browers.  You'll still need something like my PanelManager to load them via innerHTML.) Jim Davis