• Choose a category
• All
• Classic-Fiction

This page has a red background in IE, and a yellow

background in other browsers.

If you want a page to use different styles in IE and other browsers, do the following:

1. Define the default style first.

Begin by creating the style that will work in most browsers. Most of the time, this style will also work in IE. You can create the style at the page level (with the pair) or externally (with the tag).

2. Create a conditional comment in the header.

Create a conditional comment after the primary style, as shown in this code snippet.

3. Build a new IE-specific style inside the comment.

The style inside the comment will be applied only to IE browsers, such as in the following lines:

4. The commented style can be page level or external.

Like the default style, you can use the pair to make a page-level style or you can use the tag to pull in an externally defined style sheet.

5. Only place code that solves IE issues in the conditional style.

IE will read the code in both styles, so there’s no need to repeat everything. Use the conditional style for only those areas where IE doesn’t do what you expect.

6. Don’t forget to end the conditional comment.

If you leave off the end of your conditional comment (or any comment, for that matter), most of your page won’t appear. That could be bad.

Checking the Internet Explorer version

So far, you haven’t encountered many situations that require conditional comments, but they’re handy when you need them. One more trick can be useful. You can specify which version of IE you’re using. This is important when you read about positionable CSS in Book III because IE 7 works pretty well with standards-compliant code, but the earlier versions do not. You can use this variation to specify code only for IE 6 and earlier.

The lte signifies less than or equal to, so code inside this condition will run only on early versions of IE.

Book III

Using Positional CSS

Chapter 1: Fun with the Fabulous Float

In This Chapter

Understanding the pitfalls of traditional layout tools

Using float with images and block-level tags

Setting the width and margins of floated elements

Creating attractive forms with float

Using the clear attribute with float

One of the big criticisms against HTML is that it lacks real layout tools. You can do a lot with your page, but it’s still basically a list of elements arranged vertically on the screen. As the Web matures and screen resolutions improve, people want Web pages to look more like print matter, with columns, good-looking forms, and more layout options. CSS provides several great tools for building nice layouts. After you get used to them, you can build just about any layout you can imagine. This chapter describes the amazing float attribute and how it can be used as the foundation of great page layouts.

Avoiding Old-School Layout Pitfalls

Back in the prehistoric (well, pre-CSS) days, no good option was built into HTML for creating a layout that worked well. Clever Web developers and designers found some ways to make