75em; margin:20px;}
FIGURE 6.24 An unstyled, unordered
list.
Second, let??™s turn on the borders of the ul and the li elements so
that we can see the position of the individual elements of the list.
ul {border:1px solid red;}
li {border:1px solid green;}
FIGURE 6.25 The list and the list element
borders displayed in Firefox.
FIGURE 6.26 The list and the list element
borders displayed in IE7. Clearly,
there is a difference in the default
padding and margins between IE7 and
Firefox.
DESIGNING INTERFACE COMPONENTS 209
In Figures 6.25 and 6.26, the ul has a red border and each li has
a green border. As you can see, Firefox (Figure 6.25) uses padding
on the ul to indent the list (the green li elements are pushed away
from the red ul container) and also adds small top and bottom margins
to separate the list from surrounding items. Internet Explorer
(Figure 6.26) uses a margin on the ul to indent the list (note the ul
is wrapped tight around the li elements and both are moved away
from the div), and Internet Explorer only adds a bottom margin, not
a top one. These differences can make it hard to have lists look the
same across browsers. The only way to overcome these discrepancies
is ?¬? rst to reset the default margin and padding values to zero
and then restyle them.
So let??™s set the ul and li margins and padding on both types of list
elements to zero.
Pages:
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247