another attempt at HTML/CSS buttons

[phil-news-nospam]

Here is another attempt at making some HTML/CSS (e.g. not image) buttons.
Because I've managed to avoid the things that tend to be problems, it has
mostly worked. I also went back to doing tables in HTML just for IE. So
I'd like to know if this works in IE.

It would be nice if I could get the letters to move up further so they are
positioned where the top edge of the letters is lined up with the top edge
of the numbers.

Be sure to click on the buttons.

http://phil.ipal.org/usenet/ciwas/20...e-buttons.html

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------

[Jim Moe]

ph**************@ipal.net wrote:

Here is another attempt at making some HTML/CSS (e.g. not image) buttons.
Because I've managed to avoid the things that tend to be problems, it has
mostly worked. I also went back to doing tables in HTML just for IE. So
I'd like to know if this works in IE.
No, of course not. IE only applies :hover to the <a> element.
IE ignores "border-spacing" so a "cellspacing" is required on the table.
It would be nice if I could get the letters to move up further so they are
positioned where the top edge of the letters is lined up with the top edge
of the numbers.

CSS:
..button_back,
..button_front,
..button_label { width: 4em; }
..button_label {
height: 100%;
background-color: #777799;
color: #f7f7f7;
text-align: right;
white-space: nowrap;
}
..button_label span { font-size: 200%; }
..button_label sup { font-size: 80%; vertical-align: 100%; }

HTML: (Delete the <font> tags)
<div class="button_label">^ABC <span>2</span></div>

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[phil-news-nospam]

On Wed, 10 May 2006 12:17:28 -0700 Jim Moe <jm***************@sohnen-moe.com> wrote:

| ph**************@ipal.net wrote:
|> Here is another attempt at making some HTML/CSS (e.g. not image) buttons.
|> Because I've managed to avoid the things that tend to be problems, it has
|> mostly worked. I also went back to doing tables in HTML just for IE. So
|> I'd like to know if this works in IE.
|>
| No, of course not. IE only applies :hover to the <a> element.
| IE ignores "border-spacing" so a "cellspacing" is required on the table.

So basically I really have to decide between going with web standards, or
making things work reasonably well on what is still the most common browser.
At least I can use more CSS since the basics of CSS work. But I still have
to use a lot of HTML that I should otherwise not need to use.
|> It would be nice if I could get the letters to move up further so they are
|> positioned where the top edge of the letters is lined up with the top edge
|> of the numbers.
|>
| CSS:
| .button_back,
| .button_front,
| .button_label { width: 4em; }
| .button_label {
| height: 100%;
| background-color: #777799;
| color: #f7f7f7;
| text-align: right;
| white-space: nowrap;
| }
| .button_label span { font-size: 200%; }
| .button_label sup { font-size: 80%; vertical-align: 100%; }
|
| HTML: (Delete the <font> tags)
| <div class="button_label">^ABC <span>2</span></div>

The letters went higher than the numbers. Some other combination (floats)
ended up with the same thing. The top of the box for each letter is now at
the top of the container box. But since there is more space above the
numbers because they are larger, they end up being lower.

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------

[Jim Moe]

ph**************@ipal.net wrote:

|> I also went back to doing tables in HTML just for IE. So
|> I'd like to know if this works in IE.
|>
| No, of course not. IE only applies :hover to the <a> element.
| IE ignores "border-spacing" so a "cellspacing" is required on the table.

So basically I really have to decide between going with web standards, or
making things work reasonably well on what is still the most common browser.
At least I can use more CSS since the basics of CSS work. But I still have
to use a lot of HTML that I should otherwise not need to use.
Not so much, really. Stick mostly to CSS v1, you'll do okay. In 3 - 5
years, when IE6 becomes irrelevant, you can start using CSS2 extensively.
By then CSS3 will be a standard and we'll only have to wait another 7
years for MS to catch up.
|> It would be nice if I could get the letters to move up further so they are
|> positioned where the top edge of the letters is lined up with the top edge
|> of the numbers.
|> [Code deleted]
The letters went higher than the numbers. Some other combination (floats)
ended up with the same thing. The top of the box for each letter is now at
the top of the container box. But since there is more space above the
numbers because they are larger, they end up being lower.

I cannot tell if you tried the code I listed. What would floating
achieve for vertical position?
It depends on the font. With one font the letters were below the
numbers. Other fonts the letters were above. In one font where there are
lowercase numbers, the letters were both above and below.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[phil-news-nospam]

On Thu, 11 May 2006 00:44:15 -0700 Jim Moe <jm***************@sohnen-moe.com> wrote:
| ph**************@ipal.net wrote:
|> |> I also went back to doing tables in HTML just for IE. So
|> |> I'd like to know if this works in IE.
|> |>
|> | No, of course not. IE only applies :hover to the <a> element.
|> | IE ignores "border-spacing" so a "cellspacing" is required on the table.
|>
|> So basically I really have to decide between going with web standards, or
|> making things work reasonably well on what is still the most common browser.
|> At least I can use more CSS since the basics of CSS work. But I still have
|> to use a lot of HTML that I should otherwise not need to use.
|>
| Not so much, really. Stick mostly to CSS v1, you'll do okay. In 3 - 5
| years, when IE6 becomes irrelevant, you can start using CSS2 extensively.
| By then CSS3 will be a standard and we'll only have to wait another 7
| years for MS to catch up.
|>
|> |> It would be nice if I could get the letters to move up further so they are
|> |> positioned where the top edge of the letters is lined up with the top edge
|> |> of the numbers.
|> |>
| [Code deleted]
|>
|> The letters went higher than the numbers. Some other combination (floats)
|> ended up with the same thing. The top of the box for each letter is now at
|> the top of the container box. But since there is more space above the
|> numbers because they are larger, they end up being lower.
|>
| I cannot tell if you tried the code I listed. What would floating
| achieve for vertical position?

I tried float in my initial trials with that. I tried you code with the
CSS in effect for all and the HTML for one button and it had the same
effect.

| It depends on the font. With one font the letters were below the
| numbers. Other fonts the letters were above. In one font where there are
| lowercase numbers, the letters were both above and below.

The fonts could be an issue. There's a box around each glyph, offset from
the glyph itself, which is more tall than wide. I read about a way to make
all the baselines be aligned. Need something like that for the topline, as
well as in other cases a middle line.

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------

[Tony]

ph**************@ipal.net wrote:

On Wed, 10 May 2006 12:17:28 -0700 Jim Moe <jm***************@sohnen-moe.com> wrote:

| ph**************@ipal.net wrote:
|> Here is another attempt at making some HTML/CSS (e.g. not image) buttons.
|> Because I've managed to avoid the things that tend to be problems, it has
|> mostly worked. I also went back to doing tables in HTML just for IE. So
|> I'd like to know if this works in IE.
|>
| No, of course not. IE only applies :hover to the <a> element.
| IE ignores "border-spacing" so a "cellspacing" is required on the table.

So basically I really have to decide between going with web standards, or
making things work reasonably well on what is still the most common browser.

"cellspacing" is standards compliant for HTML 4.01 strict:
http://www.w3.org/TR/html4/struct/tables.html#h-11.2.1
http://www.w3.org/TR/html4/struct/ta...ef-cellspacing

The :hover bit is another matter - and IE blows it pretty big there.

[phil-news-nospam]

On Thu, 11 May 2006 10:04:22 -0700 Tony <to****@dslextreme.whatisthis.com> wrote:
| ph**************@ipal.net wrote:
|> On Wed, 10 May 2006 12:17:28 -0700 Jim Moe <jm***************@sohnen-moe.com> wrote:
|>
|> | ph**************@ipal.net wrote:
|> |> Here is another attempt at making some HTML/CSS (e.g. not image) buttons.
|> |> Because I've managed to avoid the things that tend to be problems, it has
|> |> mostly worked. I also went back to doing tables in HTML just for IE. So
|> |> I'd like to know if this works in IE.
|> |>
|> | No, of course not. IE only applies :hover to the <a> element.
|> | IE ignores "border-spacing" so a "cellspacing" is required on the table.
|>
|> So basically I really have to decide between going with web standards, or
|> making things work reasonably well on what is still the most common browser.
|
| "cellspacing" is standards compliant for HTML 4.01 strict:
| http://www.w3.org/TR/html4/struct/tables.html#h-11.2.1
| http://www.w3.org/TR/html4/struct/ta...ef-cellspacing
|
| The :hover bit is another matter - and IE blows it pretty big there.

Supposedly :hover works with <A> elements. Maybe we can play with <A>
elements with classes that select for :hover and get the effect> I'm not
doing the playing because I don't have IE handy right now.

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------