IE not rendering div contents

Question

I've written an app using HTML 5 and I wan't to show an error box instead of the page when someone visits from IE. When it detects navigator.appName as Microsoft Internet Explorer it hides everything and shows the error div that started out hidden. The div is as follows:

<div id='ieerror' style='display:none;width:500px;height:500px;border:3px solid #ff0000;position:absolute;top:50%;left:50%;margin-top:-250px;margin-left:-250px;'>
    <center>
        <h1 style='font-size: 30px;'>Internet Explorer is not supported by Aud!</h1><br /><br />
        <p>Internet Explorer does not support HTML 5 and therefore this application cannot run.<br />
        Please upgrade your browser. We suggest <a href='http://www.google.com/chrome'&gt;Google Chrome</a>!</p>
    </center>
</div>

The problem is that when I visit the page in IE, the div pops up with the border, but it has no contents. Nothing is inside of it. I went to view->source and looked at it, and the code is still there, but none of it is rendered. How do I fix this?

Answer 1

You're style says display: none? If you remove all the style code and go back in IE, do you see any text then?

Answer 2

I tried this code in IE and it works as you would expect, but only after I remembered to put

div.style.display = "block";

after the div. When I mistakenly put it before, it threw a (silent) error.

Answer 3

IE might be cascading the "display: none;" down through the child elements of that parent . Try modifying your JavaScript to also modify the display property of those elements.

Answer 4

Without seeing the entire HTML of the page it's hard to know exactly what's going wrong (you should post a URL if the page is internet-accessible!), but here's how I'd approach the problem:

1. first, I'd make a test copy of the page, since tracking this down may involve lots of HTML changes.
2. next, i'd remove the display:none and comment out all scripting against the div, and just for fun I'd also change the ID of the div to make double-sure that no script is touching it. if the div's contents suddenly show up, then the problem is probably in your script, not in your styles.
3. next, I'd remove all styles (on the div and its children) in order to see if the problem is in the styles or something outside them.
4. If the div's contents show up with all the styles removed, then start adding back styles one by one until it breaks again. This won't solve the problem but will at least point you to the culprit.
5. if the div's contents still don't show up with all styles removed, then try removing other styles on the page. For example, comment out your included CSS files. This will prevent obvious issues like, for example, center elements being defined in an included stylesheet as whilte text against a white background. Or less obvious issues like inherited overflow or word-wrapping styles causing contained content to get clipped or hidden.
6. If that doesn't work either, then chances are the problem is caused by a parent element of that div. Since it's absolutely positioned it doesn't matter where you put it in the DOM, so try putting your div as a direct child of the body element. This will eliminate any parenting issues.
7. If none of that works, try commenting our or removing more and more from your page until it starts working. Since you know that simply putting that HTML by itself in a page will work, you know that if you trim your page down at some point it will start working.

Anyway, you get the basic idea: keep removing and simplifying things until it starts working, starting with the easiest things to change and moving on to major surgery. At some point you'll isolate the problem and from there, it's usually pretty quick to find a fix.

Answer 5

Do not you want to use conditional comments for the purpose?

Answer 6

You could try using Internet Explorer Developer Toolbar to see if there are any styles applied to your DIV that you didn't intend.