CSS rollover. Problem with "clickable" area

message from BritBloke on 20 Jul 2004

I'm working on an interface for a clients intranet that can be seen
http://www.bi-pro.com/design/sanimal_intranet/.

I'm having some problems with my CSS rollovers on the top right side. The
button image is a background defined in the CSS and I have a hover class that
replaces is with an "over" image.

The "Menu 1" text is the link, but I want to extend the clickable area to
cover the full button width.

I've read a few other posts and tutes but I think I'm missing it! I'm not
really a programmer, just a designer :(.

TIA

Mark

mzanime.com replied to BritBloke on 20 Jul 2004

.menubutts {
background-image: url(support_files/top_frame_button_up.gif);
background-repeat: no-repeat; color: #FFF;
}
.menubutts a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px; padding:4px 10px;
text-align:center;
font-weight:bold; display: block;
}
.menubutts a:link {
color: #FC0;
text-decoration: none;
display: block;
}
.menubutts a:visited {
color: #FC0;
text-decoration: none;
}
.menubutts a:hover {
color: #FFF;
text-decoration: none;
background-image: url(support_files/top_frame_button_over.gif);
background-repeat: no-repeat;
display: block;
}
.menubutts a:active {
color: #FFF;
text-decoration: none;
}
Notice that I added this bit:

.menubutts a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px; padding:4px 10px;
text-align:center;
font-weight:bold; display: block;
}
".menubutts a" is selecting the anchored links, and its size, font, and
padding gets inherited to all of the pseudo classes (link, visited, hover,
etc..) below, so there is no need to repeat it over and over.

Also "padding:4px 10px;" makes padding on the links themselves. So the
clickable area's padding gets inherited to all the pseudo classes. So.....
"padding:top right botom left" = "padding:4px 10px 4px 10px" and also condensed
down = "padding:4px 10px" like we have here, understand? ^_^

Archived message: CSS rollover. Problem with "clickable" area (Macromedia Dreamweaver)