CODEWITHSUNDEEP
asp.nethtmlcss
Juri
Juri

Reputation: 32950

HTML input type submit: problem with width on IE

this will be quite difficult to explain. I hope I'm able to.

I recently created a custom ASP.net server control, representing a toolbar. The toolbar contains buttons, so HTML elements. To allow me to add an image I use CSS which add it to the background. The CSS which I apply on the input element looks like this:

.button{
    padding: 2px 2px 2px 2px;
    margin-right: 2px;
    border: 1px solid #999;
    cursor: pointer;
    text-decoration: none;
    color: #606060;
}

Moreover on the button itself (through the style tag; this is because these kind of buttons are rendered automatically and shouldn't be changed by the end-programmer) I have styles which define the background images and some additional settings

background-attachment:scroll;
background-image:url(images/select.png);
background-position:left center;
background-repeat:no-repeat;
padding-left:15px;

The padding-left is needed s.t. the text doesn't go behind the background image. So at the end you would have something like

<input type="submit" style="background-image: url(images/select.png); background-attachment: scroll; background-repeat: no-repeat; background-position: left center; padding-left: 15px;" class="button" id="someId" value="Save" name="someName"/>

On Firefox (as usual) everything works perfectly. My problem is that on IE (tested on IE 7 but I need to be compatible from IE 6+) it happens that if you enter a quite long text as the button text, the button will enlarge, basically the space before and after the button text increases with the size of the text. To have the button still immediately after the image I added the line text-align:right to the button class.

To illustrate it better...
On Firefox:
alt text http://img268.imageshack.us/img268/311/buttonfirefox.jpg

On IE:
alt text http://img23.imageshack.us/img23/2373/buttonie.jpg

Does anyone have any suggestion on how I could fix this??

//Edit:
What I could do of course is to specify a fixed width on the button, till it looks nicely. I would like to avoid this however, if possible.

Upvotes: 4

Views: 3356

Answers (2)

TigerTiger
TigerTiger

Reputation: 10806

Just try a css reset of submit button first (at the beginning of css file). For example margin, padding etc set to zero.

I am not quite sure how apply reset for submit buttons ..

but you can try following and test

/**
* Reset browser defaults
* Author: Tim Wright - csskarma.com
* Last updated: 04.19.2009
----------------------------------*/

body,div,dl,dt,dd,ul,ol,
li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,p,
blockquote,th,td          { margin:0;padding:0; }
body                      { line-height:1;color:#121212;background:#fff; }
h1,h2,h3,h4,h5,h6,p       { font-size:100%;font-weight:400; }
ol,ul                     { list-style:none; }
caption,cite,code,th      { font-style:normal;font-weight:400; }
fieldset,img              { border:0; }
caption,th                { text-align:left; }
:focus                    { outline:1px dotted #eee; }
table                     { border-collapse:collapse;border-spacing:0; }
hr                        { border:0;border-top:1px solid #555;margin:0;height:1px; }
label,button              { cursor:pointer; }

As per @Andrew's answer you can try * html input { overflow: visible; } also.

Upvotes: 0

Andrew Duffy
Andrew Duffy

Reputation: 6938

This is an old bug. You need to add overflow:visible to the button. There is more here:

http://jehiah.cz/archive/button-width-in-ie

and here:

http://www.brandnewbox.co.uk/articles/details/removing_padding_from_ie_buttons/

Upvotes: 8

Related Questions