How can I make my css sprite back button validate through W3C? Here is my code to call the button.
<a href="#" onclick="history.go(-1)"><div class="icon-backbtn"></div></a>
Asked
Active
Viewed 732 times
3 Answers
1
I ended up using the below code to pass W3C validation and still using CSS Sprites.
<a id="icon-backbtn" title="Back" href="#" onclick="history.go(-1)"></a>
yaksushi
- 63
- 1
- 11
0
You shouldn't have a <div> as a child of an <a>, use an <img src="..."/> instead.
EDIT:
If you have a spritesheet, then simply add display:block; for the anchor and it will behave just like a div.
Claudiu
- 3,261
- 1
- 15
- 27
-
can't use img src= because I'm using css sprites. – yaksushi Apr 28 '12 at 02:22
-
Updated my reply to provide a solution – Claudiu Apr 28 '12 at 04:00
-
could you give me an example about what your talking about? – yaksushi Apr 29 '12 at 22:10
-
will render a black, 10px square link. – Claudiu Apr 30 '12 at 00:53
0
Since you are using a CSS Sprite, I would suggest placing the <a> inside the <div> (proper way to do it) and add some css:
HTML
<div class="icon-backbtn">
<a href="javascript:history.go(-1)" title="Go Back"></a>
</div>
CSS
.icon-backbtn a {
display:block;
cursor:pointer;
text-decoration:none;
text-indent:-9999px;
}
The CSS sets the link to be a block element, thus occupying the width and height of the div. The remaining styles are to prevent the regular link behavior for texts, since you are using an image.
Zuul
- 16,217
- 6
- 61
- 88
-
Just updated the answer to be have a clickable HREF by moving the javascript code from the onclick to the href. – Zuul Apr 28 '12 at 12:11
-
Added the new javascript version and it's still not clickable... Frustrating. – yaksushi Apr 29 '12 at 22:11