The text-indent property moves the text in slightly from the
left edge of the line, and the new margins on the ul position the list
nicely within the container.
The list would certainly look better if we added a line across the top
of the ?¬? rst item. The ideal solution is to add a border-top to just
the ?¬? rst list item. There is a simple way to do that??”using the CSS
pseudo-class :?¬? rst-child. Sadly, IDWIMIE??”Internet Explorer 6
does not understand that pseudo-class.
This means that we either add the line with the :?¬? rst-child
pseudo-class and accept, zen-like, that it will not appear in Internet
Explorer, or we come up with a work-around. Let??™s use the pseudoclass
?¬? rst, and then think about a work-around for our less-compliant
but popular friend, Internet Explorer 6. Here??™s the code:
body {font:1em verdana, arial, sans-serif;}
div#listcontainer {border:1px solid #000; width:150px;
font-size:.75em; margin:20px;}
ul {border:0; margin:12px 20px 10px 1.25em; padding:0;
list-style-type:none;}
li {border-bottom:2px solid #069; margin:0; padding:.3em 0;
text-indent:.5em;}
li:?¬? rst-child {border-top:2px solid #069;}
FIGURE 6.33 Here we use the
:?¬? rst-child pseudo element as it
is intended to be used, to create a
needed difference between the ?¬? rst
element in a group and the other elements;
in this case, to add a ?¬? fth line
to our set of four list items.
Pages:
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251