Question

I have an asp.net site which was developed with Visual Studio Pro 2010 with a back-end of Windows Server 2008 R2 with SQL server 2008 R2 and II7 with Framework is 4.0

My Dropdownlist is working good only on IE, but not on chrome and firefox. The items are being displayed with weird characters, I am guessing that the output is encoded, so I just implemented a code to solve the issue but it seems that I am doing something wrong. See below by code.

Also I have tried with the legacy configuration just in case that is causing the problem, So I decided to put the following line on my web.config file.

web.config

<pages controlRenderingCompatibilityVersion="3.5" clientIDMode="AutoID"/>

ASP.NET HTML TAG

<asp:DropDownList ID="JobCategoryList" runat="server"  OnDataBound="SortHTML">
    </asp:DropDownList>

Code Behind

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
        {
            DisplayCategories();
        }  
}

private void DisplayCategories()
    {
        _objCategories.getJobCategories();
        JobCategoryList.DataSource =         _objCategories.JobCategoriesDS.Tables["GetJobCategories"];
        JobCategoryList.DataTextField = "CategoryName";
        JobCategoryList.DataValueField = "Id";
        JobCategoryList.DataBind();
    }

protected void SortHTML(object sender, EventArgs e)
    {
        foreach (ListItem item in ((DropDownList)sender).Items)
        {
            item.Text = Server.HtmlDecode(item.Text);
        }
    }

Answer 1

This is a css issue. In the /css/normalize.css locate this line, and remove ether the font family, ether the select from the list.

button,
input,
select,
textarea {
    font-family: inherit; /* 1 */ <--------- remove it
    font-size: 100%; /* 2 */
    margin: 0; /* 3 */
}

Also remove from base.css this wired fonts from this line also

/* Form defaults */
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select { 
    border: 1px solid #ccc;
    padding: 6px 4px;
    outline: none;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    font-family: 'MuseoSans500Regular', Arial, sans-serif; <-------- remove it
    color: #777;
    margin: 0;
    width: 210px;
    max-width: 100%;
    display: block;
    background: #fff;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    }

You have place on drop down list this MuseoSans500Regular font name and this is made this wired bad design of the fonts.

You can ether change the font family, ether remove the select from this css lines, its up to you, but this is the issue.