More experiments: CSS "Buttons"

http://risky-biz.com/new/risky.html

I finally got DSL service recently, but I haven't forgotten the agony
of waiting for the 64th image to load before I can see ANYTHING on a
page. So I will keep to the antiquated notion of designing pages that
load quickly.

Toward that end I have always used text links. But I like the look of
buttons as much as the next guy. I'm trying a "button bar" without
images for the still-experimental version of my band's web site, using
my rudimentary knowledge of CSS.

I'd like to hear comments. Please make sure to try the "Photos" link.

[I still haven't migrated all the images from the present site, so
some of the band photos don't display]

Thanks in advance

Greg

On Sat, 10 Apr 2004 14:02:11 -0400, Brian
<usenet3 (AT) julietremblay (DOT) com.invalid> wrote:

Greg G wrote:
http://risky-biz.com/new/risky.html

I'd like to hear comments. Please make sure to try the "Photos" link.

The font-size is smaller than what I already decided is right for me. So
small, that I have trouble selecting some of the buttons.

Thanks. I thought I had taken care of that by defining the button size
in "ex" units, so they would expand with a viewer's choice of text
size. But I see that perhaps the button text is TOO much smaller than
the regular text, at least for some people.

I've made it bigger. How does it look now?

Greg

On Sat, 10 Apr 2004 19:01:09 GMT, Greg G wrote:

On Sat, 10 Apr 2004 14:02:11 -0400, Brian
usenet3 (AT) julietremblay (DOT) com.invalid> wrote:

Greg G wrote:
http://risky-biz.com/new/risky.html

I'd like to hear comments. Please make sure to try the "Photos" link.

The font-size is smaller than what I already decided is right for me. So
small, that I have trouble selecting some of the buttons.

Thanks. I thought I had taken care of that by defining the button size
in "ex" units, so they would expand with a viewer's choice of text
size.

I noticed they adjusted with my chosen font-size.
(The only reason I checked is due to Brian's
comment)

As to whether they are 'too small', I don't know,
I am comroftable with the current size, but may only
have seen them 'bigger' (first looked at it minutes
before your new post)

[ I like it, though I am not too fussed on the colors. ]

--
Andrew Thompson
http://www.PhySci.org/ Open-source software suite
http://www.PhySci.org/codes/ Web & IT Help
http://www.1point1C.org/ Science & Technology

On Sat, 10 Apr 2004 18:20:41 -0400, Brian
<usenet3 (AT) julietremblay (DOT) com.invalid> wrote:

Greg G wrote:

http://risky-biz.com/new/risky.html

On Sat, 10 Apr 2004, Brian wrote:
The font-size is smaller than what I already decided is right for
me. So small, that I have trouble selecting some of the buttons.

Greg G wrote:
I thought I had taken care of that by defining the button size in
"ex" units, so they would expand with a viewer's choice of text size.

They do expand if I change the text size. But why are you making me
change the font size for you particular page?

I've made it bigger. How does it look now?

Now, I only need to hit <ctrl +> once, instead of twice as before.

I'll stick my oar in here. I don't see any problem with small fragments
of text (e.g. buttons, figures in tables) being a little smaller than
the main body text. I think the text size on the buttons at present
(90%) is fine.

(I'd also suggest that anyone who can't read buttons with one or two
words on them at 90% might like to consider increasing their default
text size a little, because they're probably impeding their ability to
read the main text fluently.)

However the 'whatis' column is the main body text on this page, and I
would definitely set that to 100%.


One other tip: you've got
<P ALIGN=CENTER>
<A class=navbar HREF="risky.html">Home</A>
<A class=navbar HREF="schedule.html">Club Schedule</A>
<A class=navbar HREF="songs.html">Song List</A>
etc.

You don't need to set class=navbar on every <A>. You can define
<P class=navbar> and then style the links with
..navbar a { background-color : #0000CD; } etc
It keeps the HTML shorter and simpler.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

On Sun, 11 Apr 2004 10:01:41 +0200, Stephen Poley
<sbpoleySpicedHamTrap (AT) xs4all (DOT) nl> wrote:

On Sat, 10 Apr 2004 18:20:41 -0400, Brian
usenet3 (AT) julietremblay (DOT) com.invalid> wrote:

Greg G wrote:

http://risky-biz.com/new/risky.html

On Sat, 10 Apr 2004, Brian wrote:
The font-size is smaller than what I already decided is right for
me. So small, that I have trouble selecting some of the buttons.

Greg G wrote:
I thought I had taken care of that by defining the button size in
"ex" units, so they would expand with a viewer's choice of text size.

They do expand if I change the text size. But why are you making me
change the font size for you particular page?

I've made it bigger. How does it look now?

Now, I only need to hit <ctrl +> once, instead of twice as before.

I'll stick my oar in here. I don't see any problem with small fragments
of text (e.g. buttons, figures in tables) being a little smaller than
the main body text. I think the text size on the buttons at present
(90%) is fine.

I think it's OK too.

(I'd also suggest that anyone who can't read buttons with one or two
words on them at 90% might like to consider increasing their default
text size a little, because they're probably impeding their ability to
read the main text fluently.)

However the 'whatis' column is the main body text on this page, and I
would definitely set that to 100%.

This design is definitely a work in progress. I was thinking that the
"what is" section was a little small myself. It's fixed now. That's
one of the great things about CSS; Even a relative novice like me can
change things like that so easily.

One other tip: you've got
P ALIGN=CENTER
A class=navbar HREF="risky.html">Home</A
A class=navbar HREF="schedule.html">Club Schedule</A
A class=navbar HREF="songs.html">Song List</A
etc.

You don't need to set class=navbar on every <A>. You can define
P class=navbar> and then style the links with
.navbar a { background-color : #0000CD; } etc
It keeps the HTML shorter and simpler.

About a year ago, when I first decided to redo the site using CSS, I
had a similar situation. I had set up a class for the "Song List"
page, which is a two column table (song name and artist). As the band
knows about 230 songs, I had 460 instances of <TD class="songs">. I
suspected that someone had come up with a better way to accomplish
that and asked on this group. Someone explained how to fix it.

When I get around to it I'll streamline the buttons as well. Thanks.

Greg

On Mon, 12 Apr 2004 01:20:59 -0400, Brian
<usenet3 (AT) julietremblay (DOT) com.invalid> wrote:

http://risky-biz.com/new/risky.html

Stephen Poley wrote:

I don't see any problem with small fragments of text (e.g. buttons,
figures in tables) being a little smaller than the main body text. I
think the text size on the buttons at present (90%) is fine.

Perhaps. But then the author should consider the difficulty of selecting
a button when they are so small. Take a look at the number buttons on
the photo page.

http://risky-biz.com/new/jfpics.html

It may be a result of my carpal tunnel syndrome, but I find it difficult
to quickly select a number on that page.

I don't find them at all a problem myself. Though to try to avoid a
recurrence of a similar problem I use the keyboard a lot more now. Have
you tried that? (Q/A keys on Opera; not sure about other browsers.)
Opera also gives the option of displaying a list of links in the
sidebar, which can be useful (assuming the links have a more meaningful
text than 'click here').

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

Brian <usenet3 (AT) julietremblay (DOT) com.invalid> wrote

http://risky-biz.com/new/risky.html

Stephen Poley wrote:

I don't see any problem with small fragments of text (e.g. buttons,
figures in tables) being a little smaller than the main body text. I
think the text size on the buttons at present (90%) is fine.

Perhaps. But then the author should consider the difficulty of selecting
a button when they are so small. Take a look at the number buttons on
the photo page.

http://risky-biz.com/new/jfpics.html

I'm surprised you are having a problem with that. You can select any
area of the "button", not just the number label on it. On your browser
the whole button is hard to select?

It may be a result of my carpal tunnel syndrome, but I find it difficult
to quickly select a number on that page. The easiest solution is to make
the font size 100%. Some padding might be more effective still.

(I'd also suggest that anyone who can't read buttons with one or two
words on them at 90% might like to consider increasing their default
text size a little, because they're probably impeding their ability
to read the main text fluently.)

I can tell you that I have *no* trouble reading text when authors don't
make the font smaller. My own pages are, if anything, a bit too big for
me, but going down 1 pixel makes it a bit too small, and I'd rather err
in the other direction.

However the 'whatis' column is the main body text on this page, and I
would definitely set that to 100%.

Yes, I did notice that, and was commenting on small text on the page in
general, but I may not have made that clear enough.

I made the button text 90% after your initial comment, and I made the
"What Is..." text 100%. I am always interested in hearing any problems
people may have with a site, but I'm not sure I'll make those buttons
bigger yet. I think that most people, like me, don't set their
browsers so that the body text is the absolute minimum size they can
comfortably read.

Heck, I might yet scrap the button bar entirely.

Thanks for the comments.

Greg

<snip>

I've made it bigger. How does it look now?

Greg

I would say too small - in comparison with the rest of the page - also a

lack of padding makes it too cramped - try to increase the padding, and
then the text size may not be too noticable.

Ian

On Mon, 12 Apr 2004 21:00:38 -0400, Brian
<usenet3 (AT) julietremblay (DOT) com.invalid> wrote:

Greg wrote:

Brian wrote...
the author should consider the difficulty of selecting a button
when they are so small. Take a look at the number buttons on the
photo page.

http://risky-biz.com/new/jfpics.html

I'm surprised you are having a problem with that. You can select any
area of the "button", not just the number label on it. On your
browser the whole button is hard to select?

I have no idea what you mean. Is "whole button" supposed to indicate
that they are really big, when I find the opposite to be true? Since
there is no padding, and the border of the button is essentially shrink
wrapped to the number, and the links are inline (not display: block),
and they are displayed one right after the other -- because of all that,
yes, they are hard to select.

This is what confuses me. I have IE and Opera to try the site on. On
both of them the "number" buttons appear at about a half inch wide,
even with the fairly small text size that I use on my browsers. It's
specified at "6.5 ex". You say it's "shrink-wrapped", suggesting that
the buttons are only as wide as the numbers and that the numbers are
very close together.

My CSS knowledge is certainly incomplete, so maybe something I'm doing
doesn't apear the same on your system. I have added some vertical
padding, as someone suggested, but I haven't uploaded that yet. I'm
realy curious to know if something is not working the way I think it
should.

Brian <usenet3 (AT) julietremblay (DOT) com.invalid> wrote

Greg G wrote:

http://risky-biz.com/new/jfpics.html

My CSS knowledge is certainly incomplete, so maybe something I'm doing
doesn't apear the same on your system.

My system is Mozilla. And when you mentioned a width, I imagined it was
on the a element, which is inline, and guessed what the problem might
be. Well, I just had a look at your code, and I was right. Let's start
at the beginning.

During the day yesterday I guessed we were looking at different
browsers as well. I downloaded Mozilla (coincidentally) and was able
to see the problem.

There's no doc type declaration.
http://www.w3.org/TR/REC-html40/struct/global.html

On my other sites I did include a Doctype, mostly as a formality. I
wasn't aware of the actual reasons for using it. I did some reading up
yesterday and I think I get it now.

This is a sytax error.
http://validator.w3.org/check?uri=ht...ew/jfpics.html

And it causes browsers to go into "quirks mode."
http://gutfeldt.ch/matthias/articles/doctypeswitch.html

From your css:

A.navbar {
width : 15.5ex;
}

In standards mode, you cannot set a width on inline elements.
http://www.w3.org/TR/REC-CSS2/visude...#propdef-width

It's kind of a shame that this is not allowed as it made it very easy
to make text links into equal width buttons in a horizontal row. I
have always used text links for speed; on this site I was thinking I
could pretty them up a bit without resorting to gifs. Maybe there's
another way.

Opera and IE let you do this because you are in quirks mode. Mozilla,
suprisingly, does not. Mozilla also has "quirks mode," and I thought
setting widths of inline elements, contrary to the spec, was allowed.
Apparently not.

You have bigger problems then your css. I'd forget the css, and fix the
markup errors first. From your html:

P ALIGN=CENTER
A class=navbar HREF="risky.html">Home</A
A class=navbar HREF="schedule.html">Club Schedule</A
!-- snip --
br
span class=navphoto>Photo Pages</span
A class=navphoto HREF="jfpics.html">1</A
A class=navphoto HREF="jfpics2.html">2</A
A class=navphoto HREF="jfpics3.html">3</A
!-- snip --
/p

This is not a paragraph, is it? Then why mark it up as such? Use <div
if nothing is more appropriate. Most people here use list markup (<ul
li>) for lists of links. That may or may not be the right choice -- as
J. Korpela has pointed out, you can make everything a list if you go
down that route -- but <p> markup is certainly wrong.

I am admittedly fuzzy on that concept but the <P> is a holdover from
an earlier version of the site.

Also, you have no alt attribute for your images. This is required by the
dtd, and for good reason. What does a blind person get from that page? A
Lynx user? How about Googlebot?

On that score I think I can defend myself. You can absolutely access
any page I've ever done with images off entirely. This is by design. I
hate waiting for dozens of images to load before I can navigate a
site. I rarely use an image as a link, and when I do it is only in
ADDITION to a text link to the same page.

On my other sites, where the photos actually convey information, I
include alt text and full blown captions where appropriate. On the
site in question the only images are the logo and many pages of photos
of the band.

A blind person can find out where the band is playing, what songs we
play and how to hire us. He can also read bios of the musicians, add
to our guestbook and laugh at the joke page. He can even sign up for
the mailing list. In short, he can access every bit of information on
the site, except that he won't be able to see the pictures of the
handsome musicians and vocalists

Lynx users can do the same. I suppose that Lynx users (and people who
don't know us very well) could benefit from alt text that might say
something like "Ralph, Chris and Ed singing", and I may eventually add
that. But it is a time consuming chore and I'm doing this site in my
few moments of spare time. As all the real information on the site is
text, I would imagine that 'bots can index it properly.

And what's with the align attribute? If you're going css, then use css
to text-align: center the navigation. You can simplify things, too, but
I don't want to push too much on you at once. Fix the problems, then
work on more graceful code.

Again, some of the markup is old. Revamping this site is something I
can only do in piecemeal fashion. I'm sure I'll get it cleaned up
eventually, maybe even before I put it up in public

Greg