button css padding problem

  • Thread starter Thread starter Søren Jacobsen
  • Start date Start date
S

Søren Jacobsen

Hi All,

When styling a button with css, I have a problem controlling the button's
left and right padding. 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
 
Søren Jacobsen said:
Hi All,

When styling a button with css, I have a problem controlling the button's
left and right padding. 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?
Click to expand...

Switch from quirks to strict with DOCTYPE.

IE in quirks mode draws boxes in a non standard way.

Louise
 
Switch from quirks to strict with DOCTYPE.

IE in quirks mode draws boxes in a non standard way.
Click to expand...

Excellent! That solved another problem for me - however, it did not solve
the particular problem I described - my guess is that buttons are not
considered boxes. But thanks anyway.

If anybody else has an idea what is going on (see original post), I would be
very grateful.

regards,
Søren
 
Søren Jacobsen said:
Excellent! That solved another problem for me - however, it did not solve
the particular problem I described - my guess is that buttons are not
considered boxes. But thanks anyway.

If anybody else has an idea what is going on (see original post), I would be
very grateful.
Click to expand...

Declare the width

Louise
 
Back
Top