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

[Keith Dahlby]

Casey,

Context dependent, I would be inclined to suggest putting the links in a 
list instead:

<ul class='nav2'>
     <li><a href='page1.asp'>History</a></li>
     <li><a href='page2.asp'>Press Room</a></li>
     <li><a href='page3.asp'>Parent Company<br>C&amp;H Chemical</a></li>
</ul>

with an appropriate style:

ul#nav2 {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 10px;
   list-style: none;
   margin: 0;
   padding-left: 12px;
}

ul#nav2 li {
   padding-bottom: 10px;
}

ul#nav2 a {
   color: #ffffff;
   text-decoration: none;
}

A few changes in structure:
* I suggest you set the font family and size on the anchors' container, for 
consistency should you put non-linked text in the list. You may want to 
define appropriate text colors as well.
* At least for a screen stylesheet, use px instead of pt; pt should be 
reserved for print media, if you must use absolute sizing.
* I have omitted 'line-height: 25px' in favor of a bottom padding on <li>, 
as this will keep the lines of Parent Company/C&H Chemical together.

HTH!

Cheers ~ K

At 05:02 PM 7/28/2003, you wrote:
>----- Original Message -----
>Okay, so now I have:
>
><div id='nav2'>"
>      <a href='page1.asp'>History</a><br>"
>      <a href='page2.asp'>Press Room</a><br>"
>       <a href='page3.asp'>Parent Company<br>C&H Chemical</a><br>"
></div>"
>
>and this:
>
>div#nav2 a {
>  font-family : Arial, Helvetica, sans-serif;
>  font-size : 8pt;
>  color : #ffffff;
>  text-decoration : none;
>  padding-left : 12px;
>  line-height : 25px;
>}
>
>Two questions: it now renders like this (hope the spacing works):
>
>      History
>
>      Press Room
>
>      Parent Company
>
>C&H Chemical
>
>
>What I'd like is this:
>
>      History
>
>      Press Room
>
>      Parent Company
>      C&H Chemical
>
>Does that make sense?