I recently had to customize the jqueryui modal dialog in order to meet the standards set by my company. Currently, I am facing a cross-browser issue with the float and width of the input labels. You can view the sample website here:
http://inetwebdesign.com/PartnerPortal/update-my-company-information2.html
This is the style I'm currently using:
<style>
div#dialog-form label{
float:left;vertical-align:top;
}
div#dialog-form input{
float:right;
width:270px;
vertical-align:top;
}
div#dialog-form select{
float:right;
}
div#dialog-form select option{
float:right;
}
</style>
In Firefox, the input boxes display correctly but in IE9 they are slightly longer, while in Chrome they are shorter by about 3 pixels. In Safari, the input boxes appear to be more than 10 pixels longer. To see this in action, click on "new address" next to the last textarea box and the jqueryui modal dialog box will pop up.
Is there any conditional code available to address these inconsistencies?