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
