making accessible img rollovers w/ css

[rmedek]

okay, here's the problem...

I'm converting a mostly style-separated-from-content site into a completely style-separated-from-content one. You can see the "before" here (the "after" is still in stages on my hard drive...).

The menu is a series of pictures, 120px tall and 64px wide with a 1px border on the left. They are used in an unordered list as a navigation bar. I'm assigning each <li> with an ID so I can use background images instead of the <img>.

Now, I've checked out a bunch of ideas for accessible rollovers and I'm a big fan of the langridge/leahy technique. It basically uses padding to "scoot" the text out of sight. The problem is, I can't seem to make the image part of the link active, only the text, which is hidden. So no rollover.

I solved some of this problem in another part of the site by giving the <a> tag the ID, but this doesn't make my code semantic. In a perfect world, without styles I get an unordered list with text links to my pages, and with styles, I get pictures for my links. I know this has been done countless times, but I seem to be at a dead-end.

Any help would be greatly appreciated!

-Rich

<edit>The "work in progress" is at http://richardmedek.com/test/current/.
The stylesheet: http://richardmedek.com/test/style.css
</edit>

[Vladdy]

How giving <a> and ID influences your code semantics. If you put different pictures in the background of your <a>s you need to distinguish them and that is what ID is for..

[rmedek]

How giving <a> and ID influences your code semantics.

Did you mean to say, "How is giving <a> an ID influencing your code semantically?

... if so, because the things on the menu that are different are the list items, not the links. Right now, I have 7 pages, or links, on the menu, including the page that the browser is currently on. The page you're on is shown with a larger picture on the left, and the other six are <img> links on the right (Here's the page in question). If I want to change which way the current page (which is not a link) or links are displayed, it makes more sense to change the stylesheet for the list items, doesn't it?

When I read the above it sounds confusing , but I think you'll understand where I am coming from...

-Rich

[Vladdy]

No, and here is why.

You current anchor (link) has the following structure:
<a href="..."><img ... /></a>
so that the content of your link is an image element.

I understand (and support) your desire to further separate style from content by putting image into background and have :hover style for image "coloring". Now all that you still do with anchor element and because you need to specify a different image for your links you use id attribute:
<a href="..." id="...">Link Text</a>

From the semantics point of view, list only brings those anchor elements together and list items are all the same from the presentation point of view.

Now, what you should remember is to set the display attribute for your anchors inside the list to block (default is inline) - this will let you set the height and width to that of the background images and make <li> wrap around.

For the current page I would substitute anchor with a span to keep the styling consistent or give the anchor a different class. This is the approach I used on my site for the right-side menu (<div id="primNav" if you view the code) - the only difference is that I left enough space for the text under the image rather than padding it out of the view.

[rmedek]

Well, I'm trying to follow the semantics laid out, for example, in this article in A List Apart. The concept there was to use the IDs in the <li>. This is one of many articles I'm trying to follow to code my site, I'm just getting a little disoriented putting it all together...

Regardless of which technique is more semantic, my preference is to use the IDs in the <li>, so maybe I should rephrase my question in that manner...

Thanks for your help so far...

-Rich

[mindlessLemming]

Another (possibly more simple) version of the technique in question is to set the background-image of the <li> to your OverImage and on a:hover, set the background of <a> to :none. Same effect, maybe more simple. Maybe less twitchy in bad browsers?
rmedek: Another muso who's into web dev! We're a growing breed it would seem


Vladdy:

-moz-border-radius:

Don't get me wrong, I like the effect and may end up using it too one day; but isn't proprietry code for a good browser still proprietry code? Not an accussation of any sort, just wondering where you stand on the matter.

Andrew

[Vladdy]

First of all, when it comes to CSS, vendor specific extensions are part of specifications: http://www.w3.org/TR/CSS21/syndata.html#q4

The keyword here is extension: presentation is enhanced in a browser that supports it and degrades to the standard in those which do not. It is quite different from using proprietory code that makes a page work only in that particular browser.

[rmedek]

Originally posted by mindlessLemming
Another (possibly more simple) version of the technique in question is to set the background-image of the <li> to your OverImage and on a:hover, set the background of <a> to :none. Same effect, maybe more simple. Maybe less twitchy in bad browsers?
rmedek: Another muso who's into web dev! We're a growing breed it would seem

Thanks, that's a good tip, and I understand it works great for IE's flickering problem... my web design is far, far, far behind my music stuff, but sure is fun to do, and try to do right. Maybe I'm just a masochist...

-Rich

[Skyzyx]

Originally posted by Vladdy
First of all, when it comes to CSS, vendor specific extensions are part of specifications: http://www.w3.org/TR/CSS21/syndata.html#q4

The keyword here is extension: presentation is enhanced in a browser that supports it and degrades to the standard in those which do not. It is quite different from using proprietory code that makes a page work only in that particular browser.

Rounded edges are also a part of the upcoming CSS 3 spec. As soon as that particular CSS 3 module is finalized, we can use the CSS 3 syntax to achieve the same effect.

[mindlessLemming]

Originally posted by Skyzyx
Rounded edges are also a part of the upcoming CSS 3 spec. As soon as that particular CSS 3 module is finalized, we can use the CSS 3 syntax to achieve the same effect.

Originally said by Mr. Burns
Excellent........

[ronaldb66]

Sliding doors...?

I'm trying to follow the semantics laid out, for example, in this article in A List Apart.

Not entirely relevant, but you can id your li's (how's that for a sentence? "You can eye-dee your lees..." ) and use a descendant selector to style the appropriate a anyway:

li#nmbrone a {...}
li#mnbrone a:hover {...}
li#nmbrtwo a {...}
...

etc.

(And yes, you don't need to specify the element when using an id; I just included it for claritiy's sake since I failed to supply the accompanying HTML).

[rmedek]

true, not entirely relevant, but that was the article that got me started on the semantics of it all...

I did find a great article that's guiding me along, though, in case anyone's interested ...

http://www.simplebits.com/archives/2...rollovers.html

Thanks for everyone's help!

[Vladdy]

The article is just an opinion.
I think I successfully argued the point why id belongs in the <a> element rather than <li>

[coder_seth]

well, i agree that the logical place seems to be on the <a>s, however a "list item" is a completely neutral term. it only takes on an identity, or and "id", if you will, based on its content. in that case, the id makes sense on the <li>.

i think two good, and equally efficient solutions were offered. so why the argument? true, one solution was put in the light of being a pleasant "hack" for IE specific problems (but actually i think that flicker is not browser specific, as much as connection specific), but since they are equally semantical in different lights, wouldn't that almost be a very practical benefit of putting the id on the <li>?

>

seth

[rmedek]

Originally posted by coder_seth
true, one solution was put in the light of being a pleasant "hack" for IE specific problems (but actually i think that flicker is not browser specific, as much as connection specific)

The "flicker" mindlessLemming was referring to (I think) was due to the popular way of using CSS to make the rollover effect. The idea is to have a single background image with both parts of the rollover on it, then move the background position on a:hover. So, let's say the link is a 20px wide black image, and the rollover is a 20px wide white image, you would use a single image that's 40px wide, both images joined together. Then you use a:hover {background-position:0 -20px} to produce a seamless rollover effect.

IE, though, reloads the background image everytime it shifts positions, hence the "flicker." So his "hack" works around that... I think it's a pretty cool idea...

well, i agree that the logical place seems to be on the <a>s, however a "list item" is a completely neutral term. it only takes on an identity, or and "id", if you will, based on its content. in that case, the id makes sense on the <li>.

I'm agreeing with you on this one... it seems to me like a matter of personal preference. So, IDs on <li>s it is! Try and stop me!

-Rich