Tangled web

The code below is from WebReference. This is the kind of thing I want to do, but have not mastered yet.


<html>

<head><title>Vertical Pure CSS Rollovers Demo</title>

<style type="text/css">

<!--

p.links {

    margin:0px 0px 0px 0px;

}

.links a {

    display:block;

    width:180px;

    border:1px solid black;

    margin-bottom:-1px;

    color:#00F;

    padding:5px;

    text-decoration:none;

    font-weight:bold;

    background-color:white;

}

.links a:hover {

    background-color:#00f;

    color:white;

}

-->

</style>

</head>

<body>

<h2>Experts</h2>

<p class="links"><a href="/dhtml/">DHTML</a></p>

<p class="links"><a href="/graphics/">Graphics</a></p>

<p class="links"><a href="/js/">JavaScript</a></p>

<p class="links"><a  href="/xml/">XML</a></p></p>

</body>

</html>

Note the code is reproduced by substituting '& lt;' and '& gt;' for the left and right angled brackets of html tags.
The article offers cautions for problems in some browsers and some work arounds.

Note that we turn the tables with paragraphs and links. We turn our "links" paragraphs to zero-width margined block elements, and turn our links into block elements. To get rid of the double borders between elements we used our margin-bottom:-1px; trick. These menus work for IE5+, NS6+ and Opera 5+.
You can set a fixed width for your block element links, and the text will wrap automatically when users increase their font size. If you set white-space:nowrap; for the links, even with relative "em" widths, in Netscape 6 the link text will extend over the borders.

I cannot reproduce their example without a major re-working of my existing style sheets, which I'm not prepared to do at this point. I do, howver, want to try their methods.

The key seems to be designating the link as a block level element instead of inline, the default for a link.
Like this:
.links a {
display:block;

I believe this is why my effort to put a dotted line around a link did not work.

-- posted by Palema on 3/21/2002