This is the celebrated journal of Mr. Simon Collison A.K.A Colly

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...

Responses

# the lazarus corporation responded on 18th May 2004 with...

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.

  • # Simon Collison responded on 18th May 2004 with...

    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…

    # Simon Snorkeller responded on 18th May 2004 with...

    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…!

    # Tomas Jogin responded on 19th May 2004 with...

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

    # Frank Zehelein responded on 19th May 2004 with...

    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/

    # James Colyer responded on 19th May 2004 with...

    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.

    # Simon Collison responded on 19th May 2004 with...

    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…

    # Jeff Croft responded on 19th May 2004 with...

    <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!

    # Simon Collison responded on 19th May 2004 with...

    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…

    # James Colyer responded on 20th May 2004 with...

    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!

    # Jeff Croft responded on 20th May 2004 with...

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

    Jeff

    # James Colyer responded on 20th May 2004 with...

    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.

    # James Colyer responded on 20th May 2004 with...

    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.

    # Simon Collison responded on 20th May 2004 with...

    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…

    # James Colyer responded on 20th May 2004 with...

    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.

    # Simon Collison responded on 20th May 2004 with...

    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…

    # Anton responded on 21st May 2004 with...

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

    # Jeena Paradies responded on 24th May 2004 with...

    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.

    # James Colyer responded on 24th May 2004 with...

    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!

    # Simon Collison responded on 24th May 2004 with...

    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…

    # Martin Rack responded on 25th May 2004 with...

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

    :)

    # Simon Collison responded on 25th May 2004 with...

    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…

    # Martin Rack responded on 25th May 2004 with...

    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.

    # ryan responded on 30th May 2004 with...

    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]

    # Jeena Paradies responded on 30th May 2004 with...

    why not use:

    ul id=“menu”

    and
    #menu a {  }

    # Ryan MacLeod responded on 31st May 2004 with...

    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?

    # Jeena Paradies responded on 31st May 2004 with...

    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.

    # Jeena Paradies responded on 31st May 2004 with...

    And again; see this picture:

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

    Jeena Paradies

    # Pete responded on 4th June 2004 with...

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

    # Simon Chettle responded on 8th June 2004 with...

    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

    # Simon Collison responded on 8th June 2004 with...

    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.

    # Andy Budd responded on 11th June 2004 with...

    Nice

    # Dr John responded on 16th June 2004 with...

    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?

    # Simon Collison responded on 16th June 2004 with...

    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…

    # Simon Collison responded on 15th July 2004 with...

    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).

    # Terry Hughes responded on 17th July 2004 with...

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

    # Simon Collison responded on 17th July 2004 with...

    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…

    # Simon Collison responded on 21st July 2004 with...

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

    Ticked-off links Reloaded

    Responses are now disabled Your ability to respond is disabled automatically some 30 days after articles are published, or manually much sooner if spamming guttersnipes target a particular article.

    Prev 40 Next

    Superfluous Aside

    Archived in HTML & CSS

    There are 38 responses

    External References

    Copyright © Mr. Simon Collison 2003-2017. Protected and licensed under a Creative Commons License. Grab the RSS feed

    Engineered in Nottingham, scaffolded by ExpressionEngine, steam-pumped by United & kept alive with tea and hugs.