Home of the ColdFusion Community
|
Mailing Lists
|
Home /
Groups /
Ajax
IE not including CSS
Author: Jim Davis
Short Link: http://www.houseoffusion.com/groups/ajax/thread.cfm/threadid:1304#4254
----- 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
Author: Jim Davis
Short Link: http://www.houseoffusion.com/groups/ajax/thread.cfm/threadid:1304#4246
> 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
Author: James Wolfe
Short Link: http://www.houseoffusion.com/groups/ajax/thread.cfm/threadid:1304#4245
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.
Author: Skip Evans
Short Link: http://www.houseoffusion.com/groups/ajax/thread.cfm/threadid:1304#4110
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 -----
Author: Nick de Voil
Short Link: http://www.houseoffusion.com/groups/ajax/thread.cfm/threadid:1304#4109
----- 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
Author: Skip Evans
Short Link: http://www.houseoffusion.com/groups/ajax/thread.cfm/threadid:1304#4108
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/
Author: Bader, Terrence C CTR MARMC, 231
Short Link: http://www.houseoffusion.com/groups/ajax/thread.cfm/threadid:1304#4107
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 -----
Author: Skip Evans
Short Link: http://www.houseoffusion.com/groups/ajax/thread.cfm/threadid:1304#4106
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 -----
Author: Bader, Terrence C CTR MARMC, 231
Short Link: http://www.houseoffusion.com/groups/ajax/thread.cfm/threadid:1304#4105
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 -----
Author: Skip Evans
Short Link: http://www.houseoffusion.com/groups/ajax/thread.cfm/threadid:1304#4100
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 -----
Author: Bader, Terrence C CTR MARMC, 231
Short Link: http://www.houseoffusion.com/groups/ajax/thread.cfm/threadid:1304#4098
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/
Author: James Holmes
Short Link: http://www.houseoffusion.com/groups/ajax/thread.cfm/threadid:1304#4097
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/
Author: Skip Evans
Short Link: http://www.houseoffusion.com/groups/ajax/thread.cfm/threadid:1304#4096
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/
|
May 16, 2012
|
Latest Fusion Authority Articles
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||
