By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,492 Members | 1,987 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,492 IT Pros & Developers. It's quick & easy.

REQ: Buttons with borders using a SPAN tag and background image

P: n/a
How can I get spans which look like buttons.

These buttons have a fixed height (24px), variable width, a thin (1px)
solid border and a background image. The back-ground image is a slice
24px high, 1px wide, repeated:

For instance a span <span class="ButtonLeft">:

..ButtonLeft
{
float:left;
min-width:100px;
line-height:24px;
text-align:center;
background-image:url(images/MenuSlice1.gif);
background-repeat:repeat-x;
cursor:pointer;
padding-left:0.5em;
padding-right:0.5em;
padding-bottom:0.15em;
padding-top:0.0em;
border-style:solid;
border-width:1px;
border-color:#FF8040;
color:#7E93C6;
font-size:9pt;
text-decoration:none;
}

does not give me a button with borders.

Apr 17 '07 #1
Share this Question
Share on Google+
8 Replies


P: n/a
On 17 Apr, 10:53, mark4asp <mark4...@gmail.comwrote:
How can I get spans which look like buttons.

These buttons have a fixed height (24px), variable width, a thin (1px)
solid border and a background image. The back-ground image is a slice
24px high, 1px wide, repeated:

For instance a span <span class="ButtonLeft">:

.ButtonLeft
{
float:left;
min-width:100px;
line-height:24px;
text-align:center;
background-image:url(images/MenuSlice1.gif);
background-repeat:repeat-x;
cursor:pointer;
padding-left:0.5em;
padding-right:0.5em;
padding-bottom:0.15em;
padding-top:0.0em;
border-style:solid;
border-width:1px;
border-color:#FF8040;
color:#7E93C6;
font-size:9pt;
text-decoration:none;

}

does not give me a button with borders.
apologies for this post - it works. (my mistake)

Apr 17 '07 #2

P: n/a
Scripsit mark4asp:
>does not give me a button with borders.

apologies for this post - it works. (my mistake)
Well, it does not work, for a useful value of "work", and yes, it was a
mistake to even try it. Faking span elements as buttons is a big mistake in
WWW authoring. There might be rare exceptions, but font-size: 9pt made it
crystal clear this wasn't one of them.

I wonder whether your newsreader has a Cancel function and whether it forced
you to quote your entire message in your apology.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Apr 17 '07 #3

P: n/a
mark4asp wrote:
font-size:9pt;
Have you tried using font: menu and then adjusting the size?

font : menu;
font-size : 90%;

Apr 17 '07 #4

P: n/a
Jukka K. Korpela escribió:
Scripsit mark4asp:
>>does not give me a button with borders.

apologies for this post - it works. (my mistake)

Well, it does not work, for a useful value of "work", and yes, it was a
mistake to even try it. Faking span elements as buttons is a big mistake
in WWW authoring. There might be rare exceptions, but font-size: 9pt
made it crystal clear this wasn't one of them.
Could you elaborate on that? I've just written a XHTML technical note
that try to highlight some text fragments as references to button
labels. I use

<span class="button">Button label</span>,
and
span.button {font-family: Helvetica, Arial, sans-serif;
font-size: 85%;
border-style: outset;
background-color: #ffd}

I get what I want in both IE (6.0) and FF (2.0). Is there a better way
to do it? Thanks.
--
Manuel Collado - http://lml.ls.fi.upm.es/~mcollado

Apr 17 '07 #5

P: n/a
Scripsit Manuel Collado:
>Well, it does not work, for a useful value of "work", and yes, it
was a mistake to even try it. Faking span elements as buttons is a
big mistake in WWW authoring. There might be rare exceptions, but
font-size: 9pt made it crystal clear this wasn't one of them.

Could you elaborate on that?
Which part thereof? Regarding the 9pt clue, I think reading this group for a
few days gives sufficiently many hints.

Demonstrating why it's a mistake is best done for each specific intended
use, but there's the general principle that form fields, and only form
fields, should look like form fields. Jakob Nielsen has written at least one
alertbox on this.
I've just written a XHTML technical note
What's "XHTML technical note"? A note _in_ XHTML or a note _about_ XHTML? As
usual, a URL etc.
that try to highlight some text fragments as references to button
labels.
Why? And why would you highlight them in a deceptive way, making them look
like buttons themselves rather than references?
I use

<span class="button">Button label</span>,
and
span.button {font-family: Helvetica, Arial, sans-serif;
font-size: 85%;
border-style: outset;
background-color: #ffd}

I get what I want in both IE (6.0) and FF (2.0). Is there a better way
to do it? Thanks.
What you want is probably wrong. It doesn't even do what you want unless CSS
is enabled and to the extent that your CSS code is not overridden by a user
style sheet.

And it does not even really look like a button except in systems that happen
to have default button rendered the way you postulate.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Apr 18 '07 #6

P: n/a
Jukka K. Korpela escribió:
Scripsit Manuel Collado:
>>... Faking span elements as buttons is a
big mistake in WWW authoring...

Could you elaborate on that?
...
Demonstrating why it's a mistake is best done for each specific intended
use, but there's the general principle that form fields, and only form
fields, should look like form fields. Jakob Nielsen has written at least
one alertbox on this.
>I've just written a XHTML technical note

What's "XHTML technical note"? A note _in_ XHTML or a note _about_
XHTML? As usual, a URL etc.
A description of a lab assignment for my students. It contains detailed
instructions about how to use part of the GUI of a configurable editor
to do specific tasks. There is an excerpt (sorry, in spanish) at:
http://lml.ls.fi.upm.es/~mcollado/pra5
>
>that try to highlight some text fragments as references to button
labels.

Why? And why would you highlight them in a deceptive way, making them
look like buttons themselves rather than references?
Is there a typographic convention for naming button labels, menu items,
etc.? Like monospace font for program code, bullets for itemized lists,
boldface for table headings, etc. If there is no common practice, could
you suggest your own?
>I get what I want in both IE (6.0) and FF (2.0). Is there a better way
to do it? Thanks.

What you want is probably wrong. It doesn't even do what you want unless
CSS is enabled and to the extent that your CSS code is not overridden by
a user style sheet.
I hope to have clarified somehow what I want. Of course, any user can
ignore typographical clues (just by converting to plain text) at the
cost of losing information.
>
And it does not even really look like a button except in systems that
happen to have default button rendered the way you postulate.
My attempt is not to mimic the button appearance, but just to use
background color and border in addition to font face, size, weight,
style, decoration, etc. as a typographical hint. In fact the fictional
yellow background has been chosen for readability. Real buttons have
the usual gray background.

Regards.
--
Manuel Collado - http://lml.ls.fi.upm.es/~mcollado

Apr 18 '07 #7

P: n/a
Scripsit Manuel Collado:
>What's "XHTML technical note"? A note _in_ XHTML or a note _about_
XHTML? As usual, a URL etc.

A description of a lab assignment for my students. It contains
detailed instructions about how to use part of the GUI of a
configurable editor to do specific tasks. There is an excerpt (sorry,
in spanish) at: http://lml.ls.fi.upm.es/~mcollado/pra5
Comprendo. So it's _in_ XHTML, which is irrelevant here - no real difference
between XHTML and HTML.

If you are discussing the use of a particular program, then there are two
natural approaches:
1) just mention the names of the buttons and, if it seems useful, put them
in quotation marks _or_ bold them or otherwise distinguish them from normal
text but keep them as text
2) use images of the buttons as they appear in the program, naturally with
the names as alt texts (or perhaps <img src="ok.gif" alt="botón OK">).
Using an intermediate approach is risky: it looks like a button, but it
isn't a button, and it doesn't even look like the _real_ button.
Is there a typographic convention for naming button labels, menu
items, etc.?
Various publishers have their own conventions, for print medium. This is my
constant source of frustration, but I can live with it. The important thing
is to be consistent within one publication.
Like monospace font for program code, bullets for
itemized lists, boldface for table headings, etc. If there is no
common practice, could you suggest your own?
If you were referring to something that works in a browser or otherwise uses
an operating system's basic presentational features, you might consider
using "system colors" and "system fonts". For example, color: ButtonText and
font: caption. In theory, they would let you refer to user interface items
so that each user sees them according to the "theme" or "skin" or "chrome"
of his system. In practice, it's a but awkward and not very reliable, since
not all programs use the system "theme" e.g. in buttons.
I hope to have clarified somehow what I want. Of course, any user can
ignore typographical clues (just by converting to plain text) at the
cost of losing information.
The crucial thing is whether information or just visual clues are lost. As a
simple test, you can test the page with CSS off or simply read it aloud.
My attempt is not to mimic the button appearance, but just to use
background color and border in addition to font face, size, weight,
style, decoration, etc. as a typographical hint.
Well it mimics button appearance though just partially.
In fact the fictional
yellow background has been chosen for readability. Real buttons have
the usual gray background.
That's part of my point above. There's also the principle that if something
looks like a button, someone will try to click on it.

Putting just a solid 1px black border around the button text, with no change
in background color, might be a reasonable compromise between general
usability considerations and the desire to make them look a bit like
buttons.

Note that you could put some space between the text and the border by using
the padding property (e.g., padding: 0 0.2em), which gives more flexibility
than the use of &nbsp; around the text.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Apr 19 '07 #8

P: n/a
Jukka K. Korpela escribió:
Scripsit Manuel Collado:
...
>My attempt is not to mimic the button appearance, but just to use
background color and border in addition to font face, size, weight,
style, decoration, etc. as a typographical hint.
...
Putting just a solid 1px black border around the button text, with no
change in background color, might be a reasonable compromise between
general usability considerations and the desire to make them look a bit
like buttons.
Thanks for your advice. In fact I feel that my current attempt os too
eye-catching.

Regards.
--
Manuel Collado - http://lml.ls.fi.upm.es/~mcollado

Apr 20 '07 #9

This discussion thread is closed

Replies have been disabled for this discussion.