Mobile Friendly Website


Doing it with style

Flicker free mk3 COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}

Post a comment

Current posts

hey, that is exactly what I was imagining. Can css read minds too?
(11.03.2005, 20:25)

Maybe. Keep watching the web for how it's done.
(11.03.2005, 20:32)

hello there stu. that's a great tutorial ! but how can i use thios tutorial if the images are not the same size. i mean that they have the same height but different width. Can u help me please ?
(12.04.2005, 16:06)

quentin, just take the width:115px; out of the #menu li and add the different widths to each #menu li.list1, #menu li.list2 etc.
(13.04.2005, 08:17)

Martin Strand:-
I see you have written this site in XHTML 1.1, but you doesn't seem to be aware of sending is as application/xhtml+xml? At least those browsers who can handle it should get the correct media type.

martin.strand at
(06.06.2005, 10:39)

Martin, I am certainly aware that my host is serving my xhtml1.1 as text/html but unfortunately I can do nothing about it. I do not have access to php and could not persuade 'telewest blueyonder' to alter their set up. So I am doing the only thing possible. I am coding so that my pages are xhtml1.1 compliant and will validate.
(06.06.2005, 19:28)

Berend Raap:-
The images are contained in the CSS but most of the times we don't want images in the CSS because where the CSS stays the same for the whole site, images may change. We don't want a different CSS for each pages with different images that have to be displayed, do we?
(14.06.2005, 13:19)

Berend, if you want images as links then by all means use images. The idea behind this is for people who are concerned with accessibilty and want to use TEXT in their markup but display images. This way text readers will work and also text only browsers will display correctly. But this obviously does not concern you.
(14.06.2005, 17:29)

it's great.have one of the question.the <ul id="mainmenu"> when the mouse "a:active" after,
the li.background as the same as the do that?
(07.11.2005, 09:12)

Hi Nicole,
thanx for this wonderful css examples. Before I know this site i was using css, now i´m playing with it. I learnd so much (may be a little bit english as well)
(17.11.2005, 20:47)

Hi Stu, I'm busy learning my way around CSS, so apologies if the answers to my questions are obvious:

Is there an easy way to combine the flicker free method to the image based fitted doors example? Could this be extended to cover a selected state using body tag id?

Many thanks,
(15.02.2006, 12:15)

Euan, I cannot think of an easy way to combine the flicker free method to the fitted doors example. A selected state using a body id is always possible and there are many examples of how to do this on the web.
(15.02.2006, 20:31)

Stu, thanks for the prompt reply. I'm sorry to hear it wasn't something obvious I was missing. If you have concluded it's not easy, it's probably beyond me!
(16.02.2006, 08:59)

This example does not work in Safari (2.0.4 (419.3)). Somebody knows how to fix this? Very informative tutorial nonetheless!!
(19.08.2006, 22:27)

Hi Stu
Thanks for a great technique.
How would one create a 'DOWN state' using image rollovers? The example already has UP and OVER image states, but wondering if a DOWN state
can be implemented with CSS rollovers.
(03.11.2006, 11:24)

Hi Stu
Thanks for great work.

Can a 'drop down menu' be implemented with this technique such as the "A refined and improved CSS only drop-down menu" or "A drop-down definition list" menus?

(16.11.2006, 03:15)

Stu, Is there any way to make this work in IE with a doctype of <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

(10.01.2007, 10:00)

already sorted:
Change the following 0px to 22px (the height of your image/rollover):
HTML #menu A:link {
HEIGHT: 22px; /* original = 0px */
HTML #menu A:visited {
HEIGHT: 22px; /* original = 0px */

HTML #menu A:hover {
HEIGHT: 22px /* original = 0px */
*used for IE in quirks mode - tested with IE6
(10.01.2007, 11:17)

great tutorial, exactly what I was looking for!
One question though, is it possible to make a 3rd image appear once the user clicks on the "over" image?
(13.01.2007, 23:41)

jeff, you will need to style the :active/:focus state to show another image.
(13.01.2007, 23:43)

Stu, I'm way confused here.. I don't know what code needs to be changed or how. I tried altering the "hover" code by copy/paste in my .css and renaming "hover" with "active" and used my new image but when i load my page it now makes the "hit" image my hover image.
u can see it at
(17.01.2007, 01:19)

In Konqueror 3.4.2. the top menu, image replacement with no text, always shows the active color image.
Adding :hover to each menu item that contains the active color image does seem to resolve this issue. I don't know if this is the best solution, but it also keeps on working in FF1.5, IE6 and Mozilla 1.7.
(15.04.2007, 15:33)


Thanks for the incredible job you do here. Would it be possible to add a drop-down to this? Thank you very much
(10.06.2007, 05:34)


I just wanted to second Mark's question about combining this with a drop down. I don't mean something like 'Artists drop-down,' but something similar to 'The basic cross-browser drop-down validating menu' with images at the top level instead of just styled text. Would that be possible? Thanks a ton for your incredibly helpful work!
(11.06.2007, 20:55)

Mark, Russ, it is always possible to make the top ;evel item use an image instead, is a dropdown menu that uses background images.
(11.06.2007, 21:42)


It seems that IE6/IE7 in quirksmode doesn't like your solution.

It keeps showing the link text (heightpicture = 80px, padding-top 80px;)

Any help would be great!

oh and no-quirks-mode works but than my layout get's funny in IE6/IE7
(16.06.2007, 13:24)


Thanks for your response. What I meant was not just having an image at the top level, but having a flicker-free 'hover sensitive' image at the top level -- basically, exactly like this, but with a basic drop-down.
(17.06.2007, 20:54)


I think once again, Mark is asking the same thing I am. I tried your scrolls example, but what I can't seem to figure out how to do is remove the text from the top level image (via the method used in 'Flicker free mk3 without text') without also removing the text from the drop down menu -- in essence combining 'Flicker free mk3' with 'The basic cross-browser drop-down validating menu.' Is such a thing possible? And if so, how? That was my original question. Any help here at all would be GREATLY appreciated. Thanks again for all the excellent work you do here.
(20.06.2007, 17:04)

I'll second Dimitri and Daniel. Konqueror 3.5 and Safari 2.0.4 don't seem to like this implementation. Anyone have a workaround? I read what Daniel said about adding :hover but could not get it to work.

If I figure it out, I will post here again..
(21.09.2007, 14:50)

man, I hate to say it... but i'm going back to javascript.

email me if anyone ever comes up with a solution..

xaris1 at gmail
(21.09.2007, 15:26)

David, there is an answer using opacity but it will not validate as opacity is CSS3.
(22.09.2007, 21:27)

Hi Stu,
this is exactly what I've been looking for, all my previous CSS attempts have ended with flickers. I have a question though. My 6 images, 400x80 display in two columns and I want them to display in one column. Can you help me please? I must be overlooking something. Thanks!
(30.11.2007, 16:47)

Dana, you probably need to take the 'float:left; out of the list styling.
(30.11.2007, 17:05)

James Trueman:-
Hi Stu
I have been trying to use this menu but cannot get it to align center, I see you have written about centering UL, but I really can't fathom out how to transfer that stying to this - can you help?
(09.07.2008, 21:47)

Hey good people,
Still have not figured out how to do a clicked state. I know I need to use :active, but don't get it.
Also, in IE it works, but in Moz it will not show the hover image. Removes the original, but does not show the new one.
(07.12.2008, 13:22)

IE uses :active but FF etc use :focus
(07.12.2008, 13:39)


Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'


Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


Facebook Twitter rss feed Facebook Fan Page