HTML and CSS Reference
In-Depth Information
properly in ye olde browsers until we explicitly tell the browser
that they are
display:block
. Browsers contain a rudimentary,
built-in style sheet that overrides the default inline styling for
those elements we think of as natively block-level (one such
style sheet can be found at
http://www.w3.org/TR/CSS2/
sample.html
)
. Older browsers don't have rules that define new
HTML elements such as
<header>
,
<nav>
,
<footer>
,
<article>
as
display:block
, so we need to specify this in our CSS. For mod-
ern browsers, our line will be redundant but harmless, acting as
a useful helper for older browsers, which we all know can linger
on well beyond their sell-by dates.
So, to style our HTML5 to match our HTML 4 design, we simply
need the styles
header, nav, footer, article {display:block;}
nav {float:left; width:20%;}
article {float:right; width:79%;}
footer {clear:both;}
And a beautiful HTML5 page is born. Except in one browser.
Styling HTML5 in Internet Explorer 6,7,8
In old (but sadly, not dead) versions of Internet Explorer, CSS is
properly applied to the HTML 4 elements that IE does support,
but any new HTML5 elements that the browser doesn't know
remain unstyled. This can look . . . unpleasant.
The way to cajole old IE into applying CSS to HTML5 is to poke
it with a sharp JavaScript-shaped stick. Why? This is an inscru-
table secret, and if we told you we'd have to kill you. (Actually,
we don't know.) If you add the following JavaScript into the head
of the page
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('article');
document.createElement('footer');
</script>
IE will magically apply styles to those elements, provided that there
is a
<body>
element in the markup. You need only create each ele-
ment once, no matter how many times it appears on a page.
Remember, HTML5 itself doesn't require a body element, but
this heady brew of Internet Explorer 8 (and earlier versions),
