SLiding Doors CSS Buttons with three images?

[DarkAngelBGE]

Hi all,

I am currently looking for a method to design link buttons with three images instead of two.

Here are examples for methods with two images:

http://www.filamentgroup.com/lab/buttonElement/
http://www.oscaralexander.com/tutori...-with-css.html

Is it possible to cut off the left corner as well and wrap it in another span? I have tried it, but without much success. The button sometimes breaks in FF depending on its outer containers, floats, etc.

and in IE 6 and 7 it looks weird as well.

Here it is:

HTML:

<a class="button" href="#"><span>some caption</span><span class="btn_right"></span></a>

[css]
.button {
background: transparent url(../img/button_left.png) no-repeat left top;
height: 24px;
padding-top:6px;
}
a.button span.btn_right{
background: transparent url(../img/button_right.png) no-repeat;
height: 50px;
margin-left: 0px!important;
display:inline;
}

a.button span{
background: transparent url(../img/button_middle.png) repeat-x;
padding: 6px 5px;
margin: 0px 0px 0px 8px!important;
color: #fff;
display:inline;
height: 24px;
}
[/css]

Attached are the images I used.

Any help is greatly appreciated!

[feketegy]

You cannot set width to an inline element (span is inline element and a is too)
Maybe set

display:block;

to these elements or use unordered list to build up your menu (UL)

[DarkAngelBGE]

Hrm you mean "height" ? I set no width anywhere, just height.

[DarkAngelBGE]

.button {
height: 24px;
padding-top:6px;
display:block;
}
a.button span.btn_left{
background:transparent url(../img/button_left.png) no-repeat left top;
margin-left: 0px!important;
display:block;
width:8px;
height:24px;
float:left;
}
a.button span.btn_right{
background: transparent url(../img/button_right.png) no-repeat;
margin-left: 0px!important;
display:block;
width:8px;
height:24px;
float:left;
}

a.button span.btn_middle {
background: transparent url(../img/button_middle.png) repeat-x;
padding: 6px 5px;
color: #fff;
float:left;
}



with

<a class="button" href="#"><span class="btn_left"></span><span class="btn_middle">some caption</span><span class="btn_right"></span></a>

seems cool. testing now..