This can be frustrating when developing websites that rely on lists and pixel-perfect element
placement. By creating a list and using CSS to apply a background color to the list
and a different color to list items, and then removing the page??™s padding and margins, you
can observe how each browser creates lists and indents the bullet points and content.
In Gecko browsers (e.g., Mozilla Firefox), Opera, and Safari, the list background color is
displayed behind the bullet points, which suggests that those browsers place bullet points
within the list??™s left-hand padding (because backgrounds extend into an element??™s
padding). Internet Explorer shows no background color there, suggesting it places bullet
points within the list??™s left-hand margin.
This is confirmed if you set the margin property to 0 for a ul selector in CSS. The list is
unaffected in all browsers but Internet Explorer, in which the bullets abut the left edge of
the web browser window. Conversely, setting padding to 0 makes the same thing happen
in Gecko browsers, Safari, and Opera.
To get all browsers on a level playing field, you must remove margins and padding, which,
as mentioned previously in this book, is done in CSS by way of the universal selector:
* {
margin: 0;
padding: 0;
}
With this in place, all browsers render lists in the same way, and you can set specific values
as appropriate. For example, bring back the bullet points (which may be at least partially
hidden if margins and padding are both zeroed) by setting either the margin-left or
padding-left value to 1.
Pages:
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189