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

Is there a way to display tags on hover and darken an image on hover as well?

Currently, I am using a theme that does not include the feature to display tags when hovering or darken images and gifs on hover. You can view the theme here. I would like to modify my theme to show tags similar to this example theme: If anyone could ass ...

htmlcsstags

Generating a div element within another div element

I have been attempting to add a new div inside an existing one using append, after, etc., but so far I have not been successful. The structure of the code is as follows: <div class="row"> <div class="col-xs-12" id="element-container"> &l ...

jqueryhtml

HTML5 for advanced positioning and layering of multiple canvases

I have 2 canvas layers stacked atop each other, but I need to position them relative to the entire page. The dimensions of both layers are fixed at a width of 800 and a height of 300. My goal is to center the canvas layers regardless of screen size, with ...

javascriptjqueryhtmlcanvasscreen-positioning

Apply a class to a div element when the WooCommerce cart is devoid of any items

Is there a way to apply a class or style to an element that displays the cart count only when the cart is empty? Currently, I have the following code in my header.php file which shows the cart count correctly, but does not update the color: header.php ( ...

phpcsswordpresswoocommercecart

Deactivate an option within an angularjs multi-select menu

Currently, I am utilizing an angularjs multiselect box which is displayed below: https://i.stack.imgur.com/w6ffN.png Here is the html code snippet: <select multiple ng-options="Language.LangID as Language.LangName for Language in AllLanguages " ng-mo ...

htmlangularjsmulti-select

How to apply a custom CSS class to a Smarty tag in CMS Made Simple

Greetings! I am currently in the process of revamping a page using CMSmadesimple, However, I have limited knowledge when it comes to utilizing CMSms and Smartytags. The page contains various smartytags that require styling. One particular tag that needs ...

csscontent-management-systemsmartycmsmadesimple

Extract content from an HTML form within a specific cell using Cheerio

A sample HTML table is displayed below: <tr class="row-class" role="row"> <td>Text1</td> <td> <form method='get' action='http://example.php'> <input type='hidden' ...

javascripthtmlnode.jshtml-tablecheerio

The image filter plugin is functioning properly in one project, however, it is not working in

After successfully using a plugin from w3schools to filter elements in one project, I encountered an issue when attempting to implement it in another project. Here is the link to the problematic code pen: https://codepen.io/zakero/pen/mZYBPz If anyone ca ...

javascriptjqueryhtmlcss

The location of the footer is not aligned correctly

Recently, I encountered an issue that has left me puzzled. The problem is that the footer on my webpage is appearing between the calendar button and the calendar itself. Here is a snippet from my calendar.html file: {% extends 'base.html' %} {% ...

htmlcssdjango

White border appears when hovering over MUI TextField

I've been troubleshooting this issue for what seems like an eternity. I've combed through Chrome's inspect tool, searching for any hover styles on the fieldset element, but to no avail. Here's my dilemma... I simply want a basic outline ...

javascriptcssreactjsmaterial-ui

Issue observed with alignment not being corrected when the browser is resized on a responsive webpage

Utilizing Bootstrap3 for my responsive page design. In the banner content, I am including a box with text inside: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <s ...

htmlcsstwitter-bootstrap-3

Is it appropriate to refer to a single page application as a web 3.0 application?

As time progresses, we are witnessing the rise of more and more single page applications or frameworks such as new twitter and Sammy. It appears to be a significant advancement where we move away from generating code on the server side, with servers actin ...

javascriptjqueryajaxhtmlsinglepage

Utilizing AJAX to showcase individual PHP files

My PHP elements are not being displayed in the code, and I need to figure out why. Below is the HTML code I am currently using: <div class="tablocation"> <ul class="css-tabs"> <li><a class="current" href="/wp-content/themes ...

phpjqueryhtmlajax

Is it possible to insert additional lines into the default HTML file using VS Code?

Is it possible to customize the HTML template generated automatically by VS Code? For example, when I type html:5 + TAB, I would like the resulting HTML file to include predefined "style" and "script" tags along with some common code snippets that I regu ...

htmlvisual-studio-code

Can anyone assist me with this HTML/jQuery code?

Despite my efforts, I've been unable to achieve success. The challenge I'm facing is with duplicating controls for adding images. I have a button and a div where the user can choose an image by clicking the button. The selected image appears in ...

javascriptjqueryhtmlcss

What is the best way to ensure an image is responsive in CSS and aligns perfectly in height with its neighboring text?

There is an image within the <img> tag and some text inside the <p> tag, both enclosed in a <div>. Although the image is responsive and resizes proportionally when the browser window changes size, there is an issue where as the text wrap ...

htmlcss

Tips for adjusting the height of both an iframe and a div to fit perfectly at 100% combined

Struggling to make an iframe and div both have 100% full height on the page? I need a footer menu with 280px height, leaving the rest of the page for the iframe. After extensive research, it seems like jQuery might be necessary as CSS Flex didn't wor ...

javascriptjqueryhtmlcssiframe

Vanishing Tooltip following an implementation of the backdrop-filter

I'm having an issue with the blur effect on my background image. Although it works well, my tooltips also end up being blurred behind the divs: https://i.stack.imgur.com/BMdh4.png Is there a way to ensure that my tooltips stay on top of the subseque ...

javascripthtmlcss

The issue arises when HTML tables with unique IDs are all displaying the same value from an AJAX callback

This situation has been incredibly frustrating for me!! Let me explain what's going on - I have a callback data coming from my AJAX post method that needs to be passed to seven different HTML tables. Although I successfully received the data from the ...

javascriptphphtmlajaxsymfony

Aligning a lowercase "i" element within a container

Is there a more effective way to center the "i" element within this div without using specific pixel margins that adjust based on hover? Below is my code snippet: HTML: <div class="nav-collapse"> <i class="fa fa-bars fa-2x" id="bars"></ ...

javascriptjqueryhtmlcsscenter