Change in CSS creates lines …

I have the following html. It’s nothing fancy. It just creates a list of items vertically.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>Demos</title>
<style>

#idList {
	margin: 0;
	padding: 0;
}

#idList li {
	display: block;
	margin: 0;
	padding: 4px;
	width: 120px;
	background: #333;
	color: #888;
}

</style>
</head>
<body>
<ul id="idList">
	<li>option 1</li>
	<li>option 2</li>
	<li>option 3</li>
	<li>option 4</li>
	<li>option 5</li>
	<li>option 6</li>
	<li>option 7</li>
	<li>option 8</li>
	<li>option 9</li>
	<li>option A</li>
	<li>option B</li>
	<li>option C</li>
	<li>option D</li>
	<li>option E</li>
	<li>option F</li>
</ul>
</body>
</html>

Code (markup):

But if I add the font type

font: normal 13px Courier;

Code (markup):

like the following

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>Demos</title>
<style>

#idList {
	margin: 0;
	padding: 0;
}

#idList li {
	display: block;
	margin: 0;
	padding: 4px;
	width: 120px;
	background: #333;
	color: #888;
	font: normal 13px Courier;
}

</style>
</head>
<body>
<ul id="idList">
	<li>option 1</li>
	<li>option 2</li>
	<li>option 3</li>
	<li>option 4</li>
	<li>option 5</li>
	<li>option 6</li>
	<li>option 7</li>
	<li>option 8</li>
	<li>option 9</li>
	<li>option A</li>
	<li>option B</li>
	<li>option C</li>
	<li>option D</li>
	<li>option E</li>
	<li>option F</li>
</ul>
</body>
</html>

Code (markup):

IE6 creates lines between these items. Why is this happening and how can I fix this?