35.
body {font:1em verdana, arial, sans-serif;}
div#listcontainer {border:1px solid #000; width:150px;
font-size:.75em; margin:20px;}
div#listcontainer ul {border:0; margin:12px 20px 12px 1.25em;
padding:0; list-style-type:none;}
div#listcontainer li {border-bottom:2px solid #069; margin:0;
padding:.3em 0; text-indent:.5em}
div#listcontainer li:?¬? rst-child {border-top:2px solid #069;}
If you are building a site for longterm
use, it??™s good practice to put
hacks for IE6 into their own style
sheet, and then later, when IE6
?¬? nally shuf?¬‚ es off to the place where
browsers go to die, you can simply
remove that ???hack sheet.???
DESIGNING INTERFACE COMPONENTS 215
div#listcontainer a {text-decoration:none; color:#069;}
div#listcontainer a:hover {color: #00;}
* html div#listcontainer ul {border-top:2px solid #069;}
FIGURE 6.35 The completed menu,
with the rollover effect on the link,
shown in IE6.
The Star Hack and the Backslash Hack
A hack is the term for using CSS in ways other than the way it was intended
to be used. Hacks enable CSS to be targeted to, or hidden from, speci?¬? c
browsers. A very common use of a hack is to provide alternate code for
Internet Explorer 6.
The Star Hack
You have seen that the great-granddaddy of all ancestor elements is the
html element; all elements are its descendants. However, Internet Explorer
6 is unique in that it has an unnamed element that is a parent of the html
element, so by referencing this element in a selector, you create a rule that
is only read by Internet Explorer 6 (and earlier).
Pages:
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254