Padding in css-styled button, ie6

[Søren Jacobsen]

Hi All,

When styling a button with css, I have a problem controlling the button's
left and right padding, when rendering in ie6. If I do nothing, it seems to
compute the padding relative to how much text the button contains. I want a
certain, fixed amount of padding on either side of my button text, so
naturally I try to set this like the following:

button{
padding-left:5px;
padding-right:5px;
}
<button type="submit" value="none">This is a long text</button>

However, what happens is just that the padding is added to the already
existing padding. In other browsers like Opera and Moz this problem does not
exist. The only solution i have is setting a specific width on the button,
but this is really not very elegant. Does anybody have an explanation? Or
even better, a more elegant solution?

Regards,
Søren

 

[DU]

Hi All,

When styling a button with css, I have a problem controlling the button's
left and right padding, when rendering in ie6.

MSIE adds a default padding to all html buttons. I think this is a
defendable, reasonable decision.

If I do nothing, it seems to

compute the padding relative to how much text the button contains.

I suggest you detect the browser and then add a padding if it's not MSIE
5+... if you really need this.

I want a

certain, fixed amount of padding on either side of my button text, so
naturally I try to set this like the following:

button{
padding-left:5px;
padding-right:5px;
}
<button type="submit" value="none">This is a long text</button>

In my opinion, there is a default padding in html buttons in MSIE 6.

http://www10.brinkster.com/doctorunclear/HTMLJavascriptCSS/AdvancedCSSButtons.html

However, what happens is just that the padding is added to the already
existing padding. In other browsers like Opera and Moz this problem does not
exist.

Padding declarations for html buttons will be ignored in Opera 7.x: so
this is a problem in Opera.

The only solution i have is setting a specific width on the button,

but this is really not very elegant. Does anybody have an explanation? Or
even better, a more elegant solution?

Regards,
Søren

How about counting the characters (including blank spaces) adding 2 and
then setting the width to (nbrCharacters + 2) ex. In any cases, I do not
think you have a major problem here in a webpage. You should rather
investigate, justify why you need to give a long caption to a button.

DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/
- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html

 

[Søren Jacobsen]

DU,

Thanks for your comments and valuable suggestions. You're right that this
isn't a major problem, I was just wondering how exactly IE6 (and IE5 as it
turns out) handled this.

Regards,
Søren