margins inside a button [Archive]

florida

12-29-2004, 06:43 AM

How do I cut back the inside margin/padding inside my button using css.

The button has too much left and right space of the word and I would like to cut it down.

ray326

12-29-2004, 02:28 PM

Have you tried setting the padding?

NogDog

12-29-2004, 03:10 PM

At least in IE (haven't gotten around to checking other browsers yet), it seems that padding doesn't necessarily do the trick - it would seem that IE adds space around the label in proportion to the lenght of the label. The only work-around I have found is to override this calculated width with my own via CSS styling:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<title>Button Test</title>
<style type="text/css">
input {padding=2px;}
</style>
</head>
<body>
<form>
<p><input type=button id="test" value="Test"></p>
<p><input type=button id="test" value="Test #2"></p>
<p><input type=button id="test" value="Test Three"></p>
<p><input type=button id="test" value="Yet Another Test"></p>
<p><input type=button id="test" value="Yet Another Test" style="width: 9em;"></p>
</form>
</body>
</html>

Anybody have a better solution? :rolleyes:

ray326

12-29-2004, 05:54 PM

I checked to make sure it still didn't work even when the syntax was right. ;)

florida

12-29-2004, 08:27 PM

Thanks