These two browsers both render the list as on the right. The <ul> itself has a margin on the top and bottom, and padding on the left (the image doesn't show that the red and blue boxes go all the way to the right against the green border).CSS allows many different options for HTML lists, in addition to some applications already shown in the List of Links snippet. This snippet explains the ways different browsers treat lists.
If we start with a basic unordered list:
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
we can wrap the list and add a little bit of CSS to figure out how the different parts of the list are put together:
div.listwrap {
border: 2px green solid;
}
.list {
border: 2px red solid;
}
.list li {
border: 2px blue solid;
}
Your browser displays this as:
Next we'll look at the way different browsers treat this list. Knowing where each browser adds padding and margins helps to identify what you need to change to be sure your lists look similar on the different browsers.
These two browsers both render the list as on the right. The <ul> itself has a margin on the top and bottom, and padding on the left (the image doesn't show that the red and blue boxes go all the way to the right against the green border).
The bullets for the list site outside the border for the individual <li> items, and appear to be within the padding of the <ul>.
If we were to remove the padding on the left of the list itself, we see on the right that the bullets would appear outside of the list itself. Not only that, but what this image doesn't show is that the position of the wrapper container has not changed at all - the bullets act as if they are absolutely positioned to the left of each list item, and thus removed from the normal flow of the document.
As seen on the image to the right, Opera 7 appears to have a margin on the left of the list itself, and a top margin for the list and list items. If we set a zero left margin on the list, its left side appears similar to when we zero the left padding on Safari and Mozilla.
Opera 6 also adds margins on the bottoms of the list and list items.
The image on the right shows that Internet Explorer for Windows appears very similar to Opera 7 except for the lack of a top margin on the list and list items. Its behavior is the same when we zero the left margin of the list.
IE/Mac behaves the same as IE/Windows, except it has padding on the top and bottom of the list.
If we change the list to be in an absolutely positioned container, IE/Windows displays the list as shown in the image to the right. There is a bottom margin and a left margin, but beware that if you remove the left margin, the bullets will disappear - you must preserve the left margin if you want the bullets to still show.
Browsers other than IE/Windows will position the bullets outside the absolutely-positioned container with a left padding of 0 for Mozilla and Safari, or left margin of 0 for Opera and IE/Mac. These browsers (but not Opera 6 or earlier) support the overflow: hidden declaration, which cause them to act the same as IE/Windows in this case.
IE5.5/Windows will display your list with a slight hanging indent, rather than the default full hanging indent. In addition to that, IE5.0/Windows will treat ordered lists as if they were unordered lists. If you try to set the list-style-type to correct the list item markers, IE5.0/Windows will not increment the counter, so all list items will have the same marker (such as "1" or "A").
Some of the different CSS options for styling lists are:
These items are all inherited, so you can remove the list markers on all the items by setting list-style-type: none on the <ul>. If you wish to remove them only on individual items, you can set list-style-type on those particular <li>s.
If we add a couple CSS rules to the ones we used above:
.list dt {
border: 2px grey solid;
}
.list dd {
border: 2px yellow solid;
}
we can see how browsers render definition lists:
The image at the right is representative of the different browsers, except that IE/Windows does not have a top and bottom margin for the list, and Opera 7 only has a top margin.
CSS offers many ways to change the appearance of definition lists.
If you wish to have a hanging-indent look, you can use CSS similar to:
dl.list1 dt {
float: left;
clear: left;
margin-right: 0.3em;
font-weight: bold;
}
dl.list1 dd {
margin-left: 1.5em;
}
which make the list look like:
Hyphens werre added to the beginning of the definitions to separate them from the terms. Some browsers allow you to use the :before and :after pseudo-classes to insert text such as the hyphens, but Internet Explorer/Windows does not support this.
If you wish to have a block format, you can use CSS similar to:
dl.list2 dt {
float: left;
clear: left;
margin-right: 0.3em;
font-style: italic;
}
dl.list2 dd {
margin-left: 5.5em;
}
which makes our list look like:
Hyphens were not used in this example since the intended appearance of the list is to not have them.