Mobile Friendly Website


Doing it with style

Flicker free 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

it also may be the new Safari 1.3 bug (which is being fixed) see
(28.04.2005, 11:53)

I tried switching around the margins to no success. I did produce some screenshots if you are interested in what it looks like in Safari 1.3. I threw them together at
(29.04.2005, 01:29)

otto, thanks for the screen shots. It looks as though Safari is ignoring the no-repeat at the end of #menu a style.
Try removing the no-repeat and adding it as a separate entry:
#menu a {background-repeat:no-repeat;}
or putting no-repeat at different positions in the #menu a style.
(29.04.2005, 08:06)

otto, I have investigated Safari bugs and it looks like background-repeat is amongst them (not fixed in v1.3). Several workarounds have been put forward including making the background image slightly larger then the containing div. I will try padding the bottom/right of the image by a few pixels to see if this works.
(29.04.2005, 10:21)

Hi Stu I know I am doing something stupid but the menu works perfectly in Firefox but does not in IE 6. Could you possible open the source on the page and see what I am doing wrong?
(29.01.2006, 23:57)

Hi Stu Please Ignore my post I have it working fine. Thanks so much for the great idea.
(30.01.2006, 00:04)

hi i'm trying to make a flicker-free gallery ( but the colored background is a little off..below is my code starting from the #menu to the </head>..i'm pretty sure somethings wrong with this portion of the code..what am i doing wrong? please help!

#menu {position:top/left; width:320px; height:320px; background:transparent url(/gallery/gallerymain-bw.jpg); overflow:hidden; margin:0 auto;}
#menu ul {margin:0; padding:0;}
#menu li {list-style-type:none; width:100px; height:100px; display:inline;}
#menu a {display:block; float:left; width:100px; height:0; overflow:hidden; color:#000; text-decoration:none; padding-top:100px; background:transparent url(/gallery/gallerymain.jpg) no-repeat 320px 320px;}
* html #menu a {height:100px; he\ight:0;}
(11.02.2006, 21:46)

#menu a#item1:hover {background-position: 0 0; z-index:50;}
#menu a#item2:hover {background-position: -100px 0; z-index:50;}
#menu a#item3:hover {background-position: -200px 0; z-index:50;}
#menu a#item4:hover {background-position: 0 -100px; z-index:50;}
#menu a#item5:hover {background-position: -100px -100px; z-index:50;}
#menu a#item6:hover {background-position: -200px -100px; z-index:50;}
#menu a#item7:hover {background-position: 0 -200px; z-index:50;}
#menu a#item8:hover {background-position: -100px -200px; z-index:50;}
#menu a#item9:hover {background-position: -200px -200px; z-index:50;}

(11.02.2006, 21:46)

Hello Stu, you are a great inspiration.
I've used the flicker free menu:hover with success. There was only one issue. Firefox leaves a dotted border on the active/focus link/image.
First, I tried to adapt your DOTTED LINE REPLACEMENT technique. That resolved the Firefox problem. But the menu stopped working in IE.
Then searched the internet for a solution. I did not find a solution, but understood the problem better. That helped be to resolve the problem. Here it is:

#menu a:active, #menu a:focus {
border: 0px;
outline:0; /* for browsers that understand */
(25.05.2006, 13:18)

If you put html>body in front of any line of css it is ignored by ie and read by firefox. This may solve some problems.
#body {}
html>body #body {}
(21.06.2006, 11:34)

10 of 38 comments (part 2). [ « ] [ » ] [ * ]


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