Menu query

[KiwiBrian]

I have a text based and css controlled horizontal menu where on hover the
text and "button/cell" background colour change.
Fine so far, the background colour fills the button.
However if one of the menu buttons has two lines of text, while the hover
background colour does fill that menu button, the other buttons, which are
now in taller buttons, only have a strip of hover background colour which
does not extend to the top and bottom of the button.
Is there a way of dealing with this so that the hover colour fills the
button regardless of the height of the container?
Or some alternative method of achieving the same result.
I would expect that many have encountered this problem, but it is a first
for me.
Thanks for any help/ideas.
Brian Tozer

[KiwiBrian]

"KiwiBrian" <br******@ihug. co.nz> wrote in message
news:e3******** **@lust.ihug.co .nz...

I have a text based and css controlled horizontal menu where on hover the
text and "button/cell" background colour change.
Fine so far, the background colour fills the button.
However if one of the menu buttons has two lines of text, while the hover
background colour does fill that menu button, the other buttons, which are
now in taller buttons, only have a strip of hover background colour which
does not extend to the top and bottom of the button.
Is there a way of dealing with this so that the hover colour fills the
button regardless of the height of the container?
Or some alternative method of achieving the same result.
I would expect that many have encountered this problem, but it is a first
for me.
Thanks for any help/ideas.
Brian Tozer

Oops, here is my link control CSS

..link1 A {
font-family: arial;
font-size: 13px;
font-weight: bold;
background-color: #310031;
color: #F4DCA2;
text-decoration: none;
display: block;
width: 100%;
}

..link1 A:hover {
color: #000000;
background-color: #CC9933;
}

[phil-news-nospam]

On Sat, 6 May 2006 18:46:20 +1200 KiwiBrian <br******@ihug. co.nz> wrote:
|
| "KiwiBrian" <br******@ihug. co.nz> wrote in message
| news:e3******** **@lust.ihug.co .nz...
|>I have a text based and css controlled horizontal menu where on hover the
|>text and "button/cell" background colour change.
|> Fine so far, the background colour fills the button.
|> However if one of the menu buttons has two lines of text, while the hover
|> background colour does fill that menu button, the other buttons, which are
|> now in taller buttons, only have a strip of hover background colour which
|> does not extend to the top and bottom of the button.
|> Is there a way of dealing with this so that the hover colour fills the
|> button regardless of the height of the container?
|> Or some alternative method of achieving the same result.
|> I would expect that many have encountered this problem, but it is a first
|> for me.
|> Thanks for any help/ideas.
|> Brian Tozer
|
|
| Oops, here is my link control CSS
|
| .link1 A {
| font-family: arial;
| font-size: 13px;
| font-weight: bold;
| background-color: #310031;
| color: #F4DCA2;
| text-decoration: none;
| display: block;
| width: 100%;
| }
|
| .link1 A:hover {
| color: #000000;
| background-color: #CC9933;
| }

That's because the A element itself is not filling the box when the box is
forced larger because another button has 2 lines of text. Move the pointer
to the area above or below that strip that isn't being colored and you will
see that the color reverts back even though the pointer is still inside the
box you are making a button of.

You would have to apply these properties to the box itself. But since IE
does not support :hover for other than an A element (so I am told, and at
least for IE 6), it won't work right in IE unless a way can be found to do
a box using an A element. I tried that for another idea I was working on
a few days ago and it didn't work. But maybe your simpler case might.

What is the HTML element you're using to surround each button and what CSS
do you have for that?

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

[KiwiBrian]

Hi Phil.
Thanks for your help.
I solved it by adding 8 pixels of vertical padding to the pseudoclass
applied to the links with the unwrapped (one line) text entries.
73s
Brian ex ZL1ACE and ZL2BV

<ph************ **@ipal.net> wrote in message
news:e3******** *@news3.newsguy .com...

On Sat, 6 May 2006 18:46:20 +1200 KiwiBrian <br******@ihug. co.nz> wrote:
|
| "KiwiBrian" <br******@ihug. co.nz> wrote in message
| news:e3******** **@lust.ihug.co .nz...
|>I have a text based and css controlled horizontal menu where on hover
the
|>text and "button/cell" background colour change.
|> Fine so far, the background colour fills the button.
|> However if one of the menu buttons has two lines of text, while the
hover
|> background colour does fill that menu button, the other buttons, which
are
|> now in taller buttons, only have a strip of hover background colour
which
|> does not extend to the top and bottom of the button.
|> Is there a way of dealing with this so that the hover colour fills the
|> button regardless of the height of the container?
|> Or some alternative method of achieving the same result.
|> I would expect that many have encountered this problem, but it is a
first
|> for me.
|> Thanks for any help/ideas.
|> Brian Tozer
|
|
| Oops, here is my link control CSS
|
| .link1 A {
| font-family: arial;
| font-size: 13px;
| font-weight: bold;
| background-color: #310031;
| color: #F4DCA2;
| text-decoration: none;
| display: block;
| width: 100%;
| }
|
| .link1 A:hover {
| color: #000000;
| background-color: #CC9933;
| }

That's because the A element itself is not filling the box when the box is
forced larger because another button has 2 lines of text. Move the
pointer
to the area above or below that strip that isn't being colored and you
will
see that the color reverts back even though the pointer is still inside
the
box you are making a button of.

You would have to apply these properties to the box itself. But since IE
does not support :hover for other than an A element (so I am told, and at
least for IE 6), it won't work right in IE unless a way can be found to do
a box using an A element. I tried that for another idea I was working on
a few days ago and it didn't work. But maybe your simpler case might.

What is the HTML element you're using to surround each button and what CSS
do you have for that?

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