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

Author

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

mark4asp

2007-04-17, 6:17 am

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 :

..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.

mark4asp

2007-04-17, 6:17 am

On 17 Apr, 10:53, mark4asp <mark4...@XXXXXXXXXX> wrote:
> 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 :
>
> .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)

Jukka K. Korpela

2007-04-17, 6:28 pm

Scripsit mark4asp:

>
> 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/

zzpat

2007-04-17, 6:28 pm

mark4asp wrote:

> font-size:9pt;

Have you tried using font: menu and then adjusting the size?

font : menu;
font-size : 90%;

Manuel Collado

2007-04-17, 10:17 pm

Jukka K. Korpela escribió:
> Scripsit mark4asp:
>
>
> 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

Button label,
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

Jukka K. Korpela

2007-04-18, 6:16 am

Scripsit Manuel Collado:

>
> 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
>
> Button label,
> 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/

Manuel Collado

2007-04-18, 6:16 pm

Jukka K. Korpela escribió:
> Scripsit Manuel Collado:
>
> ...
> 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.
>
>
> 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
>
>
> 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?

>
> 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

Jukka K. Korpela

2007-04-19, 6:20 pm

Scripsit Manuel Collado:

>
> 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 around the text.

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

Manuel Collado

2007-04-20, 6:18 am

Jukka K. Korpela escribió:
> Scripsit Manuel Collado:
> ...
> ...
> 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