HTML and CSS Reference
In-Depth Information
}
2.
Save styles-ie7.css.
Because the newsletter box has a
padding
of
6%
both on the left and right sides, when you make the width of the
input fields
88%
, they perfectly fit in the box again. Note that this effect is true only when the width of the browser is
960px or greater—which leads to the next Internet Explorer fix.
In the next chapter, you use media queries to make the Cool Shoes & Socks page adapt based on the width of the
page. Internet Explorer 6, 7, and 8 don't support media queries, though, so you can add a conditional style sheet for
them that prevents the web page shrinking below 960px.
1.
In index.html, above the previously added conditional stylesheet, add the following:
<!--[if lt IE 9]><link rel=”stylesheet” href=”css/styles-ie.css”
type=”text/css” /><![endif]-->
2.
Save index.html.
3.
Create a new file called styles-ie.css and save it in the css folder.
4.
In styles-ie.css, add the following declaration:
body {
width: 960px;
}
When you add this conditional stylesheet that applies to all versions of Internet Explorer below version 9, Cool
Shoes & Socks viewed in those browsers isn't able to shrink below a width of 960px. This workaround ensures the
layout doesn't shrink down to the point where content becomes unreadable.
Universal Internet Explorer 6 Stylesheet
Now comes the gut-wrenching moment...when viewing Cool Shoes & Socks in Internet Explorer 6, it isn't going to
be pretty. Thankfully, the days of supporting Internet Explorer 6 are close to over—if not already over.
If you absolutely have to support Internet Explorer 6 and make it appear close to how other browsers do, you can add
fixes in the same way as with Internet Explorer 7 and 8: Create a conditional stylesheet that applies styles to Internet
Explorer 6 only. Cool Shoes & Socks takes more of a radical approach, though.
As shown in Figure 15-8, Cool Shoes & Socks viewed in Internet Explorer 6 isn't pretty. Rather than spend
x
num-
ber of hours fixing it with a conditional stylesheet, you can simply remove all styles, leaving just the bare con-
tent—all that's really important on the page.
