Web Design with HTML and CSS

182

Working with CSS background images

Web Design with HTML and CSS Digital Classroom

3 Add the following properties (highlighted in red) to this rule:

#innerwrap:after{

content:".";

display:block;

clear:both;

height:0;

visibility:hidden;

}

Save the fi le and then preview it in your browser. Your innerwrap now displays properly.

(If you are viewing this page in Internet Explorer 6 or 7, you might not be see the

intended result; you will address this shortly.) It goes beyond the scope of this lesson to

explain exactly what each one of these properties is doing, but essentially they are forcing

the innerwrap to behave as a true container with content, not just a background image.

For more information about how this code works, go to

http://www.positioniseverything.net/easyclearing.html.

The solution from the previous step will not work reliably in Internet Explorer 6 or 7, so

you have to add a special set of rules for these browsers.

4 In your 08_layoutwork.html document, scroll to locate the links to your external style

sheets. Type the following code (highlighted in red) below the link to the base.css style

sheet:

<link href="reset.css" rel="stylesheet" type="text/css" />

<link href="base.css" rel="stylesheet" type="text/css" />

<!--[if IE ]>

<link href="iefi xes.css" rel="stylesheet" type="text/css">

<![endif]-->

This section of code is called a conditional comment; you will learn more about this type of

code in Lesson 9. For now, think of this as a link to an external style sheet that will only

be used if the browser is Internet Explorer. All other browsers will ignore this code. The

next step explains the content of the iefi xes.css style sheet.

5 In your Text Editor, choose File > Open. Navigate to your web08lessons folder, select

the iefi xes.css fi le, and then click Open. It contains the following rule:

#innerwrap {

zoom:1;

}

This is a special rule that forces Internet Explorer 6 to render the page as you intend.

(You will learn more about these details in the next lesson.) Close this fi le without

making any changes.