Button spacing (margin and padding) comes up incorrectly

When I set up TinyMCE (tinymce_2_1_3) the buttons on the button bar come up incorrectly spaced. I am attaching an image of the same

Wysiwig_button_size_issue.png

I then used firebug to find the cause of the problem. I set the following properties in firebug

#primary img {layout.css} (line 273)
margin:0 0 0 0;
padding:4px;

a.mceButtonDisabled img, a.mceButtonNormal img, a.mceButtonSelected img {editor_ui.css} (line 29)
cursor:default;
height:12px;
margin-left:1px;
margin-top:1px;
width:12px;
}

HTML Code for buttons with dropdown option. Only one button is shown as example

<span class="mceMenuButton" id="mce_editor_0_forecolor"><a target="_self" class="mceTiledButton mceMenuButtonNormal" onmousedown="return false;" onclick="tinyMCE.execInstanceCommand('mce_editor_0','forecolor',true);return false;" href="javascript:tinyMCE.execInstanceCommand('mce_editor_0','forecolor',true);"><img title="Select text color" style="width: 12px; height: 12px; background-position: -180px 0pt;" src="/sites/all/modules/wysiwyg/tinymce/jscripts/tiny_mce/themes/advanced/images/spacer.gif"/></a><a onmousedown="return false;" onclick="tinyMCE.execInstanceCommand('mce_editor_0','forecolorMenu');return false;" href="javascript:tinyMCE.execInstanceCommand('mce_editor_0','forecolorMenu');"><img class="mceMenuButton" title="Select text color" src="/sites/all/modules/wysiwyg/tinymce/jscripts/tiny_mce/themes/advanced/images/button_menu.gif"/></a></span>

It is messy. I copied it from firebug. The relevant changes are

#primary img {layout.css} (line 273)
margin:0 15px 0 0; -> margin:0 0 0 0;

a.mceButtonDisabled img, a.mceButtonNormal img, a.mceButtonSelected img {editor_ui.css} (line 29)
height:20px; -> height:12px;
width:20px; -> width:12px;

style="width: 20px; height: 20px; background-position: -180px 0pt;"  -> style="width: 12px; height: 12px; background-position: -180px 0pt;" 

Once I made these changes the layout changed as follows
Wysiwig_button_size_issue_after_css_change.png

I could not figure out why the buttons that are supposed to be in the first row, when overflowed floats to the right instead of to the left. I had turned all button options ON in the WYSIWIG admin settings to test how it works.

The editor_ui.css and the inline HTML changes are from TinyMCE right? Is this because of the 2.x version of TinyMCE? I used 2.x because that was mentioned in the WYSIWIG home page that Image Assist works only with 2.x version.

I will try with TinyMCE 3.x and report back