HTML and CSS Reference
In-Depth Information
7.
Save styles.css.
Although this is a sensible option for the Cool Shoes & Socks page, you might not always want to have to change all
your advanced selectors to simpler ones that older browsers can understand; otherwise, there would be no point in
using them. One solution for this problem is to use JavaScript to help older browsers understand advanced selectors.
Rather than write your own JavaScript to give them this capability, though, you can use a free utility to do this job
When you download and place a
<script>
reference in the
<head>
of the page—just as you did with live.js in
Chapter 2—along with a JavaScript library such as jQuery, many advanced CSS selectors work in older browsers.
Visit the Selectivizr website at
www.selectivizr.com/
for complete instructions on how to add this reference
if you need to.
Conditional Comments for Internet Explorer 6, 7, and 8
Internet Explorer versions 6 and 7 never made much of an effort to adhere to standards—with Internet Explorer 8 do-
ing a little better but still not great—and because of that, whenever you check a web page in them, you certainly find
issues, in particular in Internet Explorer 6. Sometimes you need to make fundamental changes to a page to get it
working in these older versions of Internet Explorer, but that is at the detriment to the other browsers that
do
work.
Thankfully, you can use conditional comments to apply styles to specific versions of Internet Explorer.
Let's look at some of the issues in Internet Explorer 7 and then use conditional comments to add fixes.
As shown in Figure 15-7, the first issue with Internet Explorer 7 is the layout of the navigation links; they appear
vertically one after the other rather than side by side.
In Chapter 9, I mentioned that Internet Explorer 6 and 7 don't support
display: inline-block;
, which is
what is applied to these navigation links. Luckily, these browsers treat
display: inline;
as if it were
dis-
play: inline-block;
anyway.
If you go into styles.css and change the
#header .nav > ul > li
rule set so that the
display
property has
a value of
inline
, this change fixes Internet Explorer 6 and 7 but breaks modern browsers. Instead, create a condi-
tional stylesheet:
