Padding in Firefox 1px short or IE 1px over

[faesson]

I am having a problem with the below html code when using an image the different is 1px; to short in Firefox, it is ok in IE9, Chrome Opera, it just Firefox.I have tried removing the image and it all lines up ok.See under code for screenshots of IE and Firefox:Here is the html code:XXX\[code\] <div style="background:url(images/package_bg.gif) repeat-x; border-color: #ccc; float: left; width: 20px; padding-top: 4px; padding-bottom: 2px; padding-left: 5px; border-style: solid; border-right-color: #FFFFFF; border-width: 1px;"><img src="http://stackoverflow.com/questions/14586031/images/info.png" onmouseover="site.showTooltip(this,'xxx');" onmouseout="site.hideTooltip('xxx');"></div> <div style="background:url(images/package_bg.gif) repeat-x; border-color: #ccc; float: left; width: 173px; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; border-style: solid; border-right-color: #FFFFFF; border-width: 1px; text-align: center;">xxx</div> <div style="background:url(images/package_bg.gif) repeat-x; border-color: #ccc; float: left; width: 173px; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; border-style: solid; border-right-color: #FFFFFF; border-width: 1px; text-align: center;">xxx</div> <div style="background:url(images/package_bg.gif) repeat-x; border-color: #ccc; float: left; width: 173px; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; border-style: solid; border-width: 1px; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; text-align: center;">xxx</div> <div style="clear: both; padding-bottom: 0px;"> </div>\[/code\]Firefox: http://www.cbg.me.uk/html/firefox.jpgIE: http://www.cbg.me.uk/html/ie.jpgI am not sure how to fix this, as if I add the 1px Firefox is ok, but IE, Chrome and Opera is 1px over.Thanks