Safari spacing out my UL/LI's for some odd reason...

I'm trying to re-design my website and in Firefox, IE & Opera my UL's look fine (shown in picture below)


but in Safari my UL's come out like this:


Do you have any suggestions as to how I can fix the spacing that Safari has on my UL's?

The code for the UL's is:

#headlines ul {
	list-style:none;
	margin-left: 0.5em;
	padding-bottom: 5px;
}


#headlines li {
	background-repeat: no-repeat;
	background-position: 0 0.4em;
}

Code (markup):

Thanks for taking the time to look at my question!

 

I believe I just fixed the issue by placing display: inline; within the #headlines ul code. The issue now is the height between the links in Safari still.

 

Make sure to declare all margin's and padding (top, right, bottom and left) for both ul's and li's. Browsers usually have default margins AND padding set for ul's AND li's. That should fix your problem and you should be able to take out the display:inline.

 

That they do. As do other elements, which is why I use a reset at the top of my CSS file.

Here it is, for those who want a handy reference:

/* GLOBAL RESET STYLE RULES */

	html, body, address, blockquote, button, dd, del, div, dl, dt, fieldset,
	form, h1, h2, h3, h4, h5, h6, hr, ins, map, object, ol, p, pre, table,
	tbody, td, tfoot, thead, tr, ul {
		margin: 0;
		padding: 0;
		vertical-align: baseline;
	}

	body {
		background: #FFF;
		color: #111;
		font: 85%/1.5 verdana, arial, helvetica, sans-serif;
	}
	
	a {
		background: transparent;
		color: #00F;
	}
	
	a:visited {
		color: #909;
	}
	
	a:hover, a:focus, a:active {
		color: #F00;
		text-decoration: none;
	}

	fieldset {
		border: 0;
		display: inline;
	}

	h1, h2, h3, h4, h5, h6 {
		font: bold 1em/1.5 georgia, garamond, "times new roman", times, serif;
	}

	hr {
		position: absolute;
		left: -999em;
	}

	img {
		border: 0;
		vertical-align: bottom;
	}
	
	object {
		vertical-align: bottom;
	}

Code (markup):