HTML and CSS Reference
In-Depth Information
For example, let's say you create the following simple body header that includes a
navigation element:
<header>
<h1>Riddles of the Sphinx</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/blog/">Blog</a></li>
<li><a href="/contact/">Contact Me</a></li>
</ul>
</nav>
</header>
and then style these elements:
header {
width: 600px;
height: 25px;
background-color: #ccffff;
border: 2px solid #66cc99;
padding: 10px;
}
nav {
width: 100%;
float: left;
list-style: none;
}
nav li {
float: left;
padding-right: 7px;
}
When we view this page in Internet Explorer 8 or below (as shown in
Figure 2-2
), the
CSS is not applied.
For Internet Explorer to recognize these elements, just add the following script to
the
head
of the HTML document (make sure you add it to the
head
of the document,
as the elements need to be declared before the page renders):
<script>
document.createElement("header");
document.createElement("nav");
document.createElement("footer");
</script>
Then declare the three HTML5 elements that we've used on the page—
header
,
nav
,
and
footer
—as DOM elements.
Now, when we view this page in Internet Explorer (as shown in
Figure 2-3
), the browser
sees these elements and applies its CSS.