[thelist] background color driving me crazy in IE

Roger Ly evolt at matchpenalty.com
Fri Nov 5 16:21:08 CST 2004

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

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">
		<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



More information about the thelist mailing list