Mobile Friendly Website

CSSPLAY

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}cssplay.co.uk.

Post a comment


Current posts

t1m:-
Stu, this is great, I see it's the same method you've used on your "blocks" nav. How do you make those cool transparent button images though? is it possible to select/highlight an area on photoshop and make it transparent?
(02.01.2005, 19:38)

Stu:-
Not sure about photoshop, but in Fireworks you can specify a colour to be transparent before you save the image.
(02.01.2005, 19:56)

t1m:-
Stu, Interesting, i'll have to install my Studio MX cd and try it out. Just curious what do you use for your web sites statistics?
(02.01.2005, 20:47)

Stu:-
The main site at blueyonder has a user stats facility which is powered by Webalizer Version 2.01. This shows Dec 'hits' as just under 1 million with unique visitors at 48,000. The other site (php) brings this over the 1 million.
(02.01.2005, 20:59)

Christian Boltz:-
This doesn't work in Konqueror 3.3.0 :-( which always shows the "9 active" image.
However, the hover effect works correct ;-)
(05.01.2005, 23:30)

Julian:-
In Opera 8beta for Linux it's great, but in firefox 8 it doesn't work and in Konqueror 3.1.4 it's the same as Christian Boltz wrote ;)
(06.01.2005, 13:58)

Stu:-
FF8 tries hard to work ;o) If you hover over the image until you get the tool tip then click the mouse the image shows up where the tool tip was.
Very odd.
(06.01.2005, 14:18)

Stu:-
Now works in FF8. This required a z-index to be added to place the link background above the div background.
(06.01.2005, 16:05)

Isus one:-
Maybe better with
<meta http-equiv="imagetoolbar" content="no">
;)
(15.01.2005, 02:55)

Stu:-
Isus one, this would not affect the menu but will of course have an effect on the individual pics. I don't normally use IE so haven't bothered with this in the past, but just to please I have added the tag. It is also possible to target individual images using galleryimg="no" or galleryimg="false" in the image tag.
(15.01.2005, 10:32)

Santiago:-
Stu, i tried to use your idea and create an horizontal navbar with pictures, but i'm having trouble... CSS is mostly the same. Could anyone take a look?
www.partirviajes.com.ar/v3/index.asp (at the bottom, before de footer)
Anyway, great site!
(04.03.2005, 21:55)

Stu:-
Santiago, try removing the top line of your html <?xml version="1.0" encoding="UTF-16"?> this switches IE into quirks mode with the faulty box model problem. You also have a problem in FF with div positions (this may show up in IE once you have removed the top line.
(04.03.2005, 23:56)

Santiago:-
Well, you were right! Thanks a lot, really.
(07.03.2005, 16:50)

Eric:-
Hi Stu, Thanks for this great technique. I have tried combining the "flicker free" method with styling text in a span from your tutorial at webreference.com/programming/image_map but the span text doesn't show up until you click and then the hovers get messed up. Any clue what I'm doing wrong? Thank you! photostylings.com/singleimage.htm
(12.04.2005, 05:00)

Stu:-
Hi Eric, you need to style the spans differently. Visibility:hidden and visibility:visible will not work.
In my example I have used display:hidden and display:block.
(12.04.2005, 12:24)

Eric:-
Thank you for the try but that didn't work. I've actually got it working using 9 separate images at photostylings.com/home.htm but the animated gif's fall out of sequence (and the CSS is clunkier). The only real difference I can see between them is that the li's are styled on the multiple image version. Do you think that would make a difference?
(12.04.2005, 16:01)

otto:-
Just an FYI - this does not work in Safari 1.3. In each square the image is the bottom right image of the larger background you have. However, when you hover over the link, it works as it should be expected to.
(28.04.2005, 05:07)

Stu:-
otto, it may be that the link background image is not being moved far enough out of sight. Try changing values of -500px to see if it has any affect.
(28.04.2005, 08:15)

Stu:-
it also may be the new Safari 1.3 bug (which is being fixed) see www.alistapart.com
(28.04.2005, 11:53)

otto:-
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 http://homepage.mac.com/meacrob/imgmenu.htm
(29.04.2005, 01:29)

Stu:-
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)

Stu:-
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)

Phil:-
Hi Stu I know I am doing something stupid but the menu http://thats-a-wrap.net/vetro/galleria1.php 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)

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

julie:-
hi i'm trying to make a flicker-free gallery (www.cornellkpl.org/gallery2.html) 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)

julie:-
#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;}

</style>
</head>
(11.02.2006, 21:46)

Daniel:-
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)

Phil:-
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.
e.g.
#body {}
html>body #body {}
(21.06.2006, 11:34)

Cassie:-
Thanks for this great css! However, I can't get it to center properly. I have a page with a header, left column, right/center column, and a footer.

However, I also use negative margins. For whatever reason, no matter what I do, I can't get this list to center! Setting margin to auto for left and right doesn't do it...is it getting offset by the negative margins?
(23.08.2006, 14:11)

Oliver:-
Stu, is "height:0" in your code line below a typo or required?

#menu a {display:block; float:left; width:100px; height:0; overflow:hidden...

In Opera 8.54 Win/XP it will only work, if it's set to the actual height (100px in the example).
Other browsers (IE, FF) don't bother whether the value is 0 or 100.
(19.09.2006, 10:46)

Roy:-
Any luck finding any way to make this work in safari?
(06.11.2006, 16:41)

Stu:-
Oliver, if you set the height to anything other than zero the text will be displayed over the image.
Roy, no answer to the Safari bug.
(09.11.2006, 10:17)

mMark:-
I got this working in Safari without too much trouble. I was having the same errors as the other people.

Remove the "background:" part from "#menu-ul a". Everything from "background" to the ";"

paste
"background:transparent url(/images/buttons-hi.gif);"
(nothing else, just the above code. Replace the URL with your own.

into each line of "#menu-ul a#item1:hover" and it should work.

It's more code, I know. But if it works, so what? Functions fine in IE7, FF2 & Safari 1.3.2 (tested Mac & PC)

Hope this helps someone.
(28.11.2006, 09:37)

mMark:-
re. my Mac fix:

Oops! I renamed the "menu" div to "menu-ul" in my code. Please read "menu-ul" as "menu" in my fix.

Will still work, sorry for the confusion!
(28.11.2006, 09:39)

Renata:-
Thank you mMark. This helps me a lot. I built a similar navigation for a german site:
www.pspromotion-bremen.de/
Now it runs even on Safari.
Thanks to Stu for these fine css-menus.
(13.12.2006, 14:00)

Roy:-
just checking back to see if you got this to work in safari. i found an article somewhere explaining it! you just put extra space under or to the side of the images. i found that tripling the hight with transparent space below the actual image does the trick, but i was using it for a more horizontal image. if you save the images as pngs or gifs the transparent space doesnt add much at all to the file size :D
(20.12.2006, 16:18)

Daniel:-
Here is a solution for Konqueror 3.4.2. As mentioned before, the hover image (menu_col.jpg, 5 active in my case) is always displayed.
removing 'background:transparent url(menu_col.jpg) no-repeat 500px 500px;' in the '#menu a' and adding it each menu hover item 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:27)

Bram:-
Hi Stu, what a fantastic piece of css. I am looking forward on using this on my website and have been playing with it for a while now.
I would like to use the gallery as a navigation to my portfolios. All is fine so far. But when i try to introduce "selected" it all goes horribly wrong (so on selected page only one of the images has to stay in color). Would you have any hints on introducing "selected"?
(21.10.2008, 13:17)



Post

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://'

Support CSSPLAY

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.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page