Dropdownlist text in ASP.NET 4.0 being coded using both Chrome and Firefox browsers

My website was built using Visual Studio Pro 2010 with a back-end on Windows Server 2008 R2, SQL Server 2008 R2, and IIS 7. The .NET Framework version used is 4.0.

The Dropdownlist on my site works fine in Internet Explorer, but it displays strange characters in Chrome and Firefox. It seems like the output is being encoded incorrectly. I tried implementing a code to fix this issue, but it doesn't seem to be working as expected. See the code snippet below for reference.

I also attempted to address the problem by configuring legacy settings. As a result, I added the following line to the web.config file:

<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

The problem lies within the CSS code. Open the file /css/normalize.css and find the following section. You need to either delete the font family declaration or eliminate the select element from the list.

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

Furthermore, in the file base.css, look for this peculiar font setting in the mentioned line:

/* 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;
    }

The presence of the font name MuseoSans500Regular in the dropdown menu is causing an issue with the font design on your website. You have the option to change the font family or remove the select element from these CSS lines. Ultimately, the decision is yours, but addressing this issue will resolve the problem.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a method to instruct angular-cli (for angular 2) to produce a minified version of css files?

When running "ng serve" in angular-cli, the generated css is not minified as expected. Is there a specific setting to configure in angular-cli-build or an additional plugin to install? This is the content of my angular-cli-build.js file: var Angular2App ...

An error occurred while trying to retrieve the user information using SqlMembershipProvider:

Currently, I am working on implementing authorization for a web application using the ASP.NET SqlMembershipProvider. However, I have encountered a strange issue where it randomly throws an invalid cast exception when calling the GetUser method. Despite be ...

React-app size has grown larger post-deployment

I recently created my second app clone using React. I have noticed that after deployment, the size of the app increases. Everything looks normal on localhost:3000, but it significantly grows once deployed. Any assistance in resolving this issue would be gr ...

Tips for vertically aligning values in a Bootstrap table

Currently, I am working on generating reports for an NGO that conducts surveys in schools. Once the reports are created, they need to be sent out in a specific format. While a simple table structure would suffice, I have decided to use Bootstrap classes to ...

What are some strategies for creating a distinctive list design using markup?

Possible Duplicate: Achieving sub numbering on ol items html I am attempting to create a format similar to the one below using an unordered list: 1. Title Objective: some text here... 1.1 option1 1.2 option2 1.3 option3 2. Title ...

The document scales down automatically as I decrease the size of the window, but does not adjust when I switch to a mobile viewport

I've been working on developing a web app with a focus on mobile-first design. When I scale down my Chrome window, everything looks responsive and functions well, adjusting objects to fit the smaller screen size. However, I noticed that when I switch ...

Modify text within the span element that corresponds to the parent's href attribute

I need to modify the text within a span element, but I'm having trouble targeting it by class or ID since they share the same classes. The only difference I can see is the href attribute of the parent link. Is there a way for me to target this specifi ...

The buttons are off-center on the page when the screen width is below 1199px, they should be centered instead of aligned to the

Using Bootstrap 5, I've successfully created a layout with aligned rows of buttons at 1200px and above. However, an issue arises at the XL breakpoint (1199px) where the buttons align to the left of the container instead of being centered. You can vie ...

How can I customize the color of the title and property value in Handlebars?

Here is the list I am working with: <li>Equipment Area:{{equipment_area}}</li> <li>Equipment Type: {{equipment_type}}</li> <li>Manufacturer: {{manufacturer}}</li> <li>Model Number: {{model_number}}</li> < ...

ASP.NET Web API restricts the use of extended base64 URIs

Recently, I encountered an issue while trying to handle a lengthy base64 string from my Android Client in order to decode it into a bitmap within my Web API Project for uploading as an image to Azure BLOB Storage. Unfortunately, the project kept returning ...

Align the content at the center within a Bulma column

I am working with multiple columns, each column containing a circle in the CSS depicted as a font awesome icon centered within it. However, I am facing an issue where the circle remains aligned to the left while the text itself gets centered. HTML <di ...

Issues with CSS in ASP.NET MVC

Calling all CSS experts! I need some guidance on applying my custom stylesheet to a project in MVC. It seems like I'm doing everything right, but nothing is changing. Here's what I have in index.html: <link rel="stylesheet" href="~/Content/m ...

Embedding the scrollbar within the div container

I'm having trouble placing my vertical scrollbar inside my div and adjusting its position. To streamline the code, I have extracted a portion below: .toprightcontrols { margin: 0 3% 0 0; display: flex; position: absolute; justif ...

The art of breathing life into UpdatePanels

Although I have experimented with the UpdatePanelAnimationExtender from the Ajax Control Toolkit, my main issue with it is that it does not wait for the animation to finish before loading new content. What I aspire to achieve is: Commence asynchronous r ...

The integration of Flask, PyCharm, and CSS files into HTML is seamless and long

Currently, I am utilizing PyCharm with Flask. In my project, I have both an HTML file and a CSS file. Initially, everything was working perfectly fine after writing the code and launching it. However, whenever I make changes to the CSS file, the modificat ...

ASP.NET Core - Populating views with data gradually

I'm currently working on a .Net Core application and I have reached a point in my code where I need to dynamically add data based on user interactions. Initially, I have a table displaying elements, and when a user clicks on any element, I need to ret ...

Tips for positioning a 404 message at the center of a webpage

Struggling with centering a 404 error message on your Bootstrap 5 page without messing up the footer layout? When the viewport is small, the 404 message may end up getting covered by the footer. Feel free to check out the code snippet in full view to see ...

What is the process for connecting a gridview to a collection of objects?

Hey there, I have a quick question. I'm facing an issue while trying to populate a gridview with a list of objects - it's showing no data. Any idea why? Additionally, I want to save user input whenever they click the add button. Do you have any ...

Choose just one column within an HTML table

Is there a way to easily select the text of a single column from an HTML table using just the mouse pointer? Imagine you have a table that looks something like this: https://i.sstatic.net/n3lZR.png When trying to select only the text in the Lastname col ...

Even after setting a value to an HTML input field from the C# code behind, any modifications to the text are not being displayed

My form consists of input fields with the attributes type="text" and runat="server" to enable the code behind to access it. Users can input data and later edit the same data if selected from a list. However, after populating the form for editing and making ...