Get Unvisited Links Noticed
There are two kinds of elements that make up a webpage - inline and block-level. Understanding the difference between them and knowing which elements are which is an important part of being a web developer. Without this knowledge it can be hard to see how an element affects the layout of a page's design.
Inline elements are things like <a>, <span> and <img>, which can all be in a line of text without breaking the flow of the text on to another line. Block-level elements on the other hand refuse to be on the same line as other elements and require a line break before and after them. Examples of block-level elements include <div>, <table>, <h1> and <p>.
Anyway, enough of that, here's something that might be useful. It's a hack I used about a month ago when I changed the way new article appear on this site. I was surprised that the method I used wasn't immediately obvious to some of you and decided to talk about it one day. That's what I am doing now. Although I am shocked there are still some of you who can't dig around the code and work it all out.
What I wanted was to highlight certain unvisited links in some way. Something like a border and a bright background colour. The trouble with giving inline elements borders and background colours is that they look like this.
Not pretty is it!? What I wanted was a nice regular box shape. To do this I had to convert the link in to a block-level element, which is easily done and looks like this.
Better. It might seem a little bit like a hack but it got the job done. Is there any perverse side effect of doing this? Not that I've seen so far.
On this site the "hot article" link also has an icon that changes and the links appear normal once visited. Here's how I did that.a.article-new{
display:block;
padding: 5px 5px 5px 20px;
background: #fff url(file.gif) no-repeat 2px 8px;
}
a.article-new:link{
font-weight:bold;
border: 1px solid #0069AC;
background: #D0F4FF url(clipboard.gif) no-repeat 2px 8px;
}
a.article-new:visited{
font-weight:normal;
}
The :link pseudo class refers to unvisted links and :visited is obviously the visited ones. The other styles apply to all links. Example link (follow it and return here to see the change):
There you go then. A simple way to highlight important links that a user has yet to visit. All using nothing but simple CSS. Not a cookie to be seen.
Skip to the 
You can subscribe to an individual
Jake
Can't you do this with in-line elements then? I've done something similar based on some code at {Link} and using the width hack to get elements in a block, take a look at their list-o-matic tool, which produces nice navigation based on [li] items, maybe you could do something similar?
Cheers
Jon
Looking at their code they use somehting like this:
#navcontainer li a
{
display: block;
...
width:100%
}
Looks like it relies on the same hack.
I suspected it was something like this - but its always nice to see the explanation. As always you do this so well.