This page is in progress…

Make it Work Cross Browser

You probably can’t tell in your browser, but your structure won’t work in Internet Explorer 6–8. Not yet anyway.

Add html5shiv.js for IE 6–8

While modern browsers recognize HTML5 elements like header, Internet Explorer 6-8 don’t. Html5shiv.js fixes this problem.

Add html5shiv.js to your page the same way you added respond.js to your page:

1. Go to https://github.com/aFarkas/html5shiv
2. Download the zip file (bottom of the right-hand column)
3. Unarchive the zip file on your computer
4. Put the file “html5shiv.js” in the same folder as your HTML document
5. Add the the javascript syntax in the conditional comment you already have in the head of your HTML document.

 <!--[if lt IE 9]>
 <script type="text/javascript" src="respond.js"></script>
 <script type="text/javascript" src="html5shiv.js"></script>
 <![endif]-->

Display:block HTML5 Elements for IE 6–8

Since IE 6-8 don’t recognize HTML5 elements like header, they also don’t know to treat these elements as block elements (elements with a break before and after them, like divs and headings).

To fix this, always add a line of syntax to your html5 elements, like so (new syntax in bold):

header{
    background-color:#CCEEFF;
    display:block;
    }

 

Finding a Good Measure

A good measure (line length) is 45-85 characters per line. A quick way to check whether you have a good measure as you design your layout is to highlight the text between 45 and 85 characters on a line.

Highlight 45 – 85 Characters

In the bibliography lesson, you created a class and applied it to a p element so the entire intro paragraph had unique styling. This time, you only want some of the text to have unique styling, so you’ll create a class and apply it to a span of text in a paragraph.

In the CSS, create a class called “measure” with a yellow background like so:

.measure{
    background-color:#FFEE99;
    }

In the HTML, put your cursor right in front of the very first character of the description for the first film.

Start counting characters (including spaces and punctuation). When you get to 45 characters, type the following syntax (new syntax in bold):

a fun<span> and 

Count 40 more characters (including spaces and punctuation). When you get to 40 more characters (for a total of 85 characters), type the following syntax (new syntax in bold):

a fun<span> and crusading journey into the digestiv</span>e tract

You have wrapped a span around the characters from 45-85 in the first paragraph of text.

Apply the class “measure” to this span, just like you applied it to the p in the bibliography, like so (new syntax in bold):

a fun<span class="measure"> and crusading journey into the digestiv</span>e tract

View Your Web Page

The range of text between 45 and 85 characters is highlighted yellow. You can experiment with various column widths without re-counting your line length.

Set Your Column Widths

The column width is officially fine—it falls within the recommended 45–85 characters. But I like a slightly narrower column for skimming information. The reader’s eye tends to move down the left edge of the text, so if the column is narrower, the reader will catch more information.

In the CSS, I set my column widths like so (new syntax in bold):

#fall_films{
    width:400px;
    background-color:#EECCFF;
    float:left;
    }
    
#spring_films{
    width:400px;
    background-color:#99FFCC;
    float:left;
    }