Question

I use Asp.NET Mvc 3 for creating web page and so I detect that my comboboxes(html select-option tags) are different in Firefox and other browsers(Chrome and IE).

I try to manually add height to my dropdownlist, but it have same effect.

Here is some part of my code

<div id="filter-box" >
  <div id="car" >
    <p><label>@ViewResources.TuningStrings.GalleryFilterManufacturer</label></p>
    <p>
        @Html.DropDownListFor(m =>m.CarName,new List<SelectListItem>(), new{id="carnames"})
    </p>
   </div>
   <div id="model">
    <p>
        <label>@ViewResources.TuningStrings.GalleryFilterModel</label>
    </p>
    <p>
        @Html.DropDownListFor(m => m.ModelName, new List<SelectListItem>(), new { id = "models"})
    </p>
    </div>
    <div id="year">
    <p>
        <label>@ViewResources.TuningStrings.GalleryFilterIssueYear</label>
    </p>
    <p>
        @Html.DropDownListFor(m => m.Year, new List<SelectListItem>(), new { id = "years" })
    </p>
    </div>

    </div>

So, it’s annoying that my filter-button has different position relative to my dropdownlists div.
Where is mistake?

Answer 1

HTML Selects are very varried between browsers in terms of size. This is mainly due to the way they look being different between each other. That is one tag that even with resets is hard to get exact cross browser.