Buttons with links and images

[Jim S]

ul.buttonbar li {
height: 3em; <-- drop this
}
ul.buttonbar a {
padding: .5em 0; <-- add this, or however much space suits you
}

As with Chris's solution it makes the 'one line' button top-heavy.

 

[dorayme]

However I was pleased to find a way to clean up a minor problem that I
hadn't allowed for when I casually replaced ems with pxs. I still don't
understand the difference, but Chris gave me a solution which worked.

<http://netweaver.com.au/alt/textBox.html>

illustrates the difference. In the one case the box is specified in
pixels and does not grow (you would have to change your monitor
resolution to make it appear a different inch measurement). The text,
which can easily grow at the press of a button or two or by a user
setting, will spill out.

When the box itself is specified in em units, it grows as the user
changes text size. An em is a unit that you can think of as the height
of the type, from top of ascender to bottom of descender. Odd as it
seems, you can specify visual objects like element boxes and even
pictures in em units and they then get tied to whatever the user's font
size settings are. Very useful for flexible design.

You have to guess a bit when choosing em units for boxes, set the width
of your boxes to make sure that at least the widest unwrappable word
will fit (it gets more complex where pictures are concerned).

In the above URL, take a look at how it operates without heights (as
others have said, by far the best way to go usually)

 

[Jim S]

<http://netweaver.com.au/alt/textBox.html>

illustrates the difference. In the one case the box is specified in
pixels and does not grow (you would have to change your monitor
resolution to make it appear a different inch measurement). The text,
which can easily grow at the press of a button or two or by a user
setting, will spill out.

When the box itself is specified in em units, it grows as the user
changes text size. An em is a unit that you can think of as the height
of the type, from top of ascender to bottom of descender. Odd as it
seems, you can specify visual objects like element boxes and even
pictures in em units and they then get tied to whatever the user's font
size settings are. Very useful for flexible design.

You have to guess a bit when choosing em units for boxes, set the width
of your boxes to make sure that at least the widest unwrappable word
will fit (it gets more complex where pictures are concerned).

In the above URL, take a look at how it operates without heights (as
others have said, by far the best way to go usually)

I'm getting there )

 

[Jonathan N. Little]

As with Chris's solution it makes the 'one line' button top-heavy.

Then try:

ul.buttonbar a { padding: .25em 0 .5em 0; }

or

ul.buttonbar a { padding: 0 0 .5em 0; }

 

[Bergamot]

As with Chris's solution it makes the 'one line' button top-heavy.

That's because you've got a large line-height set.

font: .8em/1.4 "Century Gothic";

Drop the 1.4 and it will stop being unbalanced.

 

[Jim S]

That's because you've got a large line-height set.

font: .8em/1.4 "Century Gothic";

Drop the 1.4 and it will stop being unbalanced.

Thanks. That helped.

 

[Jim S]

Bascially, don't specify height or width unless it is really
necessary; usually, they are not.

Instead of "height: 3em;" use:

padding-top: .5em;
padding-right: .33em;
padding-bottom: .6em;
padding-left: .33em;

All of which can be abbreviated as:

padding: .5em .33em .6em .33em;

Thanks Chris.
I modified slightly, but I think I have both sites where I want them now.
Until I start fiddling again - I'm still not happy with the 'look' of the
main home page, but the ringing pages are better.