[thelist] background color driving me crazy in IE

[Roger Ly]

Hey all,

I'm having trouble getting what should be a simple design to look correct. 

Here's what I am trying to get
* gray pill-shaped box of a fixed width
* centered one line of text in box
* two arrows aligned to the left and right edges of the box using float:
left and float: right;
* entire pill box centered within a div

The dumbed-down version of what I am doing is available at
http://www.bareviking.com/bgimage/index.html

If you look at the page in IE, you can see some of the gray background
seeping in on the left and right edges of the left and right arrow buttons.
If you look at the same page in Moz 1.6, the pillbox looks correct.

Also, for some reason Mozilla isn't centering my pill box correctly, while
IE is.

Page validates as HTML 4.01 Transitional, and the CSS I am using validates.

Any thoughts you have would be greatly appreciated.

CSS (relevant)
==============
#page-navigation { text-align: center; }
#page-navigation div { text-align: center; color: #1a5d1b; width: 120px;
font-size: 9px; height: 16px; background: #e4e1e3; padding: 0px; margin:
0px; }

.left-aligned { float: left; }
.right-aligned { float: right; }



HTML (relevant):
================
<div id="page-navigation">
	<div>
		<img src="left_disabled.gif" width="16" height="16"
border="0" alt="previous" class="left-aligned"><a href="index.html"
onmouseover="replaceImage('next-image', 'right_hover.gif');"
onmouseout="replaceImage('next-image', 'right_enabled.gif');"><img
id="next-image" src="right_enabled.gif" width="16" height="16" border="0"
alt="next" class="right-aligned"></a>
		page 1 of 2
	</div>
</div>


Thanks,

Roger