CSS Rollovers, Specified Width?

[Tyrone Slothrop]

OK, I give up!

I am trying to convert a JavaScript rollover button script to CSS. It
is composed of background colors and font colors with the current page
displaying the "over" state. I understand the basics and have
accomplished a navigation bar that looks good and is functional.

However, my client is very fussy about layout and requires that the
nav bar be a specific width, with the buttons spreading across that
width evenly, but each button not of an equal width.

For example:

| Home | Contact | Faq's | Contact Us | Sign Up |

With tables and JS, I can specify a width for each button to fill that
width. However, I cannot see a way to do this in CSS. Padding will
expand the width of each button but not exactly the width I need and
the width is different between displays in IE and Firefox (Firefox is
wider). I can add the styles to the table and the cell lights up, but
is clickable only over the text (of course!).

Any assistance would be most appreciated!

[Richard]

On Fri, 04 Feb 2005 16:26:21 -0800 Tyrone Slothrop wrote:

OK, I give up! I am trying to convert a JavaScript rollover button script to CSS. It
is composed of background colors and font colors with the current page
displaying the "over" state. I understand the basics and have
accomplished a navigation bar that looks good and is functional. However, my client is very fussy about layout and requires that the
nav bar be a specific width, with the buttons spreading across that
width evenly, but each button not of an equal width. For example:
|| Home | Contact | Faq's | Contact Us | Sign Up |
With tables and JS, I can specify a width for each button to fill that
width. However, I cannot see a way to do this in CSS. Padding will
expand the width of each button but not exactly the width I need and
the width is different between displays in IE and Firefox (Firefox is
wider). I can add the styles to the table and the cell lights up, but
is clickable only over the text (of course!). Any assistance would be most appreciated!

have you tried <div onclick="dothis">??
If you're using <a href="#" onclick="dothis">text</a> then yeah, only the
text is clickable.

[Barbara de Zoete]

On Fri, 04 Feb 2005 16:26:21 -0800, Tyrone Slothrop <[e-mail]> wrote:

OK, I give up!

Unfortunately, though you describe _the effect_ you wish to accomplish, you do
not explain how you tried this. Maybe a URL would be helpful.
| Home | Contact | Faq's | Contact Us | Sign Up |

What is the difference between [Contact] and [Contact Us] may I ask?

Anyway, Markup:

<div id="nav">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="faqs.html">Faq's</a></li>
<li><a href="Contact-us.html">Contact Us</a></li>
<li><a href="sign-up.html">Sign Up</a></li>
</ul>
</div>

Styles:

div, ul, li {
padding:0;margin:0;border:0; }

div {
width:35em; /*menu items times width set for them*/
margin:0 auto; /*if wanted centerd*/ }

ul {
text-align:center; }

li {
float:left;
width:7em; /*what ever you need them to be*/ }

a, a:link, a:visited {
display:block;
width:100%;
/*other styles, like colors, borders and backgrounds*/
color:yellow;
background:black;
border:outset .2em grey; }

a:hover, a:focus, a:active {
display:block;
width:100%;
/*other styles specific for menu item that has focus et cetera,
like colors, borders and backgrounds*/
color:black;
background:yellow;
border:outset .2em orange; }

Not tested, but might work.

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

[Barbara de Zoete]

On Sat, 05 Feb 2005 10:55:20 +0100, Barbara de Zoete <b_********@hotmail.com>
wrote:

On Fri, 04 Feb 2005 16:26:21 -0800, Tyrone Slothrop <[e-mail]> wrote:

| Home | Contact | Faq's | Contact Us | Sign Up |

Meanwhile I've put up a live example at
<http://home.wanadoo.nl/b.de.zoete/_test/voorbeeld_horizontaal-menu.html>. Could
be of use to you.
--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

[Tyrone Slothrop]

On Fri, 4 Feb 2005 23:09:01 -0600, "Richard" <An*******@127.001>
wrote:

On Fri, 04 Feb 2005 16:26:21 -0800 Tyrone Slothrop wrote:

OK, I give up!

I am trying to convert a JavaScript rollover button script to CSS. It
is composed of background colors and font colors with the current page
displaying the "over" state. I understand the basics and have
accomplished a navigation bar that looks good and is functional.

However, my client is very fussy about layout and requires that the
nav bar be a specific width, with the buttons spreading across that
width evenly, but each button not of an equal width.

For example:

|| Home | Contact | Faq's | Contact Us | Sign Up |

With tables and JS, I can specify a width for each button to fill that
width. However, I cannot see a way to do this in CSS. Padding will
expand the width of each button but not exactly the width I need and
the width is different between displays in IE and Firefox (Firefox is
wider). I can add the styles to the table and the cell lights up, but
is clickable only over the text (of course!).

Any assistance would be most appreciated!

have you tried <div onclick="dothis">??
If you're using <a href="#" onclick="dothis">text</a> then yeah, only the
text is clickable.

I am trying to avoid JS here. The trick with making the entire cell
clickable:

<td align="center" width="100" height="16" onclick="window.location
('page.html');" onMouseover="this.className='nav1';"
onMouseout="thisClassname='nav0';" style="cursor:pointer"
class="nav0">Page</td>

But you can see how clunky this is. To top it off, I have some PHP
code in there that does evaluation of the current page which
determines the lit state of the class="". It goes like this:
class="<? if ($thispage == 'page') { ?>nav1<? } else { ?>nav0<? } ?>"

I am going to post the current code under Barbara's response.

[Tyrone Slothrop]

>On Sat, 05 Feb 2005 10:55:20 +0100, Barbara de Zoete <b_********@hotmail.com>

wrote:

On Fri, 04 Feb 2005 16:26:21 -0800, Tyrone Slothrop <[e-mail]> wrote:

| Home | Contact | Faq's | Contact Us | Sign Up |

Meanwhile I've put up a live example at
<http://home.wanadoo.nl/b.de.zoete/_test/voorbeeld_horizontaal-menu.html>. Could
be of use to you.

Thank you for your effort - I really sppreciate it. However, it does
not address the width issue or, perhaps, I am blind to something very
basic here. (Wouldn't be the first time. ;-) )

This code works. However, the entire cell is not clickable in IE, but
works 100% in Firefox.

From CSS file (not optimized yet, so a bit sloppy):
..mo {
background-color: #566166;
border-left: 1px #FFFFFF solid;
color: #FFFFFF;
display: block;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
font-weight: bold;
line-height: 16px;
text-align: center;
text-decoration: none;
}

..mo a:link, .mo a:visited {
border-left: 1px #FFFFFF solid;
color: #FFFFFF;
display: block;
font-weight: bold;
line-height 16px; font-size: 11px;
text-decoration: none;
}

..mo a:hover {
color: #566166;
display: block;
line-height 16px; background-color: #FFFFFF;
}

..mo0, .mo0 a:hover, .mo0 a:link, .mo0 a:visited {
color: #566166;
font-size: 11px;
font-weight: bold;
line-height 16px; background-color: #FFFFFF;
text-align: center;
text-decoration: none;
}

Here is the navigation bar:

<table cellpadding="0" cellspacing="0" width="700" height="16"
border="0" class="mo">
<tr>
<td<?php if ($thispage == 'idx') { ?> class="mo0"<?php } ?>
onclick="ex=0;" width="71" height="16"><a
href="idx.shtml">Home</a></td>
<td<?php if ($thispage == 'application') { ?> class="mo0"<?php }
?> onclick="ex=0;" width="101" height="16"><a
href="application.shtml">Apply Now</a></td>
<td<?php if ($thispage == 'testimonials') { ?> class="mo0"<?php }
?> onclick="ex=0;" width="115" height="16"><a
href="testimonials.shtml">Testimonials</a></td>
<td<?php if ($thispage == 'q_and_a') { ?> class="mo0"<?php } ?>
onclick="ex=0;" width="67" height="16"><a
href="q_and_a.shtml">Q&A</a></td>
<td<?php if ($thispage == 'compare') { ?> class="mo0"<?php } ?>
onclick="ex=0;" width="143" height="16"><a href="compare.shtml">Price
Comparison</a></td>
<td<?php if ($thispage == 'affiliates') { ?> class="mo0"<?php }
?> onclick="ex=0;" width="95" height="16"><a
href="affiliates.shtml">Affiliates</a></td>
<td<?php if ($thispage == 'contact') { ?> class="mo0"<?php } ?>
onclick="ex=0;" width="106" height="16"><a
href="contact.shtml">Contact Us</a></td>
<td width="1" height="16" bgcolor="#ffffff" style="font-size:
1px;">&nbsp;</td>
</tr>
</table>

Excuse the mess - you can ignore the PHP code which determines the
"lit" state and the onClick.

Can you see why the entire cell is not clickable in IE and why it is
in Firefox? Is there a simpler way to accomplish this precise
formating of button widths without tables, or writing a bunch more
styles (which would not really reduce the complexity that much)?

[Barbara de Zoete]

On Sat, 05 Feb 2005 07:37:50 -0800, Tyrone Slothrop <[e-mail]> wrote:

On Sat, 05 Feb 2005 10:55:20 +0100, Barbara de Zoete <b_********@hotmail.com>
wrote:

On Fri, 04 Feb 2005 16:26:21 -0800, Tyrone Slothrop <[e-mail]> wrote:
| Home | Contact | Faq's | Contact Us | Sign Up |
Meanwhile I've put up a live example at
<http://home.wanadoo.nl/b.de.zoete/_test/voorbeeld_horizontaal-menu.html>.
Could
be of use to you.

Thank you for your effort - I really sppreciate it. However, it does
not address the width issue or, perhaps, I am blind to something very
basic here. (Wouldn't be the first time. ;-) )

Try look harder then.

This code works. However, the entire cell is not clickable in IE, but
works 100% in Firefox.

From CSS file (not optimized yet, so a bit sloppy):
So, I put effort in a clean code, and you, the one with the problem, do not.
Now, why would I look at code that is 'a bit sloppy'?
Here is the navigation bar:

Excuse the mess - you can ignore the PHP code which determines the
"lit" state and the onClick.

Know what? I'll just ignore all of it. Bye bye, good luck with your life.
--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

[Els]

Tyrone Slothrop wrote:

This code works. However, the entire cell is not clickable
in IE, but works 100% in Firefox.

.mo a:link, .mo a:visited {
border-left: 1px #FFFFFF solid;
color: #FFFFFF;
display: block;
font-weight: bold;
line-height 16px; font-size: 11px;
text-decoration: none;
}
Can you see why the entire cell is not clickable in IE and
why it is in Firefox?

Just add width:100% to the link styles.
--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Els]

Els wrote:

Just add width:100% to the link styles.

I just saw the example Barbara gave. If you saw it work in IE,
why didn't you take the effort to discover what in her styles
made it happen? This is not a "please find it for me" helpdesk,
you're supposed to do your share at least.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Barbara de Zoete]

On 5 Feb 2005 16:21:00 GMT, Els <el*********@tiscali.nl> wrote:

Els wrote:

Just add width:100% to the link styles.
I just saw the example Barbara gave. If you saw it work in IE,
why didn't you take the effort to discover what in her styles
made it happen? This is not a "please find it for me" helpdesk,
you're supposed to do your share at least.

Did you see the last question he askes?
In message <h2********************************@4ax.com>,
On Sat, 05 Feb 2005 07:37:50 -0800,
Tyrone Slothrop <[e-mail]> wrote:

Is there a simpler way to accomplish this precise
formating of button widths without tables, or
writing a bunch more styles (which would not really
reduce the complexity that much)?

I get this feeling mister Slothrop doesn't read anything, unless he easily
recognizes a quick and dirty solution for his problem. What else would explain
him not noticing the ever so much 'simpler way' provided by the example page? It
is staring in his face, screeming 'here I am, pick me, pick me!' Still he
doesn't see.

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

[Els]

Barbara de Zoete wrote:

On 5 Feb 2005 16:21:00 GMT, Els <el*********@tiscali.nl>
wrote:

Els wrote:

Just add width:100% to the link styles.

I just saw the example Barbara gave. If you saw it work in
IE, why didn't you take the effort to discover what in her
styles made it happen? This is not a "please find it for
me" helpdesk, you're supposed to do your share at least.

Did you see the last question he askes?

Yup :-)

> In message <h2********************************@4ax.com>,
> On Sat, 05 Feb 2005 07:37:50 -0800,
> Tyrone Slothrop <[e-mail]> wrote:
>

>> Is there a simpler way to accomplish this precise
>> formating of button widths without tables, or
>> writing a bunch more styles (which would not really
>> reduce the complexity that much)?

I get this feeling mister Slothrop doesn't read anything,
unless he easily recognizes a quick and dirty solution for
his problem. What else would explain him not noticing the
ever so much 'simpler way' provided by the example page? It
is staring in his face, screeming 'here I am, pick me,
pick me!' Still he doesn't see.

Yup, you're right. I noticed (again after I posted :S) that
you even stated the relevant bit of code right there above the
example. Okay, I saw it too late - but he doesn't seem to see
it at all.
(I'm quite surprised he doesn't toppost actually ;-) )

His keyword is "voorgekauwd" <g>

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Barbara de Zoete]

On 5 Feb 2005 16:52:44 GMT, Els <el*********@tiscali.nl> wrote:

His keyword is "voorgekauwd" <g>

lol

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

[Tyrone Slothrop]

On Sat, 05 Feb 2005 18:03:39 +0100, "Barbara de Zoete"
<b_********@hotmail.com> wrote:

On 5 Feb 2005 16:52:44 GMT, Els <el*********@tiscali.nl> wrote:

His keyword is "voorgekauwd" <g>

lol

Easy with the flames. If you want elegant code in PHP or Perl, ask
me. CSS I am trying to learn while spending eight or more hours a day
scripting in other languages. This example I was trying to figure out
in the 15th hour of a 16 hour day.

All I missed was the width: 100%; line. That did the trick. For that,
I thank you.

And, yes, I probably deserved the flame. I am humbled in the presence
of CSS gods. :-)