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.Have you tried setting the padding?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? I checked to make sure it still didn't work even when the syntax was right. Thanks
The button has too much left and right space of the word and I would like to cut it down.Have you tried setting the padding?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? I checked to make sure it still didn't work even when the syntax was right. Thanks