ul {border:1px solid red; margin:0; padding:0;}
li {border:1px solid green; margin:0; padding:0;}
Now the margins and padding look the same in both Firefox and
Internet Explorer (Figures 6.27 and 6.28).
FIGURE 6.27 The list and the list
element borders displayed in Firefox
with the margins and padding set to
zero. Now the bullets hang outside
the unordered list element.
FIGURE 6.28 The list and the list
element borders displayed in IE7 with
the margins and padding set to zero. The
bullets hang outside the unordered list
element so, unlike Firefox, IE does not
display them.
Note that the bullets, which belong to the li elements, are now
hanging outside of the div. If the div were right against the edge of
the browser window, the bullets wouldn??™t even be visible. So you
always have to apply some minimal amount of left margin to the
li, or padding to the ul. This ensures that the bullets are within the
div, so that they won??™t overlap other elements on the page, and that
Using the universal selector to set
the margins and padding of all
elements to zero (with * {margin:0;
padding:0;}) at the top of your style
sheet will have the same effect,
so if you do that, you don??™t need to
do it again in the list styling.
STYLIN??™ WITH CSS - CHAPTER 6 210
Internet Explorer 6 & 7 will actually display them. So let??™s now set
the left margin (Figures 6.
Pages:
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248