transparent images / search styling

Discussion in 'CSS' started by a!!!!1, May 10, 2008.

  1. #1
    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
     
    a!!!!1, May 10, 2008 IP
  2. Greg-J

    Greg-J I humbly return to you.

    Messages:
    1,844
    Likes Received:
    153
    Best Answers:
    0
    Trophy Points:
    135
    #2
    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.
     
    Greg-J, May 11, 2008 IP
  3. a!!!!1

    a!!!!1 Peon

    Messages:
    346
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    awesome, thanks a lot
     
    a!!!!1, May 11, 2008 IP
  4. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #4
    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.
     
    Stomme poes, May 13, 2008 IP
  5. Greg-J

    Greg-J I humbly return to you.

    Messages:
    1,844
    Likes Received:
    153
    Best Answers:
    0
    Trophy Points:
    135
    #5
    I'm one of those inconsiderate developers who doesn't cater to screen readers I guess...
     
    Greg-J, May 13, 2008 IP
  6. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #6
    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.
     
    Stomme poes, May 14, 2008 IP