-
1. Re: CSS for a rollover sprite
Nancy O. Jun 20, 2011 3:23 PM (in response to phyllisj9)Looks good. You can add height & width in ems without penalty.
/**this is applied to all link states**/
a:enlargeicon {
width: 8em;
height: 1.5em;
background-image: url(enlarge.gif);
background-repeat: no-repeat;
padding-left: 20px;
display:block;
}/**if link and visited have same styles, use a comma**/
a.enlargeicon:link,
a.enlargeicon:visited {
color: #013976;
background-position: 0px 0px;
}/**don't forget the focus**/
a.enlargeicon:hover,
a.enlargeicon:active,
a:enlargeicon:focus {
color: #C37C00;
background-position: 0 -19px;
}Nice to see Sprites! I wish more people used them. :-))
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
2. Re: CSS for a rollover sprite
phyllisj9 Jun 21, 2011 6:14 AM (in response to Nancy O.)Thanks Nancy!
I love sprites. I hate to see tons of Javascript everywhere. I don't know why I was thinking I shouldn't use ems on overall height and width, but I'll add that in there.
And you've reminded me I don't know what "focus" is about (for some reason, my classes have never mentioned it, though I've seen it here and there). I'll go look it up!
Thanks, Phyllis
-
3. Re: CSS for a rollover sprite
phyllisj9 Jun 21, 2011 6:22 AM (in response to phyllisj9)Just found this article on how to get rid of the huge marquees:
http://css-tricks.com/829-removing-the-dotted-outline/
I guess if I use that technique I need to put in "focus" everywhere?
Thanks, Phyllis
-
4. Re: CSS for a rollover sprite
phyllisj9 Jun 21, 2011 6:28 AM (in response to phyllisj9)Wow, that was a major improvement on my site. I've got curved links which showed rectangles around them when they were clicked (as they're done with sprites). Probably means I can improve some of the coding too (got a hidden span class that I can condense now that I don't have to worry about the ugly marquee).
yay!
-
5. Re: CSS for a rollover sprite
Nancy O. Jun 21, 2011 10:19 AM (in response to phyllisj9)If you use the tab key to reach a link, that is the focus state (active in IE) with the dotted outline to show users where they are on the page. As "CSS-Tricks" says, hover, active and focus often use the same style.
Nancy O.
-
6. Re: CSS for a rollover sprite
phyllisj9 Jun 21, 2011 10:32 AM (in response to Nancy O.)Thanks, it's been hard for me to wrap my brain around how that was different from active. I don't navigate by tabs!
Should focus always be at the end? I know this order is important:
- link
- visited
- hover
- active
Wonder why focus was never even mentioned in my classes. Maybe because they never told us how to get rid of the outline...
Thanks, Phyllis
-
7. Re: CSS for a rollover sprite
Nancy O. Jun 21, 2011 11:08 AM (in response to phyllisj9)Wonder why focus was never even mentioned in my classes.
You can blame Microsoft for this. Back in the days when 90% of people used Internet Explorer as their primary web browser, Pre-IE8 browsers treated focus as active. Since IE didn't support focus correctly, many web designers (instructors included) either didn't know what focus was for or they didn't care. In any case, IE9 correctly supports focus.
Although an old article, this demonstrates the differences:
http://sonspring.com/journal/active-vs-focus-links
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
8. Re: CSS for a rollover sprite
phyllisj9 Jun 21, 2011 11:46 AM (in response to Nancy O.)Thanks for all the great info! :-)
I'm planning to go into my site and add focus everywhere. :-)
-
9. Re: CSS for a rollover sprite
phyllisj9 Jun 23, 2011 11:49 AM (in response to phyllisj9)By the way, just saw this article that says focus should go in the middle:
http://reference.sitepoint.com/css/pseudoclasses
- link
- visited
- focus
- hover
- active
As usual, I don't totally understand the logic. But I like the mnemonic: "Las Vegas Fights Hell’s Angels." :-D
If you know of a good reason that the order should be different, please let me know! Although I think I'll probably always keep focus, hover, and active the same so it shouldn't matter. But maybe I'll play around with what happens when they're different.
Thanks, Phyllis
-
10. Re: CSS for a rollover sprite
Nancy O. Jun 23, 2011 12:59 PM (in response to phyllisj9)I learned it this way.
For best cross browser results, when setting the style for several link states, there are some order rules:
- a:hover MUST come after a:link and a:visited
- a:active MUST come after a:hover
Link
Visited
Hover
Active
Given the above rules, you could put focus in the middle and it should work.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb



