How can I get this button to line up correctly in IE7?

I'm trying to get a in IE7 to line up properly with the element above it.

This is an example of how things are supposed to look:

but this is how it's appearing in IE7:

This HTML I'm using (view with IE in IE7 mode for best effect!): http://jsfiddle.net开发者_运维百科/ZHfbF/2/

Is there a way for me to get this to behave like in the top image?

Add overflow:visible to your button, it will remove that horizontal padding IE puts on the button depending of the text it contains.

Like this :

#btnViewResults {
    float: right;
    padding-right: 7px;
    overflow: visible;
}

I've given the question +1, but frankly, if that's the worst layout issue you've got in IE7, I'd just accept it and ignore it, and be very grateful it's not worse.

As things stand, looking at those screenshots, an IE7 user isn't even going to notice that there's a problem, so I wouldn't get too hung up over it.

By the way, you mention using "IE7 mode" -- please note that IE's compatibility modes do not render exactly the same as a real copy of IE7. There are several layout glitches and bugs in compatibility mode that do not appear either in a real IE7 nor in IE8 in it's standard mode. Exercise caution when using compatibility mode for testing.