Using rollover background image as link

[khizerk]

Hi,

I'm trying to achieve this:

There are three links (no link text, its written on the image itself). I want these three buttons to appear side by side horizontally. Each button will have an hover and active background image. I'm using rollover technique to achieve this.

 

Here's my CSS:

s#overall a{
  display:inline;
  width: 26px;
  height: 26px;
}

s#overall a:hover{
  background-position: -26px 0;
}
s#overall a:active{
  background-position: -52px 0;
}

s#report-icon  {
   background: url('images/icon_post_report.png') 0 0 no-repeat; 
}

s#info-icon  a{
   background: url('images/icon_post_info.png') 0 0 no-repeat; 
}

 

Here's my HTML:

 

The problem is that if I use inline, the images (and the links) don't appear. If I use block, they appear but vertically (due to the line break). The only thing that seemed to be working was inline-block which isn't being supported by IE.

 

Is there any solution?

 

Thank you

[Wickham]

I made an example here:-

 

http://www.wickham43.com/forumposts/khi090412.html

 

which uses your code (slightly adapted) has three-part images for the link, hover and active states.

 

Edit: the above link works using the s attribute but doesn't validate, so this is the same using divs which does validate:-

 

http://www.wickham43.com/forumposts/khi090412-2.html

 

Remember that people with bad eyesight using a screen reader won't have any link text to read, so I believe that you can add a title to the links so that a screen reader will read something and let a blind person know where to click.

Edited April 12, 2009 by Wickham

[khizerk]

Thanks!....saved me from a lot of more trials and errors

[khizerk]

I've one more problem. If there's any thing also, apart from linked images in the table..it all breaks apart. The buttons are laid out vertically

 

Currently I am bypassing this by putting everything else in another table.