<ul> has extra margin or padding on left and how to get rid of it

HTML & CSS
1

it seems that <ul> has extra margin or padding to the left of it even when bullet is set to not to show…

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

...

		<style type="text/css">
        	ul {
        		list-style-image:none;
    			list-style-position:outside;
    			list-style-type:none;
			}
			
		</style>

		<div style="width: 300px; font: 12px Arial;background:#ff0">
			<ul>
				<li>hello world hello world hello world hello world</li>
			</ul>
		</div>

On IE 6 and 7, we can get rid of the left spacing by margin-left: 0 (by adding to the style of “ul”)
and we need an extra margin-bottom: 0 to get rid of extra margin at the bottom.

But adding those won’t work on FF and Chrome. We need padding-left: 0 so that the spacing is gone.

So i just added margin: 0; padding: 0 to the style of “ul” and it seems to work all fine.

Is this the general rule? It seems that designers like to use <ul> to design for tab, links, etc… is it because they make more semantic sense? just that the extra spacing will cause problem when there are elements near by and the <ul> items get wrapped to the next line. thanks.

2

As you have found out, different browsers use different method for providing list indent - in general, control both margin and padding. If you use a universal reset to reset the margins and padding of everything, then this is a non-issue.

3

i tried to use


	LI:before { 
               display: marker;
               marker-offset: 9em;
	}

to see if i can change the spacing by this method but it doesn’t work… any idea? thanks.

4

i tend to not use

  * { padding:0; margin: 0 }

coz it create weird spacing for the radio buttons and maybe for other controls like the check boxes.

5

Even

ul, ol { padding:0; margin: 0 }

will sort out the list issue.