HTML and CSS Reference
In-Depth Information
2. Above the background declaration, add another background declaration:
background: url(“../images/bg-newsletter.png”) repeat 0 #00ACDF;
3. Save styles.css.
With two background declarations, browsers that don't understand the second multiple image declaration
simply ignore it and apply the first.
Now that the background image is in place, it also becomes apparent that the border declaration isn't being
applied either. The reason is that Internet Explorer 9 doesn't understand the rgba() function used to style
the border. Add another fallback property.
4. In the #newsletter rule set, above the border declaration, add the following:
border: #009CC8 solid 5px;
5. Save styles.css.
This procedure provides browsers that don't support the rgba() function a value that they do understand.
With the border fixed, you may notice the Sign Up button in the newsletter box isn't centered as it is in other
browsers. This is a bug in Internet Explorer 8, and to work around it, you need to give the Sign Up button a width .
1. In styles.css, find the input[type=”submit”][class=”button”] rule set and add the following
width: 100%;
2. Save styles.css.
Finally, for Internet Explorer 8, the Cool Shoes & Socks logo and Back to Top link in the footer aren't floated to the
left and right of the page. The reason is that the rule sets for these elements use the :nth-child() selector, which
isn't supported in versions 6, 7, and 8 of Internet Explorer.
The Cool Shoes & Socks page uses the :nth-child() selector five times, but three of those are to apply trans-
forms and animations to the product showcase and sidebar, which older versions of Internet Explorer don't support
anyway. Because only two of the :nth-child() selectors affect Internet Explorer 6, 7, and 8, the simplest solu-
tion is just to give the elements a class name and change the rule set to use a class selector instead of :nth-
child() .
1. In index.html, find the two <li> elements within <div class=”nav container”> .
2. Change the first <li> to give it the class small-logo , like so:
<li class=”small-logo”>
3. Change the second <li> to give it the class back-to-top , like so:
<li class=”back-to-top”>
4. Save index.html.
5. In styles.css, find the rule set #footer li:nth-child(1) and change the selector to #footer
.small-logo .
6. In styles.css, find the rule set #footer li:nth-child(2) and change the selector to #footer
.back-to-top .
Search WWH ::

Custom Search