CSSPLAY
Doing it with style
Doing it with style
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.
Stu:-
I havejust noticed a small bug in Firefox that the :focus state will cause the image to jump downwards if the page is not at the top (scrolled downwards). This action is not exhibited in IE or Opera.
(15.08.2005, 09:06)
mrruben5:-
Nice. Using the text-indent and overflow hidden method. Are those white lines intended to be there?
(15.08.2005, 16:34)
Stu:-
Yes, the white lines are on the original image from Avalonstar. If I were to start afresh with this I would not use a single image but split it into four separate images.
1. The red car as a background image for the <ul>.
2. A hover and active image for section 1.
3. A hover and active image for section 2.
4. A hover and active image for section 3.
This would simplify the css and make the image file size smaller and stop the IE flicker when background images are not cached.
I may put up this method when I have time.
(16.08.2005, 08:13)
Stu:-
A small change to stop Firefox jumping
(16.08.2005, 20:40)
NoDeal:-
sux
(18.08.2005, 08:41)
Stu:-
Short for 'success' of course ;o)
This is what makes it all worthwhile.
(18.08.2005, 12:05)
Jo-an:-
The sprites method: using one background-image that holds the normal state, hover state and the active state (a:active or body#activepage a) casues the IE flicker (=reloading the background-image everytime the background-position is changed to go to the desired state and show it). We loose the advantage of 1 background-image partially if we use 1 background-image used per state. Still we have per image an overall 3 states which is still fine ... and it does not cause the flicker because there are no other states that might show when Ie flicker occurs (IE flicker = cache 'everytime you visit the page which is not a standard cache setting, the standard is 'automatically'. I wander if it matters to make an image that eg holds all states of one link, or one image that holds one state of x number of links for that matter.
(18.08.2005, 13:32)
Jo-an:-
Mac Platform test results:
IE5 MAC (OSX) (version 2.3) : all works even active state!!
SAFARI (OSX) (version 1.2) : same issue as Opera
need to hold mouse click to hold its active state
(18.08.2005, 14:50)
Jo-an:-
SAFARI 1.3 same results ...
(18.08.2005, 15:12)
Rudi:-
Ah, but is there a way to hold the clicked image's focus state even when the user clicks somewhere else on the screen? If that's possible, the Sprites function would need to continue functioning normally (focus shifts when a different sprites image is clicked).
(18.04.2010, 19:23)
10 of 11 comments (part 1). [ » ] [ * ]
Thanks to Alex for this script.
Please enter your comments for this site page.
Please note that all posts are moderated.
HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'https://'
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.
