IE does not display div content

Question

I wrote an application using HTML 5 and I will not show an error window instead of a page when someone visits IE. When it discovers navigator.appName as Microsoft Internet Explorer , it hides everything and shows a failed div div that started to hide. 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'>Google Chrome</a>!</p> </center> </div> 

The problem is that when I visit the page in IE, the div appears with a border, but it has no content. Nothing is inside of him. I went to the view->source , and looked at him, and the code is still there, but none of them is not displayed. How to fix it?

Answer 1

IE may be a cascade of "display: none"; down through the children of this parent. Try changing your JavaScript to also change the display property of these elements.

Answer 2

Without seeing the entire HTML page, it’s hard to know exactly what is going wrong (you have to post the URL if the page is available on the Internet!), But here’s how I got the problem:

• firstly, I would make a test copy of the page, as tracking this can include many HTML changes.
• Next, I would remove the display: none and comment out all the scripts against the div, and just for fun, I would also change the div id to make it double sure that no script is touching it. if the contents of the div suddenly appears, the problem is probably in your script, not your styles.
• Next, I delete all the styles (on the div and its children) to see if there is a problem in the styles or something outside of them.
• If the contents of the div are displayed with all styles to be deleted, start adding the styles back one by one until it breaks again. This will not solve the problem, but at least will point you to the culprit.
• If the contents of the div still do not display with all styles removed, try deleting other styles on the page. For example, comment out your included CSS files. This will prevent obvious problems such as, for example, center elements defined in the included stylesheet, such as text on a white background. Or less obvious issues, such as inherited overflows or word styles that cause contained content to be trimmed or hidden.
• If this also does not work, the likelihood that the problem is caused by the parent of this div. Since it is 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 . This will fix any problems with the parents.
• If this does not work, try commenting on ours or removing more and more from the page until it starts working. Since you know that just placing this HTML on the page itself will work, you know that if you crop your page at some point, it will start working.

In any case, you get the basic idea: keep deleting and simplifying things until they start working, starting with the simplest things that need to be changed and go to a major operation. At some point, you highlight the problem and from there, as a rule, quickly find a fix.

Answer 3

You say in style: no? If you delete all the style code and return to IE, will you see any text?

Answer 4

I tried this code in IE and it works the way you expected, but only after I remembered to put

 div.style.display = "block"; 

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

Answer 5

You can try using the Internet Explorer Developer Toolbar to find out if there are any styles applied to your DIV that you did not intend.