views:

244

answers:

4

Here is my html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
    input.navbutton
    {
        text-align: center;
        min-width: 100px;
    }
</style>
</head>
<body>
    <input type="submit" class="navbutton " value="Next" />
</body>
</html>

On IE 7, this ends up looking like this:

alt text

But on Firefox it looks like this:

alt text

As you can see, the text is not correctly centered in IE 7.

Any ideas on how to solve this?

A: 

Try this:

input.navbutton
{
    text-align: center;
    min-width: 100px;
    align:center;
}

In IE (old), align affects the text too.

Sarfraz
Thanks for the suggestion, but no dice I'm afraid.
einarq
+1  A: 

Nice bug your caught there einarq..

It could be related to the min-width bug : http://social.msdn.microsoft.com/Forums/en/iewebdevelopment/thread/e54188ad-cdad-4168-bbf9-2d0b5271676d

The only viable workaround i can see is to drop the min-width and add left and right paddings ..

Gaby
A: 

min-width on a button already doesn't work in IE6/7 (it won't expand the button at all when the text is larger, as you seem to expect). Replace it by width and live with it.

BalusC
min-width is supported by IE 7 (not IE 6), but appearantly it is a bit buggy. The behavior is correct in IE 8 (non-compat mode)http://msdn.microsoft.com/en-us/library/ms530820(VS.85).aspx
einarq
D'oh. I literally said `min-width` **on a button**. Try and see yourself before headlessly downvoting :/
BalusC
A: 

Try margin: 0 auto; in your CSS. I know this centers text for <div> tags but I don't know about buttons.

RandomBen