I am working on a menu bar for a site, and am using buttons in the bar
(because the customer wants to use accessKeys for each selection,
apparently it is too much work to click on them with a mouse, but I
digress) It seems that the longer the text is in a button, the more
padding there is around that text in the button, thus making the
button itself much to wide, and wasting too much space on the page. I
have tried width:auto in the style sheet, and it makes no difference.
If I use a small width, the text gets cut off. Any ideas how to
shrink the buttons down to be only the width of the text contained in
them?
Thanks,
Skip Hollowell
Page Code:
<table class="menu" align="center" width="100%" cellpadding="0"
border="0">
<tr><td align=center class=menu_bold>
<button class="active"
onClick="self.location.href='/AccountInfo/getacct.jsp?TargetPage=/info.jsp'"
title="Account information [Alt+I]"
onMouseOut='this.className="active";'
onMouseOver='this.className="active_hover";'
accesskey="I"><U>I</U>nfo</BUTTON>
</td>
<td align=center class=menu_bold>
<BUTTON class="active"
onClick="self.location.href='/AccountInfo/getacct.jsp?TargetPage=/extend.jsp'"
title="Extend call [Alt+P]" onMouseOut='this.className="active";'
onMouseOver='this.className="active_hover";'
accesskey="P"><U>P</U>lace Call</BUTTON>
</td><td align=center class=menu_bold>
<BUTTON class="current"
onClick="self.location.href='/AccountInfo/getacct.jsp?TargetPage=/rates.jsp'"
title="Provide rate quotes [Alt+Q]"
onMouseOut='this.className="current";'
onMouseOver='this.className="current_hover";' accesskey="Q">Rate
<U>Q</U>uote</BUTTON>
</td><td align=center class=menu_bold>
<BUTTON class="active"
onClick="self.location.href='/AccountInfo/getacct.jsp?TargetPage=/credit.jsp'"
title="Review and/or issue credits [Alt+C"
onMouseOut='this.className="active";'
onMouseOver='this.className="active_hover";'
accessKey="C"><U>C</U>redit</BUTTON>
</td><td align=center class=menu_bold>
<BUTTON class="active"
onClick="self.location.href='/AccountInfo/getacct.jsp?TargetPage=/history.jsp'"
title="Usage history details [Alt+H]"
onMouseOut='this.className="active";'
onMouseOver='this.className="active_hover";'
accessKey="H"><U>H</U>istory</BUTTON>
</td><td align=center class=menu_bold>
<BUTTON class="active"
onClick="self.location.href='/AccountInfo/getacct.jsp?TargetPage=/recharge.jsp'"
title="Recharge History [Alt+R]" onMouseOut='this.className="active";'
onMouseOver='this.className="active_hover";'
accessKey="R"><U>R</U>echarge</BUTTON>
</td><td align=center class=menu_bold>
<BUTTON class="active"
onClick="self.location.href='/AccountInfo/getacct.jsp?TargetPage=/addnotes.jsp'"
title="Add Notes [Alt+N]" onMouseOut='this.className="active";'
onMouseOver='this.className="active_hover";'
accessKey="N"><U>N</U>otes</BUTTON>
</td><td align=center class=menu_bold>
<BUTTON class="active"
onClick="self.location.href='/AccountInfo/getacct.jsp?TargetPage=/baltrans.jsp'"
title="Transfer Account Balance [Alt+B]"
onMouseOut='this.className="active";'
onMouseOver='this.className="active_hover";'
accessKey="B"><U>B</U>al.Trans.</BUTTON>
</td><td align=center class=menu_bold>
<BUTTON class="active"
onClick="self.location.href='/AccountInfo/getacct.jsp?TargetPage=/sams.jsp'"
title="Sams / Walmart [Alt+W]" onMouseOut='this.className="active";'
onMouseOver='this.className="active_hover";' accessKey="W">Sams /
<U>W</U>almart</BUTTON>
</td><td align=center class=menu_bold>
<BUTTON class="inactive" onClick="" title="Demographics [Alt+W]"
onMouseOut='this.className="inactive";'
onMouseOver='this.className="inactive";'>Demograph ics</BUTTON>
</td>
</tr>
</table>
Style Sheet:
<style type="text/css">
<!--
..blue
{
background: #AACCFF;
}
..centerNotice
{
background: #FF0000;
color: yellow;
font-size: 9pt;
font-family: verdana, arial, "sans-serif", helvetica;
}
..centerReadOnly
{
background: #E7E7E7;
text-align: center;
}
..darkrow
{
background: #C8C8C8;
font-size: 7.5pt;
}
..lightrow
{
background: #E5EAEB;
font-size: 7.5pt;
}
..menu
{
background: #0000FF;
color: white;
font-size: 9.5pt;
}
..menu_bold
{
background: #0000FF;
color: white;
font-size: 10pt;
font-weight: bolder;
}
..notice
{
background: #FF0000;
color: yellow;
font-size: 9pt;
font-family: verdana, arial, "sans-serif", helvetica;
}
..ro
{
background: #E7E7E7;
}
..selmenu
{
background: #FDF5E0;
color: black;
font-size: 9.5pt;
}
..medrow
{
background: #D8EAEB;
font-size: 7.5pt;
}
..urgent
{
background: #FF00C8;
}
..white
{
background: #E0E0E0;
}
button.active
{
font-family: "sans-serif", arial, helvetica;
background: #0000FF;
color: white;
font-size: 8pt;
font-weight: bolder;
padding: 0px;
border: inset 0px #0000FF;
}
button.active_hover
{
font-family: "sans-serif", arial, helvetica;
background: #FFFFFF;
color: #000000;
font-size: 8pt;
font-weight: bolder;
padding: 0px;
border: inset 0px #0000FF;
}
button.current
{
font-family: "sans-serif", arial, helvetica;
background: #FFFFFF;
color: #0000FF;
font-size: 8pt;
font-weight: bolder;
padding: 0px;
border: inset 0px #0000FF;
}
button.current_hover
{
font-family: "sans-serif", arial, helvetica;
background: #FFFFFF;
color: #0000FF;
font-size: 8pt;
font-weight: bolder;
padding: 0px;
border: inset 0px #0000FF;
}
button.inactive
{
font-family: "sans-serif", arial, helvetica;
background: #0000FF;
color: #CCCCCC;
font-size: 8pt;
font-weight: normal;
padding: 0px;
border: inset 0px #0000FF;
}
a
{
color: white;
font-family: "sans-serif", arial, helvetica;
font-size: 9.5pt;
text-decoration: underline;
}
body
{
background: #FDF5E0;
color: black;
font-family: "sans-serif", arial, helvetica, arial;
font-size: 8.5pt;
leftmargin: 0;
scrollbar-3dlight-color: lightgrey;
scrollbar-arrow-color: white;
scrollbar-base-color: #fdf5e0;
scrollbar-darkshade-color: darkgrey;
scrollbar-face-color: black;
scrollbar-highlight-color: lightgrey;
scrollbar-shadow-color: darkgrey;
scrollbar-track-color: #fdf5e0;
topmargin: 0;
}
input
{
font-family: "sans-serif", arial, helvetica;
font-size: 8pt;
}
textarea
{
font-family: "sans-serif", arial, helvetica;
font-size: 8pt;
}
select
{
font-family: "sans-serif", arial, helvetica;
font-size: 8pt;
}
table
{
background: #FDF5E0;
font-family: "sans-serif", arial, helvetica;
font-size: 8pt;
}
-->
</style>
