DIV element buttons - how do you set rollover effects correctly?

[Number 11950 - GPEMC! Replace number with 11950]

The applicable CSS is as follows:
______________________________________
div.BUD
{
background-color: maroon;
color: beige;
border: 3px outset;
text-align: center;
margin: 9px;
width: 138px;
font-style:normal; font-variant:normal; font-weight:bold; font-size:12pt;
font-family:trebuchet, sans-serif
}
div.BUD a
{
TEXT-DECORATION: none;
background-color: maroon;
color: beige;
}
div.BUD a:hover
{
width: 138px;
color: lavender;
background-color: darkorchid;
border-style:inset;
}
______________________________________
Applicable HTML:

<DIV class="BUD">
<a href="publishing-tools">Publisher Tools</a>
</DIV>
<DIV class="BUD">
<a href="software">Software Index</a>
</DIV>
______________________________________
The inset & colour change does not apply to the entire DIV instead of just
to the hyperlink itself. See www.geoceanis.com for this little catastrophe!
:^)

So, I'm a little baffled as to how I managed to stuff this up. What is the
difference between code that highlights only the link within the DIV
element, and code that highlights the entire DIV element...?

Thanks in advance...

--
Timothy Casey GPEMC! >11950 is the nu****@fieldcraft.biz 2email
Terms & conditions apply. See www.fieldcraft.biz/GPEMC
Discover valid interoperable web menus, IE security, TSR Control,
& the most advanced speed reading application @ www.fieldcraft.biz

[Andy Dingley]

Number 11950 - GPEMC! Replace number with 11950 wrote:

The inset & colour change does not apply to the entire DIV instead of just
to the hyperlink itself. See www.geoceanis.com for this little catastrophe!

Haven't hacked on your example myself, but the usual fix is to set
a { width: 100% }
Couple of other comments:

- Don't mess with anything with a:hover except for colours. Anything
involving fonts, sizes, positions etc. can cause an annoying jump when
you move over the link.

- I'd use <lirather than <div>. You've got a related set of them,
it's a list.

[Number 11950 - GPEMC! Replace number with 11950]

"Andy Dingley" <di*****@codesmiths.comwrote in message
news:11**********************@75g2000cwc.googlegro ups.com...

>
Number 11950 - GPEMC! Replace number with 11950 wrote:

The inset & colour change does not apply to the entire DIV instead of

just

to the hyperlink itself. See www.geoceanis.com for this little

catastrophe!

>
Haven't hacked on your example myself, but the usual fix is to set
a { width: 100% }

The user agent just won't listen. For some reason, this line is being
ignored. Also tried:

a, a:hover { width: 100% } [no effect]
a:hover { width: 100% } [no effect]

I've also tried placing these lines before then after the "div.BUD" +
"div.BUD a" + "div.BUD a:hover" specifications, and I have tried placing the
"width: 100%;" line within the "div.BUD a" + "div.BUD a:hover"
specifications - all without effect.

It stands to reason that the width should not be ignored especially when it
is not flagged for non-conformance - am I misunderstanding the CSS
specification? I'm combining this with the HTML 4.0 Strict DTD to ensure
that the fixed branding & web menus when they go in, will function
correctly - could this be complicating matters?

Couple of other comments:

- Don't mess with anything with a:hover except for colours. Anything
involving fonts, sizes, positions etc. can cause an annoying jump when
you move over the link.

Ya don't say! :^) - a tiny little jump I've seen used to make the button
appear to pop out as the mouse hovers over it, but some of the web menus
I've messed with in the past have been very jumpy...

>
- I'd use <lirather than <div>. You've got a related set of them,
it's a list.

Using <DIV>s for vertical sidebar & <SPAN>s for horizontal toolbar - I've
seen the use of list elements for this before - can list elements be set to
equidistant spacing on the same line like a <SPANelement?

Thanks in advance...

--
Timothy Casey GPEMC! >11950 is the nu****@fieldcraft.biz 2email
Terms & conditions apply. See www.fieldcraft.biz/GPEMC
Discover valid interoperable web menus, IE security, TSR Control,
& the most advanced speed reading application @ www.fieldcraft.biz

[Number 11950 - GPEMC! Replace number with 11950]

"Andy Dingley" <di*****@codesmiths.comwrote in message
news:11**********************@75g2000cwc.googlegro ups.com...

>
Number 11950 - GPEMC! Replace number with 11950 wrote:

The inset & colour change does not apply to the entire DIV instead of

just

to the hyperlink itself. See www.geoceanis.com for this little

catastrophe!

>
Haven't hacked on your example myself, but the usual fix is to set
a { width: 100% }

[SNIP]

Tried setting
a { display: block; }

this seems to do the trick...

What is the significance of setting

-a { display: block; }
OR
a { display: block; }
OR
+a { display: block; }

???

I've seen this use of "+" & "-" in certain stylesheets but haven't a clue as
to intended function...

Thanks in advance...

--
Timothy Casey GPEMC! >11950 is the nu****@fieldcraft.biz 2email
Terms & conditions apply. See www.fieldcraft.biz/GPEMC
Discover valid interoperable web menus, IE security, TSR Control,
& the most advanced speed reading application @ www.fieldcraft.biz

[darwinist]

Number 11950 - GPEMC! Replace number with 11950 wrote:

"Andy Dingley" <di*****@codesmiths.comwrote in message
news:11**********************@75g2000cwc.googlegro ups.com...

Number 11950 - GPEMC! Replace number with 11950 wrote:

The inset & colour change does not apply to the entire DIV instead of

just

to the hyperlink itself. See www.geoceanis.com for this little

catastrophe!

Haven't hacked on your example myself, but the usual fix is to set
a { width: 100% }

[SNIP]

Tried setting
a { display: block; }

this seems to do the trick...

What is the significance of setting

-a { display: block; }
OR
a { display: block; }
OR
+a { display: block; }

I've had the same problem, it took me a while to discover how useful
"display" can be:
block: separate entity, line break before and after
inline: part of a paragraph or whatever, no auto-line breaks
none: hide the element entirely, great if you like rich-clients (pop-up
menus, etc).

display:none has important differences from visibility:hidden. Found a
good, brief, working explanation here:
http://www.devx.com/tips/Tip/13638

hth

???

I've seen this use of "+" & "-" in certain stylesheets but haven't a clue as
to intended function...

Thanks in advance...

--
Timothy Casey GPEMC! >11950 is the nu****@fieldcraft.biz 2email
Terms & conditions apply. See www.fieldcraft.biz/GPEMC
Discover valid interoperable web menus, IE security, TSR Control,
& the most advanced speed reading application @ www.fieldcraft.biz