开发者

CSS to regulate spacing within table cells and entire page as one

So I have CSS to regulate the size of all the input types on the page. However I still notice some not being regulated in terms of length. The CSS I am usin开发者_如何学Pythong is this:

.leftRightBorder select, 
.leftRightBorder textarea, 
.leftRightBorder input[type=text] 
{
    width: 150px; 
}

Here is a picture of the page using the above CSS:

CSS to regulate spacing within table cells and entire page as one

As you can see there are still some minor length issues. But the main question I have is, the 'Payment Day' and 'Roll Day' fields on each component are within the same table cell so even if I put a

between them the spacing doesn't equal the vertical spacing between everything else on the page. How do I regular vertical spacing between everything on the page?

EDIT:

Here is the ASP.NET Code:

<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>

I want spacing BETWEEN the HTML Helpers to equal the spacing between everything else on the page. Hope this helps.


Try adjusting the margin instead of padding. input{margin-bottom: 5px;} padding is inside the border, margin is outside the border.


It be helpful if you could post the html for this. One approach you could use is to add padding to the fields. What is happening is that you have an invisible table border creating your spacing between all of your other fields (I think). Then when you have 2 form fields in the same table field you don't have the border.

Easiest solution would be to make them separate fields. You can make your "Roll Day" field rowspan="2" if you need it to appear floating between the 2 fields. Alternatively you could add a line to your css like:

input{margin-bottom: 2px;}

That would, of course, affect any input and probably isn't the best route, though.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜