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.
 
Search WWH ::




Custom Search