29 and 6.30).
div#listcontainer {border:1px solid #000; width:160px;
font-size:.75em; margin:20px;}
ul {border:1px solid red; margin:0 0 0 1.25em; padding:0;}
li {border:1px solid green; margin:0;}
FIGURES 6.29 AND 6.30 Now Firefox and IE display the list identically.
Note that I used the shorthand style to set all the margins (highlighted),
not just the left margin. If you don??™t keep the others
explicitly set at zero, the default top and bottom margins, which are
different for each browser, will reappear. Also, now we have placeholders
ready for the other three values in case we want to change
them later.
Let??™s change the space between the list items since they??™re a little too
close together
div#listcontainer {border:1px solid #000; width:160px;
font-size:.75em; margin:20px;}
ul {border:1px solid red; margin:0 0 0 1.25em; padding:0;}
li {border:1px solid green; border-bottom:2px solid #069;
margin:0; padding:.3em 0;}
The obvious way to do this is to set the margin-top or margin-bottom
on the li elements, but I prefer to use identical top and bottom
padding. This keeps the borders of the li elements touching instead
of creating space between them, which gives us some more options
for styling. To show you why it??™s better to increase the padding than
to change the margin, I??™ve replaced the boxes around the elements
with neat horizontal lines between each item (Figure 6.
Pages:
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249