I am only seeing this issue in Internet Explorer 9 which also has other problems. I'm not sure what the precise issue is, but I suspect it's happening because your page is displaying in quirks mode. (If you open Internet Explorer 9 and press F12 to bring up the F12 Developer Tools pane you'll see "Document Mode: Quirks" which indicates that your document is displaying in quirks mode.)
Originally Posted by NateG
The code I provided is for XHTML5 documents. The problem code is the following:
Change that to the following code if you wanted to create an HTML5 document:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
Or if you really wanted to create an XHTML document, you need to use an XHTML or XML file extension: *.xhtml, *.xht, or *.xml.
Also worth noting is that the
z-index property has no effect for non-positioned elements (via the
In case you're curious about Internet Explorer's other quirks:
- The blue box is missing because custom elements are not stylable (without a hack) and because each tag of custom elements are rendered as their own element (i.e.,
</nav><//nav>) in IE quirks mode.
- The red box is not centered because margin-based centering via
margin-left: auto; margin-right: auto; is not supported in IE quirks mode.
- The black bar's width issue probably has something to do with the fact that the
min-width property is not supported in IE quirks mode.