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

Simon Willison cs1spw at bath.ac.uk
Mon Jul 28 16:41:26 CDT 2003

Hi Casey,

Monday, July 28, 2003, 10:28:45 PM, you wrote:
> Hello all,

> I have the following lines:

> <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;
> }
> 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?

The class on the last link is set to 'nav3', but you have only defined
indentation on class 'nav2'. Presuming you meant all of the links to
have the same class, here's a tip for reducing the number of classes
you are using (known as "classitis"):

<div id="nav">
<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>

Now you can style the links using:

div#nav a {
  /* css rules here */

Which will style them all without you having to add classes to each
one. You don't have to surround them with a div with an id - if they
are already surrounded by some other element (a table cell for
example) you can add an ID to that.

Hope that helps,

Simon Willison

More information about the thelist mailing list