开发者

CSS not working on every element

开发者 https://www.devze.com 2023-02-07 03:02 出处:网络
Here\'s my CSS: <style type=\"text/css\"> .leftRightBorder select, .leftRightBorder textarea, .leftRightBorder input[type=text]

Here's my CSS:

<style type="text/css">
    .leftRightBorder select, 
    .leftRightBorder textarea, 
    .leftRightBorder input[type=text] 
    {
        width: 150px;
        margin-bottom: 5px;
    }
</style>

Here's the top portion of my page as an image:

CSS not working on every element

The CSS styles/spaces/lengths (is that a word) everything on the page beautifually, but this top section is still weird, the maturity date two dropdowns, and value date is a little weird too. Here is the ASP for this top section:

<tr id="tr14">
    <td id="td15">
        <%= Html.LabelFor(m => m.MaturityDate) %>
    </td>
    <td id="td16" style="width: 150px;">
        <%= 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: 150px">
        <%= 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>

Why isn't this part being styled effectively?


CSS doesn't work on every input element the same way in every browser. In IE, most of the inputs are still drawn by Windows Forms so they are not quite CSS compliment. But in Chrome and Firefox everything works for the most part, but you may have to tweak the margins and size specifically for the select element.

And if you want to support the Mac, you really need to forget about the sizing, because the Apple OS decides to do it's own thing regardless of settings, sort of the same problem I mentioned above with IE.

Don't become overly anal about this, because at this point in history you can't control every aspect of the input in the same way, and you are going to drive you self crazy if you try to. Things are getting better with the browsers specifically IE 9, but don't hold your breath that they will work how you want.

Note I also have assumed it is in oversight, but leftRightBorder doesn't show up anywhere in the code you posted. I am making the assumption the problem you are posting about isn't as simple as forgetting the class.

0

精彩评论

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

关注公众号