Is it possible for HTML form field labels to default to 100% width in MS-Edge without any specific guidance?

Recently, I've been exploring a form in a project I'm currently working on and stumbled upon an interesting issue with Microsoft Edge. It seems that the top border of the label on my form fields disappears on Edge (possibly due to the label being set to width: 100%; and covering it up). Interestingly, I have not been able to replicate this behavior on any other browser or identify the specific CSS causing this effect.

Check out the image below for a comparison between Chrome and Edge:

Image: Form input comparison: Chrome Vs. Edge

Feel free to view the code snippet and visit the CodePen link for a full-screen experience on Edge:

CodePen: https://codepen.io/B-Lovegrove/pen/NadBVe

Note: For optimal viewing, use full-screen mode when checking the code snippet.

htmlcssmicrosoft-edgeforms

Answer №1

html {
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
  height: 100%;
  background: #363740 url("../media/bg.jpg") repeat scroll;
}

body {
  margin: 0px;
  padding: 0px;
  min-height: 100%;
  width: 100%;
}

a {
  color: #4b8ddb;
  text-decoration: none;
}

table.top_pattern {
  width: 100%;
  border-collapse: collapse;
}

table.top_pattern tbody tr td {
  display: table-cell;
  padding: 0;
  width: 14%;
  height: 5px;
}

table.top_pattern tbody tr td.tc_1 {
  background: #7c8bc5;
}

table.top_pattern tbody tr td.tc_2 {
  background: #799c0c;
}

table.top_pattern tbody tr td.tc_3 {
  background: #2e4795;
}

.radio {
  margin: 0.5rem;
}

.radio label {
  font-size: 1.2em;
}
/* Other CSS styles omitted for brevity */

<html lang=en>

<head>
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <meta name="author" content="Brandon Lovegrove" />
  <meta charset="UTF-8" />
  <title>Options Selection - demo</title>
  <link rel="icon" type="image/x-icon" href="./media/favicon.ico" />
  <link rel="stylesheet" href="./css/complete.css" />
</head>

<body>
  <table class="top_pattern">
    <tbody>
      <tr>
        <td class="tc_1"></td>
        <td class="tc_2"></td>
        <td class="tc_3"></td>
        <td class="tc_1"></td>
        <td class="tc_2"></td>
        <td class="tc_3"></td>
        <td class="tc_1"></td>
      </tr>
    </tbody>
  </table>
  <div class="Canvas">
    <div class="Accounts Container">
      <div class="Content">
        <form id="TeacherForm" class="StaticForm" enctype="multipart/form-data" autocomplete="off" onkeypress="return event.keyCode != 13;">
          <ul>
            <!-- Form fields and labels omitted -->
            
          </ul>
        </form>
      </div>
    </div>
  </div>

</body>

</html>

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

Printing tables with multiple rows in separate pages using jQuery

To achieve the desired result of dividing multiple table rows into separate pages when printing, a script has been created. Each page can contain up to 21 rows from the tables. Any assistance in implementing this functionality would be greatly appreciated ...

javascriptjqueryhtmlajax

"Implementing CSS inline styles for improved appearance on a Safari browser when visiting

Having some trouble using CSS to create rounded corners on my Facebook fan page. Everything works fine except for Safari browser. I've tried inline styles and a separate stylesheet, but no luck. Any help would be appreciated. My CSS for rounded corne ...

htmlcssfacebook-page

Ways to display or conceal information depending on the dropdown choice

In my Angular project, I am dealing with a dropdown menu that is followed by some data displayed in a div element. component.html <select class="form-control" id="power" required> <option value="" disabled selected ...

javascripthtmlangulartypescriptangular-ng-if

Retrieve the CSS class definition using the console in the Chrome Developer Tools

Is there a way to automatedly extract CSS class definitions from Chrome Developer Tools? I want to retrieve the styles defined in a specific class name, similar to how it is displayed in the Styles tab on the right-hand side. I know about the getComputedS ...

javascriptcssgoogle-chrome-devtools

A 2 by 2 grid displayed on larger screens and a 4 by 1 grid on smaller devices

I am curious about how to achieve a specific layout for different device sizes. For medium and large devices, I want a 2 x 2 matrix layout with 2 rows and 2 columns. On small and extra small devices or when resizing to a smaller size, I prefer a 4 x 1 ma ...

htmlcssbootstrap-4bootstrap-grid

Properly formatting a JavaScript function within another function

Using the function pagination($total, $limit, $page) will display page numbers [pg#01 pg#02 pg#03 pg#04 NEXT]. When a user clicks on a specific page number (such as pg#02), javascript:showPagination('what_here') is designed to trigger an AJAX re ...

phpjavascriptmysqlhtmlajax

Modifying various fields in a MySQL table

I attempted to create an update query, but I am unsure how to proceed. Here is my approach that didn't work as expected. I require assistance specifically with the SQL query. <?php session_start(); include_once ('../includes/connection.php&ap ...

phphtmlmysqlsqlsql-update

Arranging Multiple Files in Sequence Using HTML5 File API Instead of Uploading All Simultaneously

I am currently working on a BackboneJS/Marionette App and I want to enable users to upload multiple files. Right now, the functionality works when users select multiple files simultaneously, but I would like to give them the option to select one file init ...

javascriptjqueryhtmlfile

Creating a multiplication table using a multidimensional array in mathematics

I'm attempting to create a multiplication table from 1 to 10 using a `for` loop and store it in a multidimensional array, but I'm encountering issues. Every time I run the script, I receive the following error message: Notice: Undefined offset ...

phphtmlarraysmultidimensional-array

Weird gap between image and div element (CSS)

I often encounter an issue with divs and images not nesting flush against each other due to spaces. It's a minor problem, but it can be frustrating. Currently, I'm struggling with the following code. The second div (class Shadow2) contains an im ...

css

Implementing login functionality in an Angular application with the help of Kinvey.Social and utilizing the Promise API

I have been utilizing the Kinvey HTML5 library in an attempt to create a client-side application that integrates Google identities for Login. While the Oauth transaction appears to be functioning properly, I am encountering an issue with toggling the visib ...

javascripthtmlangularjskinvey

Transferring the link value to an AJAX function when the onclick event is triggered

I have a link containing some data. For example: <li><a href="" onclick="getcategory(this);"><?php echo $result22['category']; ?></a></li> I need this link to pass the value of $result22['category']; to ...

phpjavascripthtmlajax

Having trouble adding space between paragraphs inside a div element while trying to retrieve its content using jQuery

Issue Description: Currently, I am utilizing the jQuery syntax below to count words: var value = $('#displayContent').text(); Before counting the words, I aim to employ a RegExp in value that concatenates the last word of each sentence with th ...

javascriptjqueryhtml

Seeking to achieve perfect vertical alignment of two columns within zurb foundation

I'm currently working with Zurb Foundation alongside Sass Compass, though this issue can extend to any CSS framework. Here's an example of the code I have: <div class="row"> <div class="small-6 column">...</div> <di ...

htmlcsssassvertical-alignmentzurb-foundation

Is there an equivalent HTML function in the R kernel that is similar to the display function

My ipython cell (python kernel) contains the following code: from IPython.display import display, HTML display(HTML("<style>.container { width:100% !important; }</style>")) By using this code, the notebook expands to full width when exported ...

htmlripythonwidthdisplay

What is the best way to maintain whitespace in CSS while disregarding line breaks?

The white-space property in CSS-3 offers the pre-wrap value, which maintains whitespace and line breaks while wrapping as needed, along with the pre-line value that collapses whitespace but retains line breaks and wraps when necessary. However, there is c ...

htmlcss

Avoiding applying the Textarea Transition on Resize is crucial

Currently, I am working on a Reactjs contact page where I have implemented a focus effect and transition for the textarea. However, I am facing an issue - when I resize the textarea, the transition is also applied to it, which is not desired. I have added ...

cssreactjs

Is there a way to modify localStorage without having to refresh the page?

I'm currently working on a shopping cart that pulls products from a json-server. So far, I've successfully displayed the products, added the functionality to add items to the cart, and show the quantity. However, I'm facing a roadblock with ...

javascripthtmlcssjsonlocal-storage

Issue with Smooth Div Scroll on Chrome

I'm currently utilizing a plugin called Smooth Div Scroll, which can be found at Despite the automatic scrolling functionality working perfectly on Firefox, IE, and Safari, I'm encountering an issue with it not initiating when the page loads in ...

jquerygoogle-chromehtmlscrollsmooth-scrolling

The presence of <!--[if lte IE8]>< ![endif]--> on the website is causing problems with the dropdown

Check out my link: Problem #1: Why does "" appear on the site in Internet Explorer? The markup seems correct, so what is causing this to show up? Problem #2: In Internet Explorer, there is an issue with clicking on subnav items above the jQuery slider wh ...

phphtmlcss