CSS Works in IE 7 and Firefox 2, but not IE 6

Is there something that sticks out that might be causing IE 6 to do something different with the code below:

#button {
	background-image:url(/images/button.png);
	margin-top:-31px;
	padding:2px 0px 16px 9px;
	position:relative;
	width:185px;
	height:11px;
	font-family:century gothic;
	font-weight:400;
	font-size:95%;
	left:673px;
	overflow:hidden;
	position:absolute;
	top:1px;
	z-index:0;
	color:#FFFFFF;
	cursor:hand;
	cursor:pointer;
}

Code (markup):

IE 6 shifts this button to the left a few pixels and up a few pixels.

 

the 3px jog

 

Well, let's see... you are declaring BOTH position:absolute AND position:relative at the same time, which is it? I've got the feeling you are either resorting to positioning on elements that shouldn't use positioning, or you're just using the wrong positioning.

Take the margin-top:-31px - it's already out of flow and being position:absolute top:1px - why not just declare top:-30px and lose the margin?

If you can point us at the site in question or a demo page, we could probably answer better... what I'm seeing from this css though leads me to think you've overthought the CSS and the layout itself in the extreme.

Oh, duh - another issue. 11px tall container with a % font size. IE won't make a container shorter than the line-height, so your font size declaration could be making the element too tall.