Fixing my UI problems with maybe CSS?

Question

So I have a lot of UI problems, as you can see here in this snapshot:

Fields are all over the place, spacing BETWEEN fields is bad, length of the fields don't line up with one another. Is there CSS I could place on the page that will at least fix the control length, spacing, and those sort of things so the page is at least better to look at? And what would the CSS be?

I'm bad at this stuff =/ Thanks!

EDIT:

For example, the section titled "Input your Economics details" is using this markup

<div id="economicDetails">
                <table id="table4" cellpadding="4" cellspacing="0">
                    <tr id="tr5">
                        <td id="td6">
                            &nbsp;
                        </td>
                        <td id="td7" style="text-align: right;">
                            Indication Nickname
                        </td>
                        <td id="td8" colspan="3">
                            <%= Html.TextBoxFor(m => m.STPData.ProjectName, new { @class = "economicTextBox", propertyName = "STPData.ProjectName", onchange = "UpdateField(this);" })%>
                        </td>
                    </tr>
                    <tr id="tr9">
                        <td id="td10" style="width: 80px">
                            <%= Html.LabelFor(m => m.EffectiveDate) %>
                        </td>
                        <td id="td11">
                            <%= Html.TextBox("EffectiveDate", Model.EffectiveDate.HasValue ? Model.EffectiveDate.Value.ToString("dd-MMM-yyyy") : "", new { @class = "economicTextBox", propertyName = "EffectiveDate", onchange = "parseAndSetDt(this); ", dataType = "Date" })%>
                        </td>
                        <td id="td12">
                            <%= Html.LabelFor(m => m.Notional) %>
                        </td>
                        <td id="td13" style="width: 350px">
                            <span>
                                <%= Html.DropDownListFor(m =>
                                    m.ActiveProduct.CurrencyID,
                                                            DropDownData.CurrencyList(), "",
                                                            new { @class = "economicTextBox", propertyName = "ActiveProduct.CurrencyID", onchange = "UpdateField(this);" })%>
                            </span>
                            <%= Html.TextBoxFor(m => m.Notional, new { @class = "economicTextBox", propertyName = "Notional", onchange = "FormatAsMoney(this, 10000000000, true); UpdateField(this);" })%>
                        </td>
                    </tr>
                    <tr id="tr14">
                        <td id="td15">
                            <%= Html.LabelFor(m => m.MaturityDate) %>
                        </td>
                        <td id="td16">
                            <%= Html.TextBox("MaturityDate", Model.MaturityDate.HasValue ? Model.MaturityDate.Value.ToString("dd-MMM-yyyy") : "", new { @class = "economicTextBox", propertyName = "MaturityDate", onchange = "parseAndSetDt(this); ", dataType = "Date" })%>
                            <%= Html.DropDownListFor(m => m.AmortizationComponent.MaturityBusinessDayConvention, DropDownData.BusinessDayConventionList(), "", new { propertyName = "AmortizationComponent.MaturityBusinessDayConvention", onchange = "UpdateField(this);" })%>
                        </td>
                        <td id="td17" style="width: 76px">
                            Value Date
                        </td>
                        <td id="td18" style="width: 218px">
                            <%= Html.TextBoxWithPermission("RateTimeStamp", Model.RateTimeStamp.HasValue ? Model.RateTimeStamp.Value.ToString("dd-MMM-yyyy") : "", new string[] { PERMISSIONS.hasICAdvanced }, new { @class = "economicTextBox", propertyName = "RateTimeStamp", onchange = "parseAndSetDt(this);", dataType = "Date" })%>
                            <br />
                            <%= Html.CheckBoxForWithPermission(m => m.Current, new string[] { PERMISSIONS.hasICAdvanced }, new { @class = "economicTextBox", propertyName = "Current", onchange = "UseCurrent();UpdateField(this);" })%>
                            Current
                        </td>
                    </tr>
                    <tr id="tr19">
                        <td id="td20">
                            Holiday Cities
                        </td>
                        <td id="td21">
                            <table id="table22">
                                <tr id="tr23">
                                    <td id="td24">
                                        <div id="holidayCityLabel" style="color: Blue; text-decoration: underline; cursor: pointer" />         
                                        <div id="holidayCityList" style="overflow: auto" class="holidayCityList">
                                <%foreach (SelectListItem holiday in DropDownData.HolidayDays())
                                  { %>
                                <% bool holidaySelected = Model.Trx.TransactionHolidayCityCollection.Find(item => item.IsDeleted == false && item.HolidayCityID.Value.ToString() == holiday.Value) != null; %>
                                <input type="checkbox" name="Trx.TransactionHolidayCityCollection" id="Holiday<%= holiday.Value %>"
                                    value="<%=holiday.Value%>" <%= holidaySelected == false ? "" : "checked=checked" %> />
                                <label id="HolidayLabel<%= holiday.Value %>" for="Holiday<%=holiday.Value%>">
                                    <%=holiday.Text%></label>
                                <br />
                                <%} %>
                            </div>
                                    </td>
                                    <td id="td25">
                                     <span validationFor="holidayCity" style='display:none'>
                                         <img class='validation' src='<%= VirtualPathUtility.ToAbsolute("~/img/exclamation.gif")%>' />
                                      </span>
                                    </td>
                                </tr>
                            </table>


                        </td>
                    </tr>
                </table>
                <div id="div26" style="height: 10px" />
                <table id="table27" cellpadding="2" cellspacing="0">
                    <tr id="tr28">
                        <td id="td29" style="width: 90px;">
                            &nbsp;
                        </td>
                        <td id="td30" style="width: 225px;" class="leftRightBorder componentHeader">
                            Fixed Component
                        </td>
                        <td id="td31" style="width: 15px;">
                            &nbsp;
                        </td>
                        <td id="td32" style="width: 100px;">
                            &nbsp;
                        </td>
                        <td id="td33" style="width: 350px;" class="leftRightBorder componentHeader">
                            Floating Component
                        </td>
                    </tr>
                    <tr id="tr34">
                        <td id="td35">
                            Fixed Rate
                        </td>
                        <td id="td36" class="leftRightBorder">
                            <div id="div37" class="componentCell" style="font-style: italic">
                                Calculated
                            </div>
                        </td>
                        <td id="td38">
                            &nbsp;
                        </td>
                        <td id="td39">
                            Index
                        </td>
                        <td id="td40" class="leftRightBorder">
                            <table id="table41">
                                <tr id="tr42">
                                    <td id="td43">
                                        <%= Html.DropDownListFor(m => m.FloatingComponent.IndexID, DropDownData.IndexDropList(), "",
                                                                                                                        new { propertyName = "FloatingComponent.IndexID", onchange = "UpdateField(this, false); FillIndexDescription();UpdateResetEnabled();" })%>
                                    </td>
                                    <td id="td44">
                                    <span id="indexDetailsDescription" propertyName="IndexOptions" style="padding-left: 15px; color: Blue; text-decoration: underline;
                                        cursor: pointer" />
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr id="tr45">
                        <td id="td46">
                            &nbsp;
                        </td>
                        <td id="td47" class="leftRightBorder">
                            &nbsp;
                        </td>
                        <td id="td48">
                            &nbsp;
                        </td>
                        <td id="td49">
                            Reset Day
                        </td>
                        <td id="td50" class="leftRightBorder">
                            <span id="resetLabel" propertyName="ResetLabel" class="componentCell" style="color: Blue; text-decoration: underline;
                                cursor: pointer" />
                        </td>
                    </tr>
                    <tr id="tr51">
                        <td id="td52">
                            &nbsp;
                        </td>
                        <td id="td53" class="leftRightBorder">
                            &nbsp;
                        </td>
                        <td id="td54">
                            &nbsp;
                        </td>
                        <td id="td55">
                            Reset Convention
                        </td>
                        <td id="td56" class="leftRightBorder">
                            <%= Html.DropDownListFor(m => m.ResetDayComponent.ResetBusinessDayConvention, DropDownData.BusinessDayConventionList(), "", new { propertyName = "ResetDayComponent.ResetBusinessDayConvention", onchange = "UpdateField(this);" })%>
                        </td>
                    </tr>
                    <tr id="tr57">
                        <td id="td58">
                            Frequency
                        </td>
                        <td id="td59" class="leftRightBorder">
                            <%= Html.DropDownListFor(m => m.FixedComponent.PaymentFrequency, DropDownData.FrequencyDropList(), "", new { propertyName = "FixedComponent.PaymentFrequency",  onchange = "UpdateField(this);" })%>
                        </td>
                        <td id="td60" />
                        <td id="td61">
                            Frequency
                        </td>
                        <td id="td62" class="leftRightBorder">
                            <%= Html.DropDownListFor(m => m.FloatingComponent.PaymentFrequency, DropDownData.FrequencyDropList(), "", new { propertyName = "FloatingComponent.PaymentFrequency", onchange = "UpdateField(this);" })%>
                        </td>
                    </tr>
                    <tr id="tr63">
                        <td id="td64">
                            Payment Day
                        </td>
                        <td id="td65" class="leftRightBorder">
                            <%= Html.DropDownListFor(m => m.FixedComponent.PaymentDay, DropDownData.DaysOfMonthList(), "", new { propertyName = "FixedComponent.PaymentDay", onchange = "UpdateField(this);" })%>
                            <%= Html.DropDownListFor(m => m.FixedComponent.PaymentBusinessDayConvention, DropDownData.BusinessDayConventionList(), "", new { propertyName = "FixedComponent.PaymentBusinessDayConvention", onchange = "UpdateField(this);" })%>
                        </td>
                        <td id="td66" />
                        <td id="td67">
                            Payment Day
                        </td>
                        <td id="td68" class="leftRightBorder">
                            <%= Html.DropDownListFor(m => m.FloatingComponent.PaymentDay, DropDownData.DaysOfMonthList(), "", new { propertyName = "FloatingComponent.PaymentDay", onchange = "UpdateField(this);", disabled="disabled" })%>
                            <%= Html.DropDownListFor(m => m.FloatingComponent.PaymentBusinessDayConvention, DropDownData.BusinessDayConventionList(), "", new { propertyName = "FloatingComponent.PaymentBusinessDayConvention", onchange = "UpdateField(this);", disabled="disabled" })%>
                        </td>
                    </tr>
                    <tr id="tr69">
                        <td id="td70">
                            Roll Day
                        </td>
                        <td id="td71" class="leftRightBorder">
                            <%= Html.DropDownListFor(m => m.FixedComponent.RollDay, DropDownData.DaysOfMonthList(), "", new { propertyName = "FixedComponent.RollDay", onchange = "UpdateField(this);" })%>
                            <%= Html.DropDownListFor(m => m.FixedComponent.RollBusinessDayConvention, DropDownData.BusinessDayConventionList(), "", new { propertyName = "FixedComponent.RollBusinessDayConvention", onchange = "UpdateField(this);" })%>
                        </td>
                        <td id="td72" />
                        <td id="td73">
                            Roll Day
                        </td>
                        <td id="td74" class="leftRightBorder">
                            <%= Html.DropDownListFor(m => m.FloatingComponent.RollDay, DropDownData.DaysOfMonthList(), "", new { propertyName = "FloatingComponent.RollDay", onchange = "UpdateField(this);", disabled = "disabled" })%>
                            <%= Html.DropDownListFor(m => m.FloatingComponent.RollBusinessDayConvention, DropDownData.BusinessDayConventionList(), "", new { propertyName = "FloatingComponent.RollBusinessDayConvention", onchange = "UpdateField(this);" })%>
                        </td>
                    </tr>
                    <tr id="tr75">
                        <td id="td76">
                            First Roll Date
                        </td>
                        <td id="td77" class="leftRightBorder">
                            <%= Html.TextBox("FixedComponent_FirstRollDate", Model.FixedComponent.FirstRollDate.HasValue ? Model.FixedComponent.FirstRollDate.Value.ToString("dd-MMM-yyyy") : "", new { @class = "economicTextBox", propertyName = "FixedComponent.FirstRollDate", onchange = "parseAndSetDt(this); ", dataType = "Date" })%>
                        </td>
                        <td id="td78" />
                        <td id="td79">
                            First Roll Date
                        </td>
                        <td id="td80" class="leftRightBorder">
                            <%= Html.TextBox("FloatingComponent_FirstRollDate", Model.FloatingComponent.FirstRollDate.HasValue ? Model.FloatingComponent.FirstRollDate.Value.ToString("dd-MMM-yyyy") : "", new { @class = "economicTextBox", propertyName = "FloatingComponent.FirstRollDate", onchange = "parseAndSetDt(this); ", dataType = "Date" })%>
                        </td>
                    </tr>
                    <tr id="tr81">
                        <td id="td82">
                            Long Last Stub
                        </td>
                        <td id="td83" class="leftRightBorder">
                            <%= Html.CheckBoxFor(m => Model.LongLastStub, new { propertyName = "LongLastStub", onchange = "UpdateField(this);" })%>
                        </td>
                        <td id="td84" colspan="2" />
                        <td id="td85" class="leftRightBorder">
                            &nbsp;
                        </td>
                    </tr>
                    <tr id="tr86">
                        <td id="td87">
                            Day Count
                        </td>
                        <td id="td88" class="leftRightBorder bottomBorder">
                            <%= Html.DropDownListFor(m => m.FixedComponent.DayCountConvention, DropDownData.DayCountDropList(), "", new { propertyName = "FixedComponent.DayCountConvention", onchange = "UpdateField(this);" })%>
                        </td>
                        <td id="td89" />
                        <td id="td90">
                            Day Count
                        </td>
                        <td id="td91" class="leftRightBorder bottomBorder">
                            <%= Html.DropDownListFor(m => m.FloatingComponent.DayCountConvention, DropDownData.DayCountDropList(), "", new { propertyName = "FloatingComponent.DayCountConvention", onchange = "UpdateField(this);" })%>
                        </td>
                    </tr>
                </table>
            </div>
            </div>

The other parts are basically in the same format. Thanks!

Answer 1

This is what I would do.

• Remove all the inline CSS ie style”=width: 80px” and classes like LeftRightBorder
• Remove all the tables
• Change the DIV economicDetails to “Fieldset”. Actually I would add one Fieldset to each group. So maybe 3 or 4 different Fieldsets
• Now apply clean CSS for all your labels, inputs, checkboxes etc.
• Apply CSS to your Fieldset to have them align nicely.