asp:button width problem in IE7, adds extra 100px's to the left for some reason?

Question

For some reason the asp:button's in IE7 add an extra 100px's (or so...) to the left of the button. this creates a problem for my css styling. Sure, I could go in and overwrite each individual button by giving it exact pixel dimensions.., but that would be a pain in the ass since the application my companies building has nearly 50 pages involved with about 10 buttons per page (you can do the math!). I would much rather let asp:button grow as it needs to depending on the size/width of the text.

Any help would be much appreciated.

ASPX (html)

<div class="sales-order-buttons">
   <asp:Button ID="btnSearchSalesOrders" runat="server" Text="Search Sales Orders" />
   <asp:Button ID="btnViewAssociatedOrders" runat="server" Text="View Associated Orders" />
</div>

CSS

input[type="submit"] {
   background: url("../images/arrow.png") no-repeat left red;
   color: #006aae;
   float: left;
   text-align: left;
   display: block;
   width: auto;
   margin-left: 10px;
   text-indent: 40px; 
}

input[type="submit"]:hover { 
   color: #009CFF; 
   cursor: pointer;
}

Is there possibly something in the style sheet (or another style sheet) that's causing it to stretch? Are the buttons overlayed with any images or anything? Can you post some code? — James Johnson, Aug 09 '11 at 20:09
there is nothing in the stylesheet making it do this, it is purely an IE7 bug I believe because in all other browsers (firefox, ie8, etc) the button width stays correct. — Oneezy, Aug 09 '11 at 20:36
Is it all buttons throughout the site? Can you post some code that I can look at? — James Johnson, Aug 09 '11 at 20:40
to answer your question, yes. there will probably be over 200 to 300 buttons throughout the web application when complete. Im running into the width issue in IE7 and its throwing my whole layout off. Depending on how i set text-align, it will automatically add about 100px to the left side or right side of the tags — Oneezy, Aug 09 '11 at 20:47
I got it! I simply added: width:auto; overflow:visible; to the input[type="submit"] in the css! What a relief!, hope this helps someone else in the future ;) — Oneezy, Aug 09 '11 at 21:34

score 0 · Answer 1 · edited May 23 '17 at 12:30

This is a known issue, e.g. see Remove extra padding in IE button and as you mentioned in the comments the solution looks like:

/* this is to fix IE 6 and 7 which create extra right/left padding on buttons
 * IMPORTANT: because IE 6 does not understand the first selector below, you need to apply the class "inputButton" to all input of type="button" in your documents
 * the first declaration is for IE 6 and 7, the second one for IE 6 only, the third one is for all browsers.
 */
button,
input[type="submit"],
input[type="reset"],
input[type="button"],
.inputButton {
  *overflow: visible;
  _width: 0;
  padding: .2em .4em;
}

A more robust solution for any other funnies across browsers is to use a CSS reset/base:

Try this one (the only one that I could find that address this specific IE bug directly): http://blog.teamtreehouse.com/setting-rather-than-resetting-default-styling , CSS base: http://tjkdesign.com/ez-css/css/base.css

asp:button width problem in IE7, adds extra 100px's to the left for some reason?

1 Answers1