TableTools: Overlapping Buttons

Rockb

Hello, first of all, I'd like to thank you for the great work on this fantastic script. It's really fantastic and I'm greatful to found it ;D BUT: I'm a bit confused, why my TableTools-buttons (pdf, print, csv) are overlapping. Take a look here: http://www.bilder-hochladen.net/files/8j3m-40.jpg I hoped and I thought I could change the "margin-right" somewhere in the tabletools.css (e.g. "button.DTTT_button"), but nothing happend. I can change all the other values like the round corner ("-moz-border-radius" etc.), but the margin-attribute has no effect here. Maybe someone can help me out? The original Page is available at http://radiocharts.rockb

iksela

This comes from your:
[code]
.ui-buttonset .ui-button {
margin-left: 0;
margin-right: -0.3em;
}
[/code]
The last class applied get the prevalence, the margin right is there because in a buttonset, buttons are supposed to be glued together (see http://iksela.tumblr.com/post/2727627360/display-tabletools-buttons-as-jqueryui-buttons-with-an ).

Rockb

Thank you a lot... you are my hero! :-)

BUT now the pagination at the bottom changed, too, (...and the 2nd button is below the first). Which CSS-Class is this, to change only the pdf/cdv/print-button?

iksela

I don't see anything wrong (assuming it's live).
Anyway, you should check firebug for firefox to dwelve into the CSS.

Rockb

I've changed the margin-right: to "0px"

That's the reason, why the pagination is NOW correct... but the buttons have no space.
If I change the value to e.g. 10px, the buttons have space, BUT the pagination is in two lines.

iksela

You need to add a different CSS class for your TT buttons. Use addClass() in "fInit", you can get inspiration from the blog post I posted earlier.