[thelist] CSS: a.class:hover - handeling line breaks
Boris Mann
boris at bmannconsulting.com
Mon Jul 28 16:45:39 CDT 2003
Casey --
Simon Willison beat me to the "classitis" definition -- hopefully this
will also be of use.
On Monday, July 28, 2003, at 05:28 PM, Casey Crookston wrote:
> <a href='page1.asp' class='nav2'>History</a><br>
> <a href='page2.asp' class='nav2'>Press Room</a><br>
> <a href='page3.asp' class='nav3'>Parent Company<br>C&H Chemical</a><br>
>
> Here's the CSS code:
>
> .nav2 {
> font-family : Arial, Helvetica, sans-serif;
> font-size : 8pt;
> color : #ffffff;
> text-decoration : none;
> padding-left : 12px;
> line-height : 25px;
> }
>
> a.nav2:hover {
> font-family : Arial, Helvetica, sans-serif;
> font-size : 8pt;
> color : #000099;
> text-decoration : none;
> padding-left : 12px;
> line-height : 25px;
> }
>
> Everything works fine until you get to the last a href, which contains
> a
> <br>. As you can see in the class definition, this class has a
> padding-left. After the <br>, however, the next line does not indent.
> How
> can I make this line indent, AND keep both lines within the same <a>
> tags?
Just add this:
a.nav2 {
display: block;
}
Also, you don't need to re-define everything in nav2:hover -- it can be
reduced to:
a.nav2:hover {
color : #000099;
}
It's called "cascading" style sheets because the definitions "cascade"
onto sub- or pseudo-classes unless you specifically override them.
And of course, we'll encourage you to write those <br> as <br />
> And also, here's one more caviot... I'd like to keep the two lines
> "Parent
> Company" and "C&H Chemical" together... in other words, no line height
> between them?
Hmmm...are you just trying to accomplish vertical spacing with
line-height? If yes, then along with my above addition, do this:
a.nav2 {
display: block;
/* This is short hand for [T]op [R]ight [B]ottom [L]eft -- just think
of TRouBLe! */
/* adjust top and bottom as necessary */
padding: 5px 0px 5px 12px;
}
--
Boris Mann
http://www.bmannconsulting.com
More information about the thelist
mailing list