i was wondering if there is a way to put a fully transparent (invisible) image and position it in a set location? i want to put it over an element of my background image and make it into a link also, i'm trying to style my search box and submit button but its not doing anything. i've written pages in html and thrown the css in the header and it works fine, but now im trying to implement it into a blog with a separate stylesheet and it doesnt work
There's an easy way of doing this, yes. <style type="text/css"> .thisLink{ display:block; height:25px; width:100px; background:url(image.gif) 0 0 no-repeat; } .thisLink span{ display:none; } </style> <a href="#link" class="thisLink"><span>some anchor text</span></a> Code (markup): Adjust the code accordingly.
Instead of display: none, I'd move with negative left margin or negative text indent the span off-screen. I dunno who thought this was a great idea to do with screen readers, but they obey display: none. Why??? I dunno. Maybe a bug, but JAWS and WindowEyes and others will honour that, meaning they'll never see the text. Offscreen though, they will. I can only hope that this extremely important issue with popular screen readers gets fixed. Because otherwise display: none would be fine.
Lawlz, you wouldn't be the only one... I started with display: none as well, til I got bitched out : ) But since it's CSS, I don't think the screen readers should be paying attn to display: none or display: hidden anyway. Or any other css styles.