468,104 Members | 1,509 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,104 developers. It's quick & easy.

BUTTON tag has extra padding, not sure why.

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>
Jul 20 '05 #1
6 7218
"Skip Hollowell" <sk************@yahoo.com> wrote in message
news:b7**************************@posting.google.c om...
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)


UI developers should have their mice
confiscated. It would aid accessibility.

--
Andrew Thompson
* http://www.PhySci.org/ PhySci software suite
* http://www.1point1C.org/ 1.1C - Superluminal!
* http://www.AThompson.info/andrew/ personal site
Jul 20 '05 #2
"Andrew Thompson" <an******@bigNOSPAMpond.com> wrote in message
news:w3******************@news-server.bigpond.net.au...
"Skip Hollowell" <sk************@yahoo.com> wrote in message
news:b7**************************@posting.google.c om...
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)


UI developers should have their mice
confiscated. It would aid accessibility.


ahemm.
_G_UI developers should have....
Jul 20 '05 #3
> ahemm.
_G_UI developers should have....


If ever you needed proof that GUI developers should have their mice
confiscated, this is it:
http://www.slcentral.com/leadtek-win...luxe/page4.php

In particular, this abomination:
http://www.slcentral.com/leadtek-win...ntrolpanel.jpg

Leadtek's own page describes it as a "visually delightful new interface":
http://www.leadtek.com.tw/multimedia...2000xp_1.shtml

Let me tell you that *delight* isn't what comes to mind when I see this
interface... The need for a *bucket* is what I'm thinking of!
Jul 20 '05 #4
"Frostillicus" <fr**********@iinetnilspamos.net.au> wrote in
news:3f**********************@freenews.iinet.net.a u:
If ever you needed proof that GUI developers should have their mice
confiscated, this is it:
http://www.slcentral.com/leadtek-win...luxe/page4.php

In particular, this abomination:
http://www.slcentral.com/leadtek-win...e/controlpanel
.jpg

Leadtek's own page describes it as a "visually delightful new
interface":
http://www.leadtek.com.tw/multimedia...2000xp_1.shtml

Let me tell you that *delight* isn't what comes to mind when I see
this interface... The need for a *bucket* is what I'm thinking of!


My speculation regarding the popularity of this sort of user interface is
that it appeals to adults who, though they won't admit it in public, are
jealous that they never had the cool toys that today's kids have.
Jul 20 '05 #5

"Frostillicus" <fr**********@iinetnilspamos.net.au> wrote in message
news:3f**********************@freenews.iinet.net.a u...
Leadtek's own page describes it as a "visually delightful new interface":
http://www.leadtek.com.tw/multimedia...2000xp_1.shtml

And how annoying is the navigation bar on that page? Ewwww... I had to
reload the page several times, it was like driving by a wreck.
Jul 20 '05 #6
Even though this ha already gotten off topic, I must say two things.

1. I am not a GUI developer. Never have been, never will be. I just build
what the 'artists' come up with. But thanks for trying.
2. This is an internal application that has no access to the outside world,
so I am not even concerned about accessibility issues for users with
special needs, in this case, as there are none.

I have done my fair share of publicly accessible for work for business,
non-profit, and governement site and fully understand the need for
accessibility for those users who do not or cannot access a system via
traditional means.

So, about my buttons...any ideas?
"Andrew Thompson" <an******@bigNOSPAMpond.com> wrote in message
news:w3******************@news-server.bigpond.net.au...
"Skip Hollowell" <sk************@yahoo.com> wrote in message
news:b7**************************@posting.google.c om...
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)


UI developers should have their mice
confiscated. It would aid accessibility.

--
Andrew Thompson
* http://www.PhySci.org/ PhySci software suite
* http://www.1point1C.org/ 1.1C - Superluminal!
* http://www.AThompson.info/andrew/ personal site

Jul 20 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

10 posts views Thread by Tank | last post: by
1 post views Thread by MattB | last post: by
22 posts views Thread by moocow | last post: by
3 posts views Thread by David | last post: by
1 post views Thread by Solo | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.