Sexy buttons modified

based on this:
http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html

I made modifications that instead of text u can have image inside button. Sample is made so there can be inserted any image 24 x X pixels.

Works in FF ok does not on IE7(only click at right most part of button works)

What is that I dont see ?. Thanks for help.

here is the link to sample:http://86.61.66.17:8084/#

and css:


a.buttonImg {
background: transparent url('bg_button_a.png') no-repeat scroll top right;
display: block;
float: left;
height: 26px;
padding-right: 18px; /*push span to the right for background width*/
outline: none; /* hide dotted outline in Firefox */
}

a.buttonImg span {
background: transparent url('bg_button_span.png') no-repeat scroll top left;
display: block;
height: 26px;
padding-left:18px;/*make space from right background image*/
}

a.buttonImg span img {
height:auto;
width:auto;
border: 0 none;
alt:"žnj";
}

a.buttonImg:active span img {
position:relative;
top:1px;
left:1px;
}

a.buttonImg:active {
background-position: bottom right;
}

a.buttonImg:active span {
background-position: bottom left;
}

Tried swapping around the span and anchor?

Did that, no effect, now there isn't any response at all anywhere in IE7.

The second button new way --> http://86.61.66.17:8084/#

any other ideas ?

did this test, all works in FF, in IE only on a tag, perhaps this has something to do with problem ?

div.test:active
{
color: red;
}

span.test:active
{
color: red;
}

a.test:active
{
color: red;
}

ok, found the bugger. Is there any way to do something like:


<!--[if IE]><style type="text/css">@import "ie_fixes.css";</style><![endif]-->


inside css file itself, coz I dont fill like copying whole css file just for 1 line change ?

No, you can't write conditional comments inside a CSS file.

you can always filter IE7 in css by using * + html as in * + html a.buttonImg span

and by the way, it gets glitchy when the text size is bumped a few notches in FF.

Vexen, thanks for tip however, can't seem to fit this for what I need:

the css below works in FF, for IE "height: 24px;" should be removed. Any ideas ?

or at least I would have to know what is default span height for IE and how to set it ..


a.buttonImg span {
background: transparent url('../img/button/bg_button_span.png') no-repeat scroll top left;
display: block;
height: 24px;
padding-left:18px;/*make space from right background image*/
}