HTML and CSS Reference
In-Depth Information
if lte IE 8 —If the browser is less than or equal to version 8 of Internet Explorer
You can also use an exclamation mark ( ! ) to apply to anything that does not match a condition; for example,
if !IE applies to anything that isn't Internet Explorer. For more information about conditional comments,
see www.quirksmode.org/css/condcom.html .
Now that you have a conditional comment set up, add a new stylesheet to be applied to Internet Explorer 7.
3. Create a new file called styles-ie7.css and save it in the css folder.
4. In styles-ie7.css, add the following rule set:
#header .nav > ul > li {
display: inline;
vertical-align: top;
}
5. Save styles-ie7.css.
Because you add the conditional stylesheet below the main stylesheet, any styles added to it overwrite the main
styles. This rule set overwrites the navigation links' display: inline-block; declaration from the main
stylesheet and makes them display: inline; instead. You also include vertical-align: top; to make
each link align to the top.
Also shown in Figure 15-7 is that the page has a horizontal scroll bar. Sometimes, older versions of Internet Explorer
have inexplicable bugs such as this, and the best way to find a fix is through trial and error. By commenting out sec-
tions of HTML in index.html, I found that it was either the sidebar <div class=”sidebar”
role=”complementary”> or an element within the sidebar that was causing the page to be wider than neces-
sary. By then commenting out sections within the sidebar, I found that it was the <cite> tag within the <block-
quote>. With this knowledge, I then went into styles.css and commented out each declaration in the block-
quote cite rule set until I found the culprit: float: right; .
The <cite> element appears to be acting bigger than it is (causing the page to become wider), so my natural reac-
tion was to specify a width . As with the Send button issue you saw in Internet Explorer 8, this issue appears to be
similar. To fix it, add an Internet Explorer 7-specific style:
1. In styles-ie7.css, add the following rule set:
blockquote cite {
width: 100%;
text-align: right;
}
2. Save styles-ie7.css
Just one visual issue is left in Internet Explorer 7. The input fields in the newsletter box are too wide for the box. The
reason is that you used box-sizing: border-box; on these elements, which isn't supported in Internet Ex-
plorer 6 or 7. Internet Explorer 6 and 7 only treat box-sizing as the default padding-box . For more informa-
tion on this issue, see Chapter 7.
1. In styles-ie7.css, add the following rule set:
input[type=”text”],input[type=”email”] {
width: 88%;
Search WWH ::




Custom Search