PDA

View Full Version : Background image of Button capped depending on Text



wagger
Mar 24, 2011, 1:23 PM
Hey,
I have a menu as can be viewed in the attached image.

Item 4 and 5 looks bad since the background-image is capped, and its capped depending on the size of the Text for the button. If I increase the number of characters in the text then the background-image will not be capped.

As can be seen in the image, I have my mouse over one of the Buttons and it is clear that the buttons width is far larger than the width of the background image; button width = 100px and the background image is 48x48px.

Here is the css for the image:


<style type="text/css">
.runoff {
background-image: url("/Resources/runoff.png") !important;
}
</style>


Here is the code for the button:


<ext:Button ID="Button2" Scale="Large" Height="60" Width="100" runat="server" Text="<br><b>SomeText</b>" IconCls="runoff" IconAlign="Top" LabelAlign="Left">
<Listeners>
<Click Handler="addTab(#{TabPanel2}, 'idRunoffs', '/Secure/Views/Runoffs.aspx', 'SomeText');" />
</Listeners>
</ext:Button>

How can I make sure that the image doesnt get capped like this?

2483