IE Displaying Submit Button too Wide

width of submit button in internet explorer vs. firefox

[jandrews]

I'm using Aweber to create and manage subscriber opt-ins, and today I noticed that the "Submit" button appears **much wider** in IE than it does in Firefox. IE displays too much extra space around the text on the Submit button. This is not a problem when the text on the Submit button is short, such as "Submit." But, when I use text such as "Yes, Send Me My Free WXYZ Guide" the button looks awful in IE. It's massively wide.

<snip -- No URLs, thanks. We know what you mean, so no example needed.>

How do I get the submit buttons to look the same in both browsers?

Is there a CSS hack for IE--so that it will render the Submit button properly?

[edited by: DrDoc at 5:38 am (utc) on Oct. 3, 2006]

[Setek]

Use conditional comments [msdn.microsoft.com] to remove the horizontal padding on the inputs that are buttons (by a class, since cross-browser there is no use of attribute selectors.)

In your normal stylesheet, set however much padding you want for your standards-compliant browsers, to match IE as you wish :)

[edit]

Oh, I almost forgot: No dropping URIs like that - see the Webmaster World Terms of Service [webmasterworld.com] and the CSS Forum Charter [webmasterworld.com].

[/edit]

[edited by: Setek at 3:57 am (utc) on Oct. 3, 2006]

[jandrews]

Setek - Thanks for your advice. Unfortunately, I have no idea how to use a conditional comment. The page you linked to has multiple items listed, and looks Greek to me.

What should the code look like to solve the IE display problem? What type of conditional comment should I be using?

[Setek]

Unfortunately, I have no idea how to use a conditional comment.

I'll use an embedded style as an example for you :)

What should the code look like to solve the IE display problem?

<style type="text/css">
<!--
input.button { padding: 2px 8px; } /* INPUTS WITH CLASS BUTTON */
-->
</style>
<!--[if lte IE 6]>
<style type="text/css">
input.button { padding: 2px 0px; }
</style>
<![endif]-->

You can also use this as multiple external stylesheets:

<link rel="stylesheet" type="text/css" media="screen" href="/includes/mynormalstylesheet.css" />
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" media="screen" href="/includes/ie.css" /><![endif]-->

Keep note: as the styles from anything above the conditional comment come first, they will be loaded first, then the conditional comment styles/stylesheet will load after and override.

[SuzyUK]

It's been a while since this topic was visited

Setek nice explanation on conditional comments, however simply changing the padding for IE won't cut it if I remember.

IE doesn't respect padding here, the amount of space on the left and right of the input value is directly related to the length of the string. and at one point suggestions were made [webmasterworld.com] as to how to detect that string length to incorporate a JS or PHP solution.

hadn't looked at in a while but a rework of an older IE solution seems to work? Feel free to test and see what happens in various browsers I haven't tested them all

If overflow causes a problem to other browsers (it shouldn't as there's no width/heights) then it could be hidden in a general IE conditional comment.

input.button {
padding: 2px 5px; /* whatever your required padding is */
overflow: visible; /* seems to keep IE (inc 7) in check without anything else */
}

HTML:
<input type="submit" class="button" value="yes, click me for much more information" />

Suzy

[jandrews]

Setek, thank you for clarifying conditional statements.

Suzy, thank you for your answer. I understand your solution, and best of all, it worked!

In my stylesheet, I used:

input.button {
max-width: 260px;
width: 260px;
padding: 1px 4px; /* whatever your required padding is */
overflow: visible; /* seems to keep IE (inc 7) in check without anything else */
}

.button {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}

I discovered that if I didn't use "max-width" and "width" then IE created extra white space between the text (i.e. First Name) and the input text field.

In the HTML:

<input type="submit" class="button" name="submit" value="Send me the WXYZ Guide"> </td></tr>

Lots of good ideas in the other thread. Thank you everyone.

P.S. I wasn't aware of the policy on URL's. I was simply trying to demonstrate the problem visually. This board is unusual in regard to its policy on using URL's. Most boards allow URL's, as long as they're not affiliate links or blatant advertising/self-promotion.