[thelist] CSS: a.class:hover - handeling line breaks

[Boris Mann]

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