Button Rendering Problem in IE7

I believe I have found a rendering bug in IE7 that has not been reported.

When positioning a button (input type=submit) absolutely, IE7 renders the button "stretched" horizontally across the screen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>IE7 Stretched Button Bug</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<form action="." method="post">
<input
type="submit"
value="Stretched in IE7"
style="z-index:100;position:absolute;left:100px;top:100px" />
</form>
</body>
</html>

This appears to render as expected in IE6 and FF2.

A work-around for some people would be to include a specific width. This, however, is not an option for me.

Answer this question

Button Rendering Problem in IE7

SCSmith
I am having the same issue. Is there a fix
ArnsteinD
I am running IE7 version 7.0.5730.11 on WinXP

and loaded up your *full* sample file. and I see the stretching you are talking about (WOAH!) that is massive, worse than I was expecting.

I uploaded a screenshot here...
http://img171.imageshack.us/my.php image=iestretchedbuttonissuehl4.png

I don't see anything in the markup that should cause this, and of course it looks fine in any other browser.

For the record, it seems to be related to the position absolute... if you remove that, it works fine.

I would say to enter a bug report in IE7, but they took that tool offline... because aparently IE7 is perfect, and therefore bug tracking is no longer required (yes, that is very thick sarcasm)
Paul Arena
I am using IE7 version 7.0.5730.11 on Windows XP Pro and IE7 version 7.0.6000.16473 on Windows Vista Business and the code I originally submitted (see above) works fine now.

A couple of thoughts:
1. Incase you haven't already, try updating to the latest versions (the ones I just listed or higher).
2. Alternatively (and also a solution I can't try myself since I don't have an earlier version of IE7) try adding display:inline to the style or class for the button as I presume the bug was that IE7 was rendering the button as block.
For example:

Code Snippet
<input
type="submit"
value="Stretched in IE7"
style="z-index:100;position:absolute;left:100px;top:100px;display:inline;" />

Please let us know if either of those fixed (or worked around) the problem.

chicagokiwi
Simon Telling
buttons in IE have always had rendering issues (stretching) in XP, ever since they added the "rounded" buttons. I'm not sure if Vista fixes it or not.

There are hacks out there to make them appear ok, but you need to specify widths. (sorry)

This was high on the list for bugs to be fixed for IE7, but it was ignored on the IE feedback site, as it wasn't considered a big issue. (shame)

good luck!

PS your buttons will always look good in other browsers. ;-)
Yodine

Interesting. After reading your reply, I tried it on IE7 version 7.0.5730.11 on Windows XP Home and the code I originally submitted results in a stretched button. Obviously, I got a completely different result on XP Pro and Vista Business with the versions stated above.

On which XP edition were you able to reproduce it I had assumed it had been corrected in my previous posit, but alas it is either not the case, or not the full story.

FYI to any readers - the display:inline idea I suggested (without being able to duplicate the problem again until now) does not work.

For those that need to absolutely position the button without specifying a width (my original problem), I don't have a work around as of yet.
Button Rendering Problem in IE7

Answer this question