Issues with RadioButtonList functionality in Internet Explorer

I have a selection of options in a RadioButtonList:

<p>
    <label for="rblIAm">I identify as</label>
    <asp:RadioButtonList ID="rblIAm" ValidationGroup="RegForm" runat="server">
        <asp:ListItem Text="Gay" Value="Gay"></asp:ListItem>
        <asp:ListItem Text="Bisexual" Value="Bisexual"></asp:ListItem>
        <asp:ListItem Text="Straight" Value="Straight"></asp:ListItem>
    </asp:RadioButtonList>
</p>

Here is the CSS style being applied:

label {
    float: left;
    width: 10em;
    font-size: 90.9%;
    padding-left: 1em;
}

input {
    background-color: #000;
    border: 1px solid #fff;
    color: #fff;
    font-size: 90.9%;
    height: 20px;
    clear: right;
}

input[type=radio] {
    height: 11px;
    border: none;
    border-color: transparent;
}

The display appears correctly in Chrome, but not in IE. Any insights on why and how to fix it would be greatly appreciated!

Thank you.

Answer №1

Experiment with using CSS to style input and labels with "display:inline-block"

Answer №2

I must admit that I got frustrated and ended up converting it into a dropdown list. It truly annoys me that IE/Chrome/FF/Safari/Opera can't get their act together.

Answer №3

After streamlining the code and implementing clearer classes, the website now functions smoothly across all browsers. Check out the updated CSS below:

fieldset

{ margin: 1em 0; padding: 1em; border: 0px solid #ccc; background: #000; }

legend { font-weight: bold; text-transform: uppercase; }

label.label { display: block; float: left; width: 10em; }

textarea { width: 157px; height: 125px; background-color: #000; border: 1px solid #fff; color: #fff; font-size: 90.9%; font-family: Arial; }

select.birthday { width: 52px; background-color: #000; border: 1px solid #fff; color: #fff; font-size: 90.9%; }

select.ddl { width: 162px; background-color: #000; border: 1px solid #fff; color: #fff; font-size: 90.9%; }

input[type="text"] { width: 160px; background-color: #000; border: 1px solid #fff; color: #fff; font-size: 90.9%; }

.right-input { width: 100%; text-align: right; }

Form:

<asp:UpdatePanel ID="upEnquiryForm" runat="server">
            <ContentTemplate>
                <fieldset>
                    <legend class="no-display">Hello</legend>
                    <p>
                        <label class="label" for="txtFirstName">Name</label>
                        <asp:TextBox ID="txtFirstName" ValidationGroup="RegForm" MaxLength="25" runat="server"></asp:TextBox>
                        <asp:RequiredFieldValidator ID="rfvName" ControlToValidate="txtFirstName" Text="*" CssClass="validation-error"
                            Display="Dynamic" ValidationGroup="RegForm" runat="server"></asp:RequiredFieldValidator>
                    </p>

                    ... (additional form elements)

                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>

A big thank you to everyone who contributed their expertise in this process.

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

Scrollable divs in a Bootstrap layout

If you take a look at this fiddle I created, you can see what I've attempted. My goal is to have a webpage without scroll bars but with the col-left and col-right divs getting a scrollbar when they overflow. Could someone provide some insight on what ...

Understanding CSS and the implementation of media queries

Imagine having this scenario /* css for elements section #1 in page css for elements section #2 in page */ @media screen and (max-width: 960px) { /* redefines/alters CSS for elements in section #1 in page */ } @media screen and (max-width: 700px) { /* r ...

Is it possible to use multiple stylesheets with PhoneGap?

Currently, I am storing a stylesheet (CSS file) from the web server into device storage using the file system access method provided in the phonegap guide for File. I need to apply this stylesheet to my app from the device storage, and will be updating the ...

Expanding/Collapsing Indicator Stays in Place as Content Expands

I'm encountering a problem with my expand/collapse code. I want the p class="heading" tag in the HTML (which is responsible for toggling my expand/collapse box) to move down along with the expanding content. At the moment, the content expands and appe ...

Tips for activating the next tab using the <a> or <button> element in Materialize:

<div class="col s12"> <ul class="tabs"> <li class="tab col s4"><a href="#test1" class="active">tab1</a></li> <li class="tab col s4"><a href="#test2">tab2</a></li> <li class="tab c ...

Even with the use of Display Flex, the menu and text remain misaligned

Hey there! I've been working on recreating a website to improve my skills, and I'm currently focused on replicating the navigation bar of this site: I'm facing an issue with aligning the left line in the nav bar. Instead of being on the sam ...

Inject CSS into an iframe containing a JavaScript form by iterating over a collection of iframes

My task is to manipulate an iframe (chatbox) once it's loaded on a webpage. This chatbox consists of four iframes, each with a different id that changes with every page load. Since the iframe that needs manipulation is always the last one in the list, ...

NLog and GrowlNotify are not showing up after deployment due to a missing assembly

I have encountered an issue with NLog and Growl. Everything functions properly on my local setup. However, upon deploying the website, I receive the following error message: Exception: NLog.NLogConfigurationException: Exception when parsing E:\Websit ...

Fascinating CSS quandary: does the transparency of a parent element impact the transparency of a child element that is absolutely positioned, but not in relation

Check out this test case: https://jsbin.com/merujogudo/1/edit?html,css,output Should the element with .test class be transparent or not? Note: The current state is as follows: In Chrome and Firefox (latest versions): transparent In IE11: opaque It wou ...

Chaos in the IE8 drop-down menu situation

I'm having trouble with my code for a menu with drop-downs in ie8. It works fine in all other browsers but there seems to be an issue with the positioning of the main menu and submenus. Any thoughts on what might be causing this? <ul id="nav" clas ...

When hovering over .nav-item, the nav-link color remains unchanged

Is there a way to modify the code below to change the color of a navbar item to red when it is hovered over? .nav-item.active .nav-link{ color: blue !important; } .nav-item.hover .nav-link{ color: red !important; } ...

Storing the output of an SQL query in a session variable is a common task

I could use some assistance with a problem I am facing. After a staff member logs in, I need to save their staff_id so that it can be used in subsequent forms to identify them. I believe I should utilize Sessions for this purpose, but the concept is uncl ...

Tips for creating a Bootstrap 4 form without altering the body background

Currently, I am utilizing Bootstrap 4 to enhance the appearance of my website. However, a challenge arises as I already have a CSS file in place with background color and image settings. Upon linking Bootstrap 4, the styling is disrupted, resulting in the ...

Is there a way to make the div visible with just one click instead of two?

var sections = ["intro", "content"]; var visibleSectionId = null; function toggleVisibility(sectionId) { if (visibleSectionId == sectionId) { visibleSectionId = null; } else { visibleSectionId = sectionId; } hideInvisibleSe ...

In VUE, switching colors upon clicking is undone once the cursor moves away from the element

I need help with changing the color of a div when it is clicked. Here's how the div is structured: <li v-for="monomer in monomers"> <div :style="monomerButton" @mouseover="hover = true" @mouseleave="hov ...

Can a specific CSS rule be written in Material UI using makeStyles that will only apply if the element has both classes together?

It's common knowledge that achieving this in CSS is a possibility. .makeStyles-mainNavWrapper-67.sticky{ position: fixed; top: 0px; opacity: 1; transition: opacity 1s ease; padding: 10px; } I am curious to find out if this can be achieved ...

Shorten Text - React Native

I currently have a React Native application with a FlatList component. The logic I initially implemented was to display an Expand/Collapse arrow whenever the content at the 100th position in the list is not empty. However, I now realize that this approach ...

The codebehind class is not able to recognize the web controls

<%@ Page Title="Log In" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="EQ.Account.Login" %> <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"> </asp:Co ...

The form submission is not affected by the jQuery dialog buttons and will proceed to submit as

I'm struggling with a form and JavaScript code interaction. In my code, when the validateDialogForm() function is called, a jQuery dialog appears under certain conditions. The issue is that the dialog only shows for a few seconds before the form conti ...

I prefer a dynamic navbar that isn't fixed in place

I'm trying to make my navbar scroll along with the page content, without any fancy styling like disappearing effects. So far, I haven't been able to achieve this using Bootstrap 4. Here is how it currently appears: https://i.sstatic.net/R5gDq.p ...