Example Number 2 - On the Right Track...

a:link, a:visited, a:active {
	display : block;   <---- ADDED 
	width : 170px;
	padding : 3px;
	margin : 3px 0px 0px 0px;
	border-top : 1px #CED5E3 solid;
	border-left : 1px #CED5E3 solid;
	border-bottom : 1px #069 solid;
	border-right : 1px #069 solid;
	background-color : transparent;
	font : 10px verdana, arial, helvetica, sans serif;
	color : #069;
	text-decoration : none;
	}
a:hover {
	color : #00f;
	border-top : 1px #069 solid;
	border-left : 1px #069 solid;
	border-bottom : 1px #CED5E3 solid;
	border-right : 1px #CED5E3 solid;
	background-color : #EBEBFF;
	}
	
the links...

<a href="#">example</a>   <---- REMOVED BR TAGS 
<a href="#">example links</a>

Okee, I added the display:block and removed the <br /> tags (block-level elements have their own line breaks) after every link and that did the trick as far as the overlapping (and to some degree, width) was concerned. Thank you!

Now there is still Opera to wonder about? I'm looking at it in Opera 6.04 and it does not apply the width still, it depends on the amount of text for that. Also, which I find really weird, it's not applying the line breaks since I removed the break tags. Any idea if this tweakable? I'm not that concerned about Opera but still, for purposes of learning something... it *is* supposed to interpret things a little more strictly and correctly according to the letter of the law right?

Jason

display:block is definitely what you wanted for this. They are, quite obviously, blocks, and stacked on top of each other too, which is the normal block behavior. =)

The example page, I see, doesn't use display:block and still uses <br>'s (Slime was looking at page one of this series, that's the one I linked him to after all). Mozilla is behaving as I would expect: the links are put one after the other as they would normally be, and then they're given outlines around the text, which naturally overlaps with the adjacent ones since the text was already laid out without the outlines taken into account. That's how borders work for inline text.

I haven't used Opera in ages, so I can't tell you what's wrong with that. I suspect that it's ignoring the display:block on anchor tags. A possible workaround would be to put <div>s around the <a>s, and make the <div>s have the outline instead of the <a>s. But that wouldn't be a great solution. (In fact, if you wanted to go that way, I would suggest using an <ul> with <li>s, since it is, after all, a list of links.)

Slime

(HZR laid out the links and ul, li CSS for Slime's list suggestion above, which can be seen on the next page...)

HZR

Aha! >> next? >> w00t! summary page

Example