Eliminate wasted space around buttons

kmenzel
kmenzel used Ask the Experts™
on
I have a bunch of buttons in a row on a page and I would like to shrink the amount of wasted space between the border of the button and the text within it. I thought the CSS value for this was margin, but I do a:

INPUT { font-family: Fixedsys;  margin: 0; padding: 0; }

and the wasted space is still there. How can I adjust the size of this wasted space without having to size each one?

Thanks for the help,
Kerry
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2013

Commented:
I think you are out-of-luck.  A button is a button and the rendering rules
cannot be fully modified using CSS.  Even if you resize you will find that
there is still extra space above the text.

If the formatting is critical to the design then you need to use an image
because the formatting on the button is limited even in IE.  In Netscrap
even less so.

Cd&

Commented:
Your only alternative is to use images or layers with background colours.

The former is easy enough if you have reasonable graphics software.  The latter is easy if you do not care about Netscape 4 support.  It can be done in Netscape but the rendering and behaviour may not be exactly the same.  I can pass on details on how to do that if you wish.
Top Expert 2013

Commented:
dij8,

You haven't been around much.  You missed the PAQ builder over the weekend.

Cd&
Starting with Angular 5

Learn the essential features and functions of the popular JavaScript framework for building mobile, desktop and web applications.

Commented:
Yeah, I saw it just too late.  I thought about joining in but figured I had taken too many points from them already. ;-)  I didn't even look at any of the samples.  that is how bad things have been time wise.  Maybe I will win the next one. :-)

Author

Commented:
dij8,

Could you tell me a bit about doing this using layers with background colours.

thanks.
Commented:
This is an IE only solution (I think, never even bothered testing in Netscape).  It should give you enough to go on.  Ask for more if it isn't.

<style type="text/css">
.FormButton {
  color:#000000;
  background-color:#666666;
  border:2px solid;
  padding:2px;
  cursor:hand;
  font-family:Fixedsys;
}
</style>
<script language="JavaScript" type="text/javascript">
<!-- // cloak
function alertetext(thefield) {
  alert(document.forms[0].elements[thefield].value)
}
// decloak -->
</script>
<form id="myform">
  <input type="Text" size="20" id="thetextbox" name="thetextbox">
  <span class="FormButton" onclick="alertetext('thetextbox')">Show text value</span>
</form>
Top Expert 2013

Commented:
Yes IE only.  NS4 does not support onclick for span or cursor:hand
NS 6 might work but without cursor hand.

Cd&

Author

Commented:
Not so sure I want to go this route, but thanks a lot for the help.

Sucks that the button margin cannot be modified.

Commented:
Glad to help.  Thanks for the A.  If I had more time I probably could find a similar solution for NS.  Maybe.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial