link buttons, images disappears with long text

[Hardwarez]

I wanted to list several things in buttons that span the entire frame.  The problem is the image of the button splits when the text is to long and making the image wider just causes the ends of the image to disappear.

 

CSS:

<style type="text/css">
a.squarebutton{
background: transparent url(\'square-blue-left.gif\') no-repeat top left;
display: block;
float: left;
font: normal 14px Arial; /* Change 12px as desired */
line-height: 15px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
height: 23px; /* Height of button background height */
width: 100%;
padding-left: 4px; /* Width of left menu image */
text-decoration: none;
}
a:link.squarebutton, a:visited.squarebutton, a:active.squarebutton{
color: #494949; /*button text color*/
}
a.squarebutton span{
background: transparent url(\'square-blue-right2.gif\') repeat top right;
display: block;
padding: 4px 9px 4px 0; /*Set 9px below to match value of \'padding-left\' value above*/
}
a.squarebutton:hover{ /* Hover state CSS */
background-position: bottom left;
}
a.squarebutton:hover span{ /* Hover state CSS */
background-position: bottom right;
color: black;
}

.buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
overflow: hidden;
width: 100%;
}
</style>

 

PHP:

$temp = 'our cool button that is really a link . blah blah blah bla ect ect ect ect ect ect gfd  g dfg fksdfasdfsdf asdf sd fsd fsd sdf';
echo '
<div class="buttonwrapper">
<a class="squarebutton" href="http://www.google.com"><span>'.$temp.'</span></a>
</div>
<div class="buttonwrapper">
<a class="squarebutton" href="#"><span>Submit</span></a> <a class="squarebutton" href="#" style="margin-left: 6px"><span>Reset</span></a>
</div>';

[haku]

Google 'CSS sliding doors'. That is the technique you want to use to prevent this problem.