473,324 Members | 2,501 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,324 software developers and data experts.

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

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
8 4183
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
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
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
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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
by: David Roden | last post by:
Hi. I'm trying to create a stylesheet for a page that shows images instead of text links. I tried to apply the FIR method but apparently that only works for block-level elements. Used HTML: ...
6
by: AJBopp | last post by:
I'm wrestling with CSS variations between Firefox and IE. I'm trying to create rollover buttons in a menu frame. It is working perfectly in Firefox but in IE only the first button is properly...
16
by: Walker | last post by:
I have a span containing two words. Eg. <span>Avant Garde</span> Using CSS, I pad the text to the right and assign a background-image. Eg. span { padding: 0 3px 0 11px; background:...
10
by: Matt Kruse | last post by:
See: http://www.mattkruse.com/temp/offsetleft.html It appears that the offsetLeft value in IE6 (other versions not tested) incorrectly ignores the border width on a DIV when there is a width:...
12
by: Charlie King | last post by:
As I understand it, the use of FIR* to replace heading tags with images in visually enabled CSS browsers is now frowned upon on the basis that some screen readers will *nor* read back text that is...
1
by: johnjsforum | last post by:
Buddies, I have a web page to create HTML buttons dynamically as in the “formDivColorPicker” function ////////////////////////////////////////////////////////////////////////////////////...
2
by: eholz1 | last post by:
Hello CSS and StyleSheet members, I have decided to move away from Dreamweaver javascript rollover buttons, in favor of a CSS type rollover button. (hope that is ok). I plan to use PHP to...
3
by: nathanwb | last post by:
I have the following php code, at the top I am pulling a piece of data from a query and I echo the results with no problem, I am using Ajax with this page as well and further down the page when I...
0
by: zeckdude | last post by:
Hi, I am having some issues with my site. I have a main Nav with four links that load in 4 different sections. You can see the page I am working on here:...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.