StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POIE7 and IE8 randomly not able to load external script
text
Body
copied!<p>I am dynamically adding <code><link></code> elements to the head once the DOM is ready. However, I'm getting inconsistent results in IE8 and IE7 (all other browsers are fine).</p> <p>Every few times the page is loaded (cached or uncached), IE 7/8 will drop a handful of CSS rules in the stylesheets. <strike>1 or 2 of my dynamic stylesheets will not load. It's always the same 1 or 2 stylesheets that IE tends to ignore - <em>even though the Developer Toolbar shows them as added to the head!</em></strike>.</p> <p>The stylesheets themselves show up as <code><link></code> elements in the final DOM, but some of their rules are <em>not</em> applied (although every few reloads they are applied, without any issue).</p> <p>In my position, I do not have the luxury of writing code from the <code><head></code> (CMS restriction) - I can only dynamically insert from the body, which may be the issue.</p> <p><strong>UPDATED:</strong> This is the code I am using (located within the <code><body></code>) to insert stylesheets:</p> <pre><code>document.observe('dom:loaded', function() { // Using Prototype.js // Add stylesheets // addStylesheet('cite.css', 'head'); // Contains no webfont/@font-face rules // addStylesheet('type.css', 'head'); // Contains webfont family name references* // addStylesheet('flex.css', 'head'); // Responsive rules with @media queries // addStylesheet('anm8.css', 'head'); // Some minor positional CSS for home page // addStylesheet('gothic-cite.css', 'head'); // *Contains @font-face config // addStylesheet('stag-cite.css', 'head'); // *Contains @font-face config addStylesheet('all.css', 'head'); // Contains ALL content from above in 1 file function addStylesheet(cssname, pos2) { var th2 = document.getElementsByTagName(pos2)[0]; var s2 = document.createElement('link'); s2.setAttribute('type', 'text/css'); s2.setAttribute('href', cssname); s2.setAttribute('media', 'screen'); s2.setAttribute('rel', 'stylesheet'); th2.appendChild(s2); } }); </code></pre> <p>As suggested, even when I combined all rules into one stylesheet (which I hate doing), IE 7/8 continues to flip-flop as described with some rules, and the page appears differently.</p> <p>As a further check, I also removed all <code>@font-face</code> and referenced <code>font-family: "webfont-name"</code> rules from the stylesheets, and the same behavior continued. Therefore, <strong>we can rule out webfonts being the issue</strong>.</p> <p>You can see the anomalies by visiting the following with IE8 and refreshing/clicking the nav several times. It seems completely random as to when IE8 is dropping those styles. However, in the natively-built control page, all styles load correctly, every time.</p> <h2>Live Page (with problems)</h2> <p><a href="https://www.eiseverywhere.com/ehome/index.php?eventid=31648&tabid=50283" rel="nofollow noreferrer">https://www.eiseverywhere.com/ehome/index.php?eventid=31648&tabid=50283</a></p> <ol> <li>PHP-based CMS prints out XHTML on page load (template content mixed w/user content)</li> <li><code>Prototype.js</code> is loaded and initialized by default on page load</li> <li>CMS proprietary <code>scripts.js</code> file is parsed on page load</li> <li>My scripts run when DOM is loaded, essentially replacing <code>body.innerHTML</code> CMS fluff-HTML with just the HTML I want, <strong>then</strong> adds stylesheets to <code><head></code>.</li> <li>For <code>lte IE 8</code>, CSS extension plugins (selectivizr.js, html5.js, and ie-media-queries.js) are loaded within the <code><body></code> via conditional comments. Not sure if they wait for <code>DOM:loaded</code>...</li> <li><p>The <strong>CMS WYSIWYG editor converts all carriage-returns to empty <code><p></code> tags</strong>, resulting in elements like <code><section></code> being contained inside broken <code><p></code> tags, and extra <code><p></p></code> tags being created where whitespace is expected. Only <code>lt IE 8</code> seems to choke on this, however, so I added the following CSS rules to remedy this:</p> <pre><code>:not(.ie7) p { display: none; } .ie7 p { display: inline; } article p { display: block !important; } </code></pre></li> <li><p>I should note that the external stylesheets here are being pulled from the same domain, but each time they are re-uploaded, a new MD5-based URL is generated for the file. I'm not sure if previous revisions to the file (or previous files) are still available by their previous URLs. This isn't likely to be the problem though, since the newly created <code>all.css</code> stylesheet is still dropping rules that have been in the file from the start.</p></li> </ol> <h2>Control Page (works flawlessly)</h2> <p><a href="http://client.clevelanddesign.com/CD/IDG/CITE/home.html" rel="nofollow noreferrer">http://client.clevelanddesign.com/CD/IDG/CITE/home.html</a></p> <ol> <li>Pure XHTML document - no PHP.</li> <li>jQuery is used, rather than Prototype, for IE8 and below.</li> <li>All resources (stylesheets) are present in <code><head></code> at page load - no dynamic insertion</li> <li>For <code>lte IE 8</code>, CSS extension plugins (selectivizr.js, html5.js, and ie-media-queries.js) are initialized natively.</li> </ol> <h2>Rephrased question:</h2> <p>Which of these differences do you think may be causing IE 7/8 to flip-flop on styles when loaded on the Live page? I personally suspect either a race-condition issue, or that <code>Prototype.js</code> and the other CMS scripts are mucking things up (unfortunately no way to purge those from the page though).</p> <p>PS: I've already tried using IE's <code>createStylsheet()</code> function, to no avail.</p> <p><strong>UPDATE - Screenshots of working/not working in IE8</strong></p> <p>IE8: DOM code when loaded correctly: <img src="https://i.stack.imgur.com/RChsu.png" alt="IE8: DOM code when loaded correctly"></p> <p>IE8: DOM code when <strong>NOT</strong> loaded correctly: <img src="https://i.stack.imgur.com/ZjYT8.png" alt="IE8: DOM code when NOT loaded correctly"></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload