Skip to main content

Yahoo button expanding when placed in an HTML table

1 reply [Last post]
Joined: 2008-08-31
Points: 0

To manage the positions of some jMaki Yahoo button controls I have placed them in a table with invisible borders. This works well on Firefox but on IE7 the buttons expand in size and I have been unable to find a way to control the size. The table row increases in height and the button's cell gets wider to accomodate the bigger button. Whatever I set the button, table or cell size to the buttons still expand to be much bigger. I have tried putting a division in the cell and controlling the size that way, but still get the same problem. I am guessing that I must be missing a default somewhere.

Does anybody know how to fix this, or can somebody suggest a better way to manage the positions of the buttons (i.e. the distance from the side of the container, the spacing between the controls and their size).

Any help would be greatly appreciated.


Reply viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
Joined: 2003-09-14
Points: 0

The yahoo button size is based on on the font-size of the container. By default the yahoo button style class (.yui-button) uses a font size of 93% with a padding of 0 10px;. This will change the size of the button based on the font size. If you want to change the size of the button you can change font size in the container which will make the button change to 93% of the container font size. Another way is to add a custom component.css file to the widget and override the yui-button style. However doing this will make the change global. Let me know if you need additional help.