The bottom border of the check boxes is not displaying in Internet Explorer

https://i.stack.imgur.com/EAkMC.pnghttps://i.stack.imgur.com/ysU1R.png

While the checkboxes function correctly in Chrome, they are experiencing issues in Internet Explorer.

Below is the HTML code being used:

<div class="patient-div-w" style="width: 9.5vw;">
  <input type="checkbox" id="edema" class="input-checkbox-l">
  <label class="label-n" for="edema" style="line-height: 8vh;">Edema</label>
  <br>
</div>

Here is the corresponding CSS code:

input[type="checkbox"] {
    opacity: 0;
    margin: 0px 3px 0px 0px;
}

.input-checkbox-l[type="checkbox"] + label {
    background-image: url(../images/unchk.png);
    background-size: 1.2vw;
    background-repeat: no-repeat;
    padding-left: 1.7vw;
    background-position: 0vh 0vw;
    width: 8vw;
    margin: 0vw;
    position: relative;
    top: -.1vh;
    left: -1.6vw;
    white-space: nowrap;
    font-family: "Roboto Regular";
}


.label-n {
    font-size: 1vw;
    color: #000;
}

The issue also extends to radio buttons. Any assistance with this matter would be greatly appreciated.

htmlcss

Answer №1

Here is a solution to your problem:

If we assume that the parent element of .patient-div-w is .parent-div, then we can resolve the issue by adding the following CSS:

.parent-div{
  overflow: auto;
  zoom: 1;
}

This issue is quite common and you can find more information about it here

Answer №2

Give this a try In your coding experience

<label class="label-n" for="edema">Edema</label>
Simply eliminate the inline style="line-height:8vh;". This adjustment should resolve the issue.

For cross-browser compatibility including IE, Firefox, and Chrome, you can refer to the following code snippet:

.input-checkbox-l[type="checkbox"] + label {
  box-sizing:border-box;
  padding:0px 20px 0px 55px;
  background:url(https://i.stack.imgur.com/EAkMC.png) no-repeat center left 5px;
  background-size: 30px;
  font-size:22px;
  margin-right:5px;
  display:inline-block;
}

If you wish to proceed without using an image, consider this alternative:

input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  cursor: pointer;
  outline: none;
}

input[type="checkbox"]:checked {
 border:1px solid blue;
  outline: none;

}

div{
  display: inline-block;
}

div span{
vertical-align: super;
}

HTML Structure

<div>
<input type="checkbox" name="" value="1"><span>Label name</span>
</div>

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

Distance between cursor and the conclusion of the text (autofocus)

I discovered a method to automatically position the cursor at the end of a string using autofocus: <input name="adtitle" type="text" id="adtitle" value="Some value" autofocus="" onfocus="this.setSelectionRange(this.value.length,this.value.length);"> ...

javascripthtmlautofocus

Applying CSS styles to a shadow DOM element will not produce the desired visual

I'm encountering an issue while attempting to apply CSS to an element within a shadow-root by adding a class to it. In my Angular component, I have the following code: CSS .test { border: 1px solid red; } TS document.getElementById('my-div&a ...

htmlcssangulartypescript

Use a for loop to iterate through elements and retrieve input values using getElementById()

As I work through a for loop in JavaScript, I am utilizing the getElementById() method to fetch multiple input values. To begin, I dynamically created various input boxes and assigned distinct id's using a for loop. Subsequently, I am employing anoth ...

javascripthtmlloopsgetelementbyid

Is your sticky sidebar getting in the way of your footer?

I've developed a custom sticky sidebar for displaying ads, but I'm facing an issue. When I scroll to the bottom of the page, it overlaps with the footer. Can someone please take a look at this? - var stickySidebar = $('.sticky'); if ...

javascriptjqueryhtmlcssjoomla

Including an image side by side with clickable text within a list

Check out my progress here: http://jsfiddle.net/dDK6z/ I've experimented with using display:inline(-block), as well as adjusting margins, padding, and more, but I can't seem to get the image to move down or the text to move up. Does anyone have ...

htmlcss

Use CSS to manipulate the dimensions of an overlay

Looking for a way to ensure that the height of your overlay matches the height of your carousel, even on smaller screen sizes? The HTML code below demonstrates how to combine simple HTML with a Bootstrap carousel featuring three images, along with an overl ...

htmlcssbootstrap-4

Unable to retrieve the value from a textarea when using Shopify Product Options by Bold

I'm currently facing an issue trying to retrieve the value of a textarea using Shopify's Product Options by Bold. The code works fine locally, but when I transfer it over to Shopify, I am unable to get the value. Despite looking at various resour ...

javascriptjqueryhtmlshopify

Easiest method to change cursor to 'wait' and then return all elements to their original state

On my website, there are certain CSS classes that define a specific cursor style when hovered over. I am trying to implement a feature where the cursor changes to a "wait" image whenever an AJAX call is initiated on any part of the page, and then reverts b ...

javascriptjquerycss

AngularJS enhances user experience by allowing textareas to expand upon click

I am just starting to learn about angular.js and I'm wondering how to add a text area when clicking on an image. ....... ..... ..... </thead> <tbody> <tr ng-repeat="stu in Studentlist"> <td>{{stu.rollno}}</td> <td> ...

javascriptjqueryhtmlangularjs

Populate the div with an image that stretches to the full height

I'm facing an issue with my website's front page design, where a div is divided into two sections using the Twitter Bootstrap grid system. When the second grid (span9) is taller than the first (span3), the image perfectly fills up the span9 area ...

htmlcsstwitter-bootstrap

Enhancing readability in a vertical CSS menu with proper spacing

I'm looking to increase the spacing between each menu item as they appear too close together. Can someone help me with managing this? The menu names are currently right under one another, almost touching. What is the best way to create more space betw ...

htmlcss

Which file is the optimal placement for the Bootstrap directory: 'header.php' or 'function.php'?

Having dabbled in WordPress Theme templates for a while, I've decided to try my hand at creating a theme from scratch. After uploading the Bootstrap features onto my server, I'm pondering whether it's better to call the Bootstrap.css files ...

phphtmlcsswordpresstwitter-bootstrap

Can anyone help me with coloring Devanagiri diacritics in ReactJS?

I am currently working on a ReactJS project and I have come across an issue. I would like for the diacritic of a Devanagiri letter to be displayed in a different color than the letter it is attached to. For example: क + ी make की I was wondering ...

javascripthtmlcssreactjstypescript

Alignment of headers and footers in email newsletters for various email clients<td>

With my limited coding skills, I've been struggling to keep the header and footer aligned properly in all email clients. The footer consistently displays a 1 px gap between elements, which causes it to move around unpredictably. Here's the full s ...

htmlcss

Carousel with Bootstrap: Heading positioned over the content

My goal is to have the caption of Bootstrap Carousel displayed above the content, but I'm encountering issues with it. When clicking on the chevrons, you may notice the < Item 1 > bouncing... (This behavior is a bug, and logically speaking, I ex ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is it possible for me to use AJAX to load content from a string? I am attempting to postpone the activation of certain HTML

I need help optimizing my HTML page that includes certain sections with large Javascript files and images, which are initially hidden. Even when set to "display: none," the browser still loads all the content. One solution could be moving those sections in ...

javascriptjqueryhtmlajax

Tips for responding to and disabling a specific button in Vuetify.js after clicking the follow or unfollow button

I have a situation where I need to implement a functionality for a series of buttons with follow and unfollow statuses. When a user clicks on any button, I want the status to change after a brief delay and deactivation, followed by reactivation. For instan ...

javascripthtmlvue.jsnuxt.jsvuetify.js

Having trouble loading static CSS files in Django

Need help linking the main.css file in my index.html <link rel="stylesheet" href="{% static 'assets/css/main.css' %}"/> I have also included {%load static%} Here is my file structure: signup/static/assets/css/main.css In settings.py S ...

pythoncssdjango

Changing HTML dynamically does not trigger the ng-click event within ng-bind-html

I have developed a custom directive that can display messages along with rendering HTML content that may contain Angular attributes like buttons, anchor tags with ng-click attribute, and more. index.html: <ir-error-panel status="status"></ir-err ...

javascriptjqueryhtmlangularjs

Issues with authenticating PHP password against MYSQL

I've hit a roadblock while working on my project, and I believe it's a simple fix. However, I just can't seem to figure it out. If you want to see the issue for yourself, check out the live site at www.thriftstoresa.com. The problem lies wi ...

phphtmlmysqlvalidation