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> 6 7534
"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
"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....
"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.
"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.
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
This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Javier |
last post by:
Hello,
I'm very new in this forum and as I have the following problem,
the website is in http://new.vanara.com
----------------------------------------------------------------------------...
|
by: Tank |
last post by:
First off let me say that I am by no means a skilled programmer so i
probably have made a dozen mistakes in my attempt at coding my
problem. I will tell you the problem so that you have an idea of...
|
by: MattB |
last post by:
Hello please help,
I have a table cell with a div in it. The div has a width of 300px.
but when it is rendered it puts extra space into the table cell.
Here's the style
<style>...
|
by: MattB |
last post by:
Hello please help,
I have a table cell with a div in it. The div has a width of 300px.
but when it is rendered it puts extra space into the table cell.
Here's the style
<style>...
|
by: moocow |
last post by:
Hi.
I am using a background image in a form button. The problem I am
having is that there is a 1 pixel margin inside the button on all
sides.
I would like my background image to fill the...
|
by: David |
last post by:
Hi,
I have 3 buttons on a asp.net page. They are exactly the same except
for the name. Two of the buttons works but the third one does not
respond to the clicking. Here is the code:
<tr>
<td...
|
by: Jake Barnes |
last post by:
Please check out this page:
http://www.bluewallllc.com/Laura/cms/index.php?pageId=2217
It validates, and it is rendering about right in FireFox. However, in
IE it has a bunch of extra padding...
|
by: natedemontigny |
last post by:
Ok guys, I'm still new at all this but I recently did a site and was able to amke the contact button stay in place. I copied the code and used it in a new site and now it moves around when I resize...
|
by: ahilar12 |
last post by:
Hi all,
I am new to php,my question is that in this following code i am retrieving many rows from the database which is working good.i want to delete a particular row(s) which is checked(checkbox)...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: aa123db |
last post by:
Variable and constants
Use var or let for variables and const fror constants.
Var foo ='bar';
Let foo ='bar';const baz ='bar';
Functions
function $name$ ($parameters$) {
}
...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
| | |