collylogic.com - Simon Collison's weblog

Ticked Off? Visited Links How-To

18th May 2004

A fresh version of this tutorial is now up, featuring a better, leaner, semantic approach, slimmed-down CSS and just one background image. Ticked-off links Reloaded.  Those of you looking for the original tutorial will be as pissed off as I am that somehow the database chewed it up. Oh well…

Simon Collison published this on 18/05/04, at 9:45 AM

Comments

That’s a really nice and simple effect that works very well - and you’ve semantically identified the menu items as an unordered list, which is of course absolutely correct.  I’ve never seen the background image used like that before, so I think you can claim the credit (patent it now!)

In IE 6 there’s a flash of background white when you move the mouse over the link (while it loads the “hover” version of the image).  Just a thought, but if you set the background colour of the

  • tag to the same light grey as the main bar of the gif, and then redo the gif’s so that this lighter grey is transparent then it might overcome this. 

    Alternatively, maybe set the background colour of the

  • tag to the same light grey as before, and then chop the gif’s down to just the square with the icon, and use background-position:right to align them.  This also has the advantage of reducing the size (physical and file) of the image.

    But it’s only an incredibly minor point.

    Lovely CSS.

    18/05 at 13:19 from the lazarus corporation

    • There was a very interesting discussion on Keith’s site about best methods of using visited links. Worth checking out - but no mention of background images.

    Lazarus - I agree with your suggestions - I’m paying now for building so fast. Reducing the reliance on the actual images would be a step forward - especially if approaching a redesign. Using ‘background-position:right’ with a small icon would allow us to treat the actual link text seperately, avoiding left-right conflicts.

    Good stuff…

    18/05 at 13:35 from Simon Collison

    Lazarus - anymore of this talk and you’ll have Mr Collison sending you over piles of freshly-washed CSS, ready for a good pressing and ironing...!

    18/05 at 14:43 from Simon Snorkeller

    That’s a really good and original idea, especially for link pages. Thanks for sharing.

    19/05 at 03:31 from Tomas Jogin

    This is really a nice site! It’s not the first time, someone is using this technique but never the less its a great example how to use it (and a good idea if you came yourselfe across it).

    See example here:
    http://www.designmadeingermany.de/

    19/05 at 05:45 from Frank Zehelein

    Just a thought with the image rollover hiccups reported by lazarus...perhaps a variation of Pixy’s no-preload technique?  Stack all three images together into a single image, then set the <li> to the normal state graphic.

    This will eliminate the pre-loading of multiple seperate images and also eliminate the flicker perceived by some IE users.

    19/05 at 11:41 from James Colyer

    Interesting to see the German example - uses smaller icons as discussed by Lazarus.

    James, to counter the flashing on IE, I’m going to do a re-write as you suggest, using just the one image and the background-position: element, and I’ll post it here or amend the article asap. I’m going to stick with the long gif for now, but right-aligning an icon-type image is a good way forward. Big thanks for the feedback so far…

    19/05 at 11:59 from Simon Collison

    <style. I love it!

    One question, though....would it not be a bit simpler to give your unordered list a class or ID so that you didn’t have to specify a class on every single anchor tag?

    For example, if your ul had a class of “menulist”, you could use the following to select it in CSS and avoid having to put class="menulist" on every link.

    ul.menulist a:link { }

    Just an idea—great work, keep it up!

    19/05 at 13:19 from Jeff Croft

    Just posted a small update above that considers points raised by Lazarus and James (one image with no flashing).

    Jeff - glad you like it, and thanks for the suggestion. Have to agree there! I’ll probably combine it with the update and refresh the tutorial (but not today, I’m tired!). Stay tuned…

    19/05 at 15:21 from Simon Collison

    Okay I couldn’t resist trying to make this concept work with the minimum of markup and the most minimal of graphics.  An example is now available privately at my website.

    This version features a minimum of markup, use of a nicely degradeable ordered list, and a single image (only 16x48) comprising only the default, rollover and visited ‘ticks’

    Enjoy!

    19/05 at 17:26 from James Colyer

    Nice job, James. I’m still not understanding why you need the class assigned to the each link, but whatever. :)

    Jeff

    19/05 at 17:44 from Jeff Croft

    Ah the extra classes are force of habit. They are there to allow for more control over each element, say if you wanted to use the <body> element in conjuction with the [id] or [class] attributes to indicate current selection.


    body.ticksthread #menulist li a.ticksthread { background-color: #ffe; }

    By setting the <body>’s class to ‘ticksthread’ the background of the <a> element with the class ‘ticksthread’ would change to a bright yellow to indicate the current selection.

    So the extra [class] tags are totally optional in this example.

    I’ve updated the example by removing the extra [class] attributes and seperating the CSS from the XHTML documents.

    20/05 at 04:23 from James Colyer

    Just another quick little note, I just checked the updated example in a variety of PC and Mac browsers and it works well in all of them.  The only notable exception to this is Opera 6 Mac which does not display the tick images at all, but then again that’s not too suprising.

    20/05 at 06:02 from James Colyer

    Ah, was about to re-post last night, when the darned internet service provider stopped service providing.

    Good to check back and see that James has taken care of it - good work! Very similar to what I’d nearly finished, except I’m still using the long single image, and naturally I’m adopting Jeff’s suggestion too.

    Haven’t implemented any of this on the site yet - so don’t be surprised if it still flickers. And as for Opera - you do surprise me…

    20/05 at 08:57 from Simon Collison

    Simon-

    Well I’ve found that Opera 6.x on the Mac is always problematic when it comes to extensive use of background images, especially when it comes to accessible image-replaced navigation lists.

    Another example of various image replacement techniques I’ve collected from various sources and applied to simple degradable un-ordered lists.  You’ll note that they all work on Opera 6 Mac, but will not change state when rolled over.  You can find my testing notes within the inline CSS block in the document.

    Mac browsers work well; Opera 7 Beta, OmniWeb 5 Beta, all current Mozilla, Moz-based browsers, Safari 1.2, and even *gasp* IE 5.2.

    One of these days I’ll get my website “done” and all these techniques will be documented as articles.

    20/05 at 10:31 from James Colyer

    Speaking of I.E Mac, check out the CollyLogic sidebar on there - ultra-strange 1px high horizontal lines that come and go! Very random. I’ve not had chance to go in and debug it, but it just goes to show how daft that browser is.

    As for your site, awaiting impatiently. Flag it up on here when it’s done…

    20/05 at 10:36 from Simon Collison

    <script becuase of some diffuculty I was having getting thing to work right.
    <styles/01.css” target="_blank">CSS

    21/05 at 13:42 from Anton

    Hej guys,

    You all have a problem with valuable text size!

    Look at James example on Mozilla with 200% text size:


    http://jeenaparadies.de/test/css-tricks/colylogic2.png

    It looks really bad. I worked a little bit with to solve the Problem, look at my example.

    24/05 at 06:09 from Jeena Paradies

    Jeena-

    I only spent about 10 minutes on mine and didn’t really take the time to make a version that would scale with different text sizes other than the browser default.  Normally I would do such testing when doing a full design, but this was just a quick little proof-of-concept.

    Nice modifications, they look great at expanded sizes!

    24/05 at 07:10 from James Colyer

    Probably time to resize with ems. Thanks for the tip-off Jeena, I’ll implement a few scaling changes as soon as I get time.

    Plenty more errors here and there - I really did run out of time! That said, I may not spot them all, so tip-offs always welcome…

    24/05 at 10:20 from Simon Collison

    http://www.lpsp.de - my first xhtml/css-site launched: 25/05/2003
    :)

    24/05 at 16:37 from Martin Rack

    Last year Martin!!! He-he - and you did the site mentioned earlier too? Well, like I said, I never assumed it was original, but I thought it’d be good to share the technique.

    You use the method really cleanly - very effective - and on the active state I notice. I’m hoping a few people will eventually use this method (if you do, please post links here). I’ve had so much positive feedback about it, with many people saying it does aid usability - especially people from Germany…

    24/05 at 16:48 from Simon Collison

    Jup. Found this article by checking our refferers (many).

    Good to see people like you taking the time to share this knowhow!
    Good to see webusability is spreading more and more!

    :)

    Greetings from Germany.

    25/05 at 00:10 from Martin Rack

    You could use a setup like

    <div id="menulist">
    and then links without classes by using css like this:

    #menulist a {the usual stuff in here}

    also, this is a great live preview thing you have set up.
    -[ryan]

    30/05 at 09:33 from ryan

    why not use:

    ul id="menu"

    and
    #menu a { }

    30/05 at 09:42 from Jeena Paradies

    same thing.

    you seem to have missed something, Mrs. Paradies:

    it goes right from “why not use” to “and”, two lines downs.

    Would you mind re-iterating?

    30/05 at 16:04 from Ryan MacLeod

    I mean
    <ul id="menu">
    (I don’t like this live preview)

    Why should he use another useless <div> if it is not nessesary?

    Jeena

    PS: I’m a Mr. Paradies see the picture on my page.

    30/05 at 23:03 from Jeena Paradies

    And again; see this picture:

    http://jeenaparadies.de/impressum.php#persoenlich

    Jeena Paradies

    30/05 at 23:05 from Jeena Paradies

    That is a fantastic effect. I plan on using a similar version on my final redesign. Thanks for opening it up to the masses!

    04/06 at 13:15 from Pete

    Hey, just thought I’d say that this technique really is cool, with your permission I would like to use one I have adapted at
    epicstudios.co.uk

    I have modified both the code and the image (using the 3*combo btw) to fit in with my site, and to try and differentiate it from yours, but I couldn’t find a better alternative than a tick, although I have used a different styled one.

    If you have any objections please let me know (email) and I will remove it straight away. If it is ok (or) isn’t I will put a link to your site and maybe this tutorial on the front page

    08/06 at 08:19 from Simon Chettle

    Don’t you worry about it Simon - looks good. I’m all for more people adopting this method in the name of usability.

    Here’s two more examples from a couple of recent re-designs, which both look more like mine than yours does (thanks for the credits to both)...

    Riding the clutch

    Angry Pete

    Post any others here folks.

    08/06 at 08:32 from Simon Collison

    Nice

    11/06 at 03:31 from Andy Budd

    Very interesting.  A good extension of ideas I had myself (apart from the tick for visited) but never got round to fully implementing.  Must try to find a use for this much better method - I was considering just swapping separate images for the background.

    However, when I mouseover your menu and get to the last link in a set, the next set below jerk upwards a few pixels.  Using IE 6, win 98se.  Is this a know bug in IE or an error in the coding?

    16/06 at 07:05 from Dr John

    Hmm, I think it is something to do with collapsing margins in IE PC (Andy Budd and a few others discussed this anomoly and found a couple of possible solutions). The bottom margin conflicts with the top one in the div below it. I missed this in testing - thanks for the tip-off…

    16/06 at 07:11 from Simon Collison

    Finally come up with a solution to the conflicting margins thing, Dr John. Not implemented site wide yet, but you can test it here (my test page).

    15/07 at 10:11 from Simon Collison

    Would the following style be acceptable as an alternative to using colour for visited links?

    a:visited {
    font: 1em Arial, Helvetica, sans-serif;
    color: #660066;
    text-decoration: none;
    border-bottom: 1px dashed;
    }

    17/07 at 10:17 from Terry Hughes

    I reckon so. I’m assuming (as I can’t see the other states) that it is the border-dash and colour that are changing. I like to see folks use the border element on links, coupled with a background colour and some padding perhaps, creating the illusion of a button. If you like the idea then definitely do it - I’m not one to suggest we should follow too many rules. SWo long as there is an obvious distinction between link states…

    17/07 at 10:29 from Simon Collison

    There is now a fresh Logical approach to this technique, with leaner CSS and no extra markup:

    Ticked-off links Reloaded

    21/07 at 04:11 from Simon Collison

    Note that comments are disabled 30 days after articles are published, or sooner if spammers target a particular post. Sorry...

    Commenting is not available in this section entry.