CODEWITHSUNDEEP
cssbuttonsprite
Craig
Craig

Reputation: 1345

End Of CSS Sprite Button Dropping Off Inside Table

I'm creating a CSS button and it is working ALMOST perfectly. The problem is that when the button is larger than its allotted space, its end drops off to the next line. It also extends the page width to fit it properly, but then the end is on the next line >=(. Extending the page is perfectly fine, but the button should be whole.

Here is my example page... http://www.lolstrategies.com/test/button_sample.html

It uses two tables and the button needs to also be in a table.

My current css uses float: left to push the images together as you can see by viewing the source. I'm hoping that it doesn't all need to be completely redone without float but I am willing to do so if that's the only answer.

The image I'm using is this:

enter image description here

Upvotes: 0

Views: 135

Answers (1)

tw16
tw16

Reputation: 29605

You don't have to completely redo it. Just a couple of small changes. Live example: http://jsfiddle.net/tw16/Pwmcn/

.buttonLarge {
    height:22px;
    margin: 0 22px 0 12px; /* add this */
}
.primaryLargeButtonEnd {
    width: 12px;
    height:12px;  
    padding: 0px 0px 0px 5px;
    display: inline-block; /* add this instead of float:left */
    background: transparent url('./composite__V153767378_.png') no-repeat left -75px;
}

Upvotes: 1

Related Questions