difference between normal buttons in IE and Other Browsers

[taval]

Hi,

I'm trying to find out why in IE the following button:

<input name="button" type="button" value="This is a Simple Sample Button">

has padding on the left and right and is centered while in Firefox there is no padding. I'm assuming Firefox is rendering the button in the right way, is there a fix to make the button look the same in IE as it does in Firefox.

Cheers.
Taha

 

[BabyJeffy]

Each browser is left to choose how it renders buttons. It varies between the different operating systems and between the different browsers... usually the end result matches the "feel" of the parent operating system's buttons... but as I said... each browser is left to choose how it renders buttons.

Have you tried applying some style to the button directly so that it appears the same in IE as in FF? Something like:

<input type="button" value="This is a button" style="padding:0;margin:0;text-align:left;" />

If that works, you can move it from inline and use it on all buttons thru use of a style sheet. You can also prevent this from being applied to FF through use of the IE conditionals available for style sheet.

Cheers,
Jeff

 

[taval]

Hi Jeff,

I tried the no padding and no margin with left alignment. I still get a large space in IE. The only way I can change it to make it look the same is by using a pixel value width, however this means I have to set the size of each button manually (as the length of text in each button varies). Thanks for your help though. I guess I'll make some buttons of a fixed pixel size on my site so that they don't look odd.

Thanks.

 

[EdwardMartinIII]

Taha,

You can always declare a button CLASS in your stylesheet:

input.PZButton {
                width: 130px;
                font-size:8pt;
                }

and then in your code, refer to the class:

<input type="button" class="PZButton" value="Copy Buffer" />

That way, after you make a bunch of buttons, of you discover you can fiddle with the size, you can do so universally.

Cheers,


Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door

 

[BillyRayPreachersSon]

From an article I read earlier today (found through another TT post, which I can no longer find):

http://www.456bereastreet.com/lab/form_controls/button/

It shows many button styles in different browsers.

Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]