Input field unexpectedly finds its way into a div surrounded by labels in Internet Explorer 11

CSS Code:

.wrapper {
    margin-right: 75px;
    float: left;
    position: relative;
}
.input-large {
    width: 210px;
}
.label-a {
    float: left;
}
.label-b {
    float: right;
}

HTML Code:

<div class="wrapper">
    <div>
        <label class="label-a">label-a</label>
        <label class="label-b">label-b</label>
    </div>
    <input class="input-large" type="text" />
</div>

View screenshot for IE 11 and Chrome comparison

Can anyone explain why the input field is positioned differently in IE 11 compared to Chrome?

htmlcssgoogle-chromeinternet-explorer

Answer №1

.container {
    margin-right: 75px;
    float: left;
    position: relative;
    width:215px;
}
.input-large {
    width: 210px;
}
.lablerow{float:left;width:100%;}
.label-a {
    float: left;
}
.label-b {
    float: right;
}
<div class="container">
    <div class="lablerow">
        <label class="label-a">label-a</label>
        <label class="label-b">label-b</label>
    </div>
    <input class="input-large" type="text" />
</div>

Answer №2

The dimensions of the input element can vary depending on the web browser being used. After examining the elements in various browsers, it is clear that there are differences in how IE and Chrome interpret the width property - particularly when it comes to the inclusion of padding.

(Additionally, for those considering utilizing flex boxes, I suggest exploring CSS grid as a versatile 2D layout option that goes beyond traditional vertical structures).

Answer №3

It appears that the discrepancy in width is caused by differences in how IE and Chrome interpret the size of the container div.

In IE, the width of the container div includes the combined widths of input, label-a, and label-b:

https://i.sstatic.net/je288.png

However, in Chrome, the width of the container div only considers the width of input:

https://i.sstatic.net/a45nM.png

This variability stems from the distinct rendering engines used by IE and Chrome, resulting in different approaches to determining element dimensions. To achieve consistent display across both browsers like IE, a specific width must be defined for the container.

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

The div stops scrolling after the Matrix3d transformation is applied, causing the scrolling functionality to cease

The issue arises when attempting to scroll the #content div, as it seems unresponsive. Oddly enough, scrolling with the scrollbar does work: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...

htmlcssthree.jstransformation

What is the best way to align these JavaScripts side by side using div elements?

After searching many sources and attempting various methods, I am still struggling to position two lines of code side by side on my website. My attempted solution can be found at the bottom of the code. http://pastebin.com/mV1DUbg0 The code looked strang ...

htmlcss

The child element is absolutely positioned within the parent element with a higher z-index

It is crucial for the parent absolute to be under child absolute. How can I resolve this issue using CSS? The positions of both elements must remain absolute. <div class="parent"> <div class="child">child</div> </div> ...

javascriptjqueryhtmlcss

Changing the Date Display format of a new Date() instance

Just starting out with the MEAN Stack I'm currently utilizing the new date() function to retrieve the date, but I prefer not to display the time offset. ...

javascripthtmlangularjsnode.js

Enhance Material UI BottomNavigationAction by adding a pseudo-element

Trying to enhance a selected item with an additional UI element using a pseudo-element. Specifically, looking to add a line above the menu item. https://i.stack.imgur.com/MZnmw.png The code I've implemented is not displaying the desired line: const ...

cssreactjsmaterial-uipseudo-element

Refresh numerous pages

Currently, I'm working on a freelance project where I've been tasked with re-coding an outdated menu for my client. The website is built on static pages, so updating the menu manually on each page seems like a time-consuming and repetitive task. ...

phpjavascripthtmlupdates

Maintain the initial spacing when altering the font weight

Two divs were created with padding in each one. div { display:inline; background-color:yellow; padding: 2px 2px 2px 2px; } div:hover { font-weight:bold; } <body style="font:15px arial,sans-serif;"> <div>one</div> <div& ...

htmlcss

Enhancing Speed and Efficiency with Now ui kit CSS Framework

Recently, I switched over to the stunning Now-UI kit which is built on Bootstrap 4.0. While Bootstrap has always been highly responsive on all devices, I am currently facing an issue with the responsiveness of the Now-UI kit on mobile devices. If you cou ...

cssbootstrap-4

JavaScript and AJAX for Making Decisions

I'm encountering an issue with the decision-making part of my form. I am trying to set up a form on an HTML page that includes radio buttons and a checkbox, but I am struggling to retrieve data from my .php file. The problem seems to lie in the .php s ...

javascriptphphtmlajax

Changing the background color of UILabel in iOS with a rounded rectangle design

I am looking to create a design similar to this concept. https://i.sstatic.net/7ZQi3.png One approach is to achieve this by inserting an image (for "PDF"). NSTextAttachment *attachment = [[NSTextAttachment alloc] init]; attachment.image = [UIImage image ...

ioscssobjective-c

Tips for configuring a file using javascript and angular.js

I am in need of some assistance. I would like to create a configuration file that stores all the paths for JavaScript files, which can then be dynamically called and included in the index page using Angular.js or JavaScript. The structure of my files is ex ...

javascriptjqueryhtmlangularjs

Creating an 8-bit grayscale JPEG image using HTML5 and encoding it from a canvas source

Is there a simple method to convert an 8-bit grayscale JPEG from Canvas using client side technologies in a web browser (such as HTML5, canvas, WebGL, and JavaScript)? Are there any pre-made JavaScript libraries available for use, without requiring extens ...

javascripthtmlhtml5-canvasjpegwebgl

What is the best method for saving a chosen radio button into an array?

I am currently developing an online examination system where questions are retrieved from a database using PHP and displayed through AJAX. I am facing an issue where I am unable to capture the selected radio button value and store it in an array. Despite e ...

javascriptphphtmlajax

How can I activate div elements by clicking on a specific div using Angular 2?

I have created a custom component with search dropdown functionality for selecting dates. <div class="search-dropdown calender-dropdown "> <div class="search-dropdown-tabs-wrp"> <ul class="search-dropdown-tabs"> <li& ...

cssangulartypescript

Leveraging jQuery for dynamically populating <select> elements within an HTML document using JSON data

My goal is to populate my <select> element with country names from a JSON file using jQuery/ajax. <div id="navbar"> <label for="countrySelect">Select a country from the list:</label> <select id="count ...

htmljqueryjsonajaxcurl

Prioritize displaying products that are not in stock at the end, regardless of the sorting order

I manage a Woocommerce store and I'm looking for a way to always display out of stock products at the end of my product listing. I have implemented a code snippet that successfully keeps out of stock items at the bottom, but when a user sorts by pric ...

phphtmlwordpresswoocommerce

Chrome is having trouble loading basic JavaScript

Here's the JavaScript code I have placed inside the head tag of my HTML: <script type="text/javascript"> function over1() { var img1 = document.getElementById("1").src; document.getElementById("big").src = img1; } function out() { ...

javascripthtmlgoogle-chrome

Title with lower border shorter than width

Looking to achieve an underline effect with a bottom border that is narrower than the width of the h2 title. Though I typically avoid uploading images, here is one to provide further clarification of my question: ...

htmlcsscss-shapes

Trouble arises when dealing with components beyond just the background while using jquery_interactive_bg.js

After experimenting with different plugins, I managed to achieve a parallax effect on my website's landing page by using the interactive_bg.js plugin. Following the steps outlined in a demo tutorial, I was able to attain the desired visual effect. Be ...

javascripthtmlcss

Picking out specific SharePoint components using jQuery

I encountered an issue with making my two radio boxes readonly. To resolve this, I attempted to disable the unchecked option. Despite trying to access the elements using jQuery and reviewing the data from the console, the solution did not work as expected. ...

javascriptjqueryhtmlsharepointjquery-selectors