Web Design with HTML and CSS

204

Tools to identify browser problems

Web Design with HTML and CSS Digital Classroom

Addressing browser incompatibilities with CSS fi xes

The majority of the problems facing web designers and Internet Explorer 6 are the rendering

problems this browser (and to a certain degree, Internet Explorer 7) introduces. The source

of these inconsistencies stem from a few places: a diff erent CSS box model than other

applications, a problem with fl oated elements, and lack of support for transparent PNGs and

some CSS properties.

In Lesson 8, you were introduced to conditional comments. Remember that a conditional

comment is a unique style sheet that targets Internet Explorer browsers (the style sheet is

called iefi xes.css in the exercise from Lesson 8). Using this method, you would fi rst develop

your layout in a browser such as Internet Explorer 8 or 9 (PC), Mozilla Firefox (Mac/PC),

Apple Safari (Mac/PC), or Google Chrome (Mac/PC). After you fi nish your layout, you could

test it in Internet Explorer 6 and 7 using one of the methods listed in the subsections above.

After identifying any issues that appear in IE 6 (or 7), you would then fi nd a solution and

add a modifi ed CSS rule to the iefi xes.css style sheet. Although the majority of major issues

are IE6 related, you might also fi nd that IE7 also has rendering problems (to a lesser degree).

You can also assign conditional comments to IE7. You will do a hands-on exercise with this

later in this lesson, but fi rst, you should review at the structure of conditional comments. The

conditional comment you added in the last lesson was this:

<!--[if IE]>

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

<![endif]-->

In this conditional comment, you instruct all versions of Internet Explorer to use the style sheet

iefi xes.css. However, this comment doesn’t distinguish between the diff erent versions of the

browser, and a fi x that resolves a problem in Internet Explorer 6 could create a problem in the

newer version of the browser. In this case, you could use a more specifi c conditional comment:

<!--[if IE 6 ]>

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

<![endif]-->

In this conditional comment you are targeting only Internet Explorer 6, but none of the

other IE browsers. There are several conditional comment operators that let you be very

specifi c regarding the browsers you target with your style sheet. For example, you could have

CSS fi xes that only apply to Internet Explorer 7 and below (6, 5.5, etc.). Such a conditional

comment would appear as shown below:

<!--[if lte IE7]>

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

<![endif]-->

This example uses the lte operator, which means less than or equal to.This is a style sheet that

you would only use for browser versions 7 and below.