<button> tag margin is relative to textwidth. How to prevent this

Bertus Dam

unread,

Mar 12, 2003, 6:48:46 AM3/12/03

to

I use <button> tags in my project. The margin of those buttons to the left
and the right size of the text in the button is a bit strange.
When I use a button with a small text on it, let's say 4 letters, the margin
from the left and the right size of the text to the border of the button is
very small.
When I use a button with a large text on it, lets say 10 letters, the margin
from the left and the right size of the text to the border of the button is
much bigger.
So, the margin is relative to the text width. I don't want that. I want a
margin-left of 3px and a margin-right of 3px and nothing more. When I put a
margin-left of 3px and a margin-right of 3px in my stylesheet however, the
margin-values are added to this relative margin values. How can I prevent
these relative margin values?

Bertus

Jon Perry

unread,

Mar 12, 2003, 9:20:38 AM3/12/03

to

To fix a button's size, use the width style:

<html>
<head>
<style>
input {width:100px}
</style>
</head>
<body>
<input type="button" value="123">
<br>
<input type="button" value="onetwothree">
<br>
<input type="button" value="onetwothreefourfivesix">
</body>
</html>

--
Jon Perry
pe...@globalnet.co.uk
http://www.users.globalnet.co.uk/~perry/maths/
http://www.users.globalnet.co.uk/~perry/DIVMenu/
BrainBench MVP for HTML and JavaScript
http://www.brainbench.com
"Bertus Dam" <b....@gmx.net> wrote in message
news:OQZ470I6...@TK2MSFTNGP11.phx.gbl...

Bertus Dam

unread,

Mar 12, 2003, 9:37:04 AM3/12/03

to

That makes all buttons equal in size. I don't want that. I want my buttons
to be the width of the containing text plus 3 pixels on the left side and 3
pixels on the right side.
For example, the File, Edit, View, Favorites buttons in Internet explorer.
They are also the width of the containing text plus 3 pixels on the left
side and 3 pixels on the right side.

Regards,

Bertus

"Jon Perry" <pe...@globalnet.co.uk> wrote in message
news:uPOXtKK6...@TK2MSFTNGP09.phx.gbl...

Dave Anderson

unread,

Mar 12, 2003, 11:29:32 AM3/12/03

to

Show us what you are doing.

"Bertus Dam" <b....@gmx.net> wrote in message
news:OQZ470I6...@TK2MSFTNGP11.phx.gbl...

--
Dave Anderson

Unsolicited commercial email will be read at a cost of $500 per message. Use of
this email address implies consent to these terms. Please do not contact me
directly or ask me to contact you directly for assistance. If your question is
worth asking, it's worth posting.

Bertus Dam

unread,

Mar 13, 2003, 4:27:56 AM3/13/03

to

OK, put the following in a html file:

<button>OK</button
<button>Properties</button>

When you look at the two generated buttons, you'll see that the OK button
barely has any margins on the left and the right side of the text.
When you look at the properties button however, there's a big margin on the
left and the right side of the text.

I just want the margins to be equal, no matter how much text is on the
buttons.

Bertus

"Dave Anderson" <GTSPXO...@spammotel.com> wrote in message
news:uNxFWSL6...@TK2MSFTNGP12.phx.gbl...

Steve Fulton

unread,

Mar 13, 2003, 7:36:51 AM3/13/03

to

Bertus Dam wrote:
> OK, put the following in a html file:
>
>
> <button>OK</button
> <button>Properties</button>
>
>
> When you look at the two generated buttons, you'll see that the OK button
> barely has any margins on the left and the right side of the text.
> When you look at the properties button however, there's a big margin on the
> left and the right side of the text.
>
> I just want the margins to be equal, no matter how much text is on the
> buttons.

It isn't going to happen. This is one of annoyances of using IE's GUI widgets
and there's nothing you can do about it. It's a bug in rendering the button
widget; it doesn't matter if the element is <button> or <input type="button">.

BTW, the property you should be adjusting is padding, not margin. Margin is the
space outside the border; padding is the space between the border and the
content. But in this case, even setting the padding to 0 doesn't solve the
problem.

If you need pixel control, you'll have to roll your own button widget:

span.button {
padding: 1px 3px;
color: ButtonText;
background-color: ButtonFace;
border: thin ButtonFace outset;
font: caption;
}

--
Steve

To know yet to think that one does not know is best; Not to know yet to think
that one knows will lead to difficulty. -Lao-Tzu

Bertus Dam

unread,

Mar 13, 2003, 9:21:55 AM3/13/03

to

I do have a solution, but I'd like a reaction on this:

button.menuButton {width: expression(this.scrollWidth + 16);}

Is this a smart thing to do, or is the expression continuously evaluated?
The fact that expression is IE5+ only doesn't matter to me. It's for a
webapp.

Comments please.

Bertus

"Steve Fulton" <cerbe...@hotmail.com> wrote in message
news:OF3vD2V6...@TK2MSFTNGP12.phx.gbl...

Dave Anderson

unread,

Mar 13, 2003, 11:25:07 AM3/13/03

to

"Bertus Dam" wrote:
>
> I just want the margins to be equal, no matter how much
> text is on the buttons.

Consider using something other than the <BUTTON> tag in that case. Here's one
alternative:

<STYLE TYPE="text/css">
.myButton {
font-family: Verdana,Tahoma,Georgia,sans-serif;
font-size: 10pt;
padding: 0px 20px;
font-weight: bold;
border: solid #003366 1px;
background-color: #eeeeee;
}
.myButton A:link, .myButton A:visited {
text-decoration:none;
color: #006699;
}
.myButton A:hover {
color: #003366;
}
</STYLE>

<TABLE>
<TR><TD><DIV CLASS="myButton">
<A HREF="" ONCLICK="doStuff();return false">OK</A></DIV></TD>
<TD><DIV CLASS="myButton">
<A HREF="" ONCLICK="doStuff();return false">Properties</A></DIV></TD></TR>
</TABLE>

Bertus Dam

unread,

Mar 14, 2003, 4:05:21 AM3/14/03

to

Impossible. I need to use the button tag, for the accesskeys of those
buttons to work properly.

"Dave Anderson" <GTSPXO...@spammotel.com> wrote in message

news:uy2Gg0X6...@TK2MSFTNGP11.phx.gbl...