HTML and CSS Reference
In-Depth Information
Figure 1-31
Web page rendered with the jpsstyles.css style sheet
Trouble?
Many elements in HTML5 are still not completely supported in current
browsers, so the appearance of your Web page might differ slightly from that
shown in Figure 1-31. If you are running Internet Explorer 8 or earlier, you'll see a
significant difference. You'll learn how to correct this problem shortly.
Using the new style sheet, Dave's Web page is much more readable. The page is
displayed in a two-column layout with the main content of the
section
element dis-
played in the left column. The content of the
aside
element is shown as a sidebar in the
right column with a light purple background, rounded corners, and a drop shadow. The
content of the
footer
element is styled with a smaller font, a top border line, and a light
purple background.
Styles for HTML5 Elements
The
section
,
aside
, and
footer
elements used in the code of the
jprop.htm
fi le are
new HTML5 elements that were not part of earlier HTML specifi cations. For most brows-
ers this is not a problem, and the Web page should be rendered with a format and layout
close to what Dave requested. An important exception, though, is the Internet Explorer
browser. Internet Explorer version 8 and earlier versions provide almost no support
for HTML5 and do not recognize styles applied to HTML5 elements. For example, as
Figure 1-32 shows, even with the new style sheet, Internet Explorer 8 displays Dave's
Web page with a few of the styles shown in Figure 1-31.
