Modifying border color causes layout disruption on Internet Explorer 9

Encountering a peculiar issue in IE9 where modifying the border-color of an <input> upon user input (:hover or :focus) leads to layout distortion.

I intended to create a form with left-aligned labels having a min-height, whereby if the label width exceeds, the input field should shift to the next row. While this setup functions correctly for me (excluding Firefox in this fiddle but on my local development), the problem lies elsewhere.

Upon testing in IE9, certain input fields shift right by the value of margin-left on mouse hover.

An attempt to rectify this involved reducing the margin-bottom of the label (from 5px to 4px) seems to prevent the occurrence, yet the initial appearance of the error remains perplexing.

Additionally, no error occurs when the border-color remains unchanged. Curious!

See example here:
http://jsfiddle.net/HerrSerker/9ktvX/ (Check in IE9)

Is this a known bug specific to IE9? Should I consider reaching out to Microsoft?

edit

The fiddle has been updated.
Interestingly, altering the border-color through jQuery seems to eliminate the bug.

htmlcssinternet-explorer-9

Answer №1

If you adjust the font size in the input field to pixels, it resolves the issue... Could this be a bug related to the adaptive units? http://jsfiddle.net/9ktvX/3/

input {
    ...
    font-size: 13px;
    ...
}

Answer №2

Consider steering clear of the "float" property. Achieve a similar layout using display:inline-block;

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 arrangement of Input and Label elements in HTML can impact the overall style of the

Having some checkboxes and labels, I'm using CSS to style the label when the checkbox is checked: input[type=checkbox]:checked + .CheckLabels {background-color: green;} When my HTML is structured like this: <input type="checkbox" name="C" id="ch ...

htmlcssinputlabel

What is the best way to choose $(this) within a JavaScript expression inside a template literal?

Is it possible to use template literals in the append method and get the index of the row generated? I understand that calling "this" inside the function selects the specified selector passed as an argument. $(document).on('click', '.ad ...

javascripthtmljquery

Is it possible to rotate just the camera in ThreeJS by dragging the mouse within the scene?

Currently, I am involved in a project using ThreeJS and I am looking to implement camera rotation using the mouse. Although I have come across OrbitControls that allow me to rotate the camera around a point or object, I am unable to achieve the camera rota ...

javascripthtmlthree.jscameravirtual-reality

What is the method to retrieve the class name of an element when the div is created as '<div id 'one' class="element one"></div>'?

I have three elements named one, two, and three, declared as seen below: <div id =container> <div id 'one' class="element one"></div> <div id 'two' class="element two"></div> < ...

javascripthtmljquerycss

Generate a collection of div elements as child nodes

I'm working on a project where I have multiple rows with input fields. My goal is to create an array for each row that contains the values of the inputs. For example, if I have 3 rows and the values of 'input1' are 1, 'input2' are ...

javascriptjqueryhtmlarrays

Unable to locate element using XPATH even though it appears in the search bar console

Currently, I am working on developing a program that fills out specific sections of a Microsoft One page. My approach involves utilizing Python and selenium for this endeavor. While I can successfully access the webpage and input data in the main section, ...

pythonhtmlseleniumweb-scrapingselenium-chromedriver

What's the best way to align divs vertically in a compact layout?

Update The reason I require this specific behavior is to ensure that all my content remains in chronological order, both on the web page and in the HTML structure. This way, even if the layout collapses into a single column on smaller screens, the content ...

javascripthtmlcssvertical-alignment

Having difficulties loading my stylus stylesheet onto my jade HTML page using expressjs

Within my express application, I am attempting to load the style properties from a styles module engine. Unfortunately, I am facing difficulties in loading my style. Here is the structure of my folders: myNodeApp -node_modules -styles - ...

htmlnode.jsexpressstylus

Switching Angular Buttons

I am developing an Angular application with a Bootstrap theme that includes 2 radio buttons, each triggering a separate page. It is important that only one radio button can be selected at a time. I want the class values to be btn btn-primary active for the ...

javascripthtmlangularjstwitter-bootstrap

Create a customized menu with jQuery that disappears when hovered over

Check out this menu I've created: http://jsbin.com/useqa4/3 The hover effect seems to be working fine, but I'm looking to hide the div #submenuSolutions when the user's cursor is not on the "Solution" item or the submenu. Is there a way to ...

javascriptjquerycssmenudrop-down-menu

What causes the element to remain visible despite the changes made to the v-show attribute?

<!DOCTYPE html> <html> <head> <title>test</title> <script src="https://unpkg.com/vue"></script> </head> <body> <div id="app"> <p v-show="show&qu ...

javascripthtmlvue.jsweb

Large header bar positioned above navbar in Bootstrap 4 design

Is there a way to add a pagewide bar above the navbar that can disappear in mobile view? <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark"> <div> Pagewide </div> < ...

csstwitter-bootstrapbootstrap-4

Enhancing VueDraggable (sortable.js) with drag out feature

I am currently utilizing VueDraggable for effortless and efficient sorting of elements. However, I am in need of a feature that detects when a dragged element leaves its parent so that a particular function can be executed. To provide some context, think o ...

htmlvue.jsdrag-and-drop

Tips for avoiding the need to reload a single page application when selecting items in the navigation bar

I am in the process of creating a simple Single Page Application (SPA) which includes a carousel section, an about us section, some forms, and a team section. I have a straightforward question: How can I prevent the page from reloading when clicking on nav ...

javascriptjqueryhtmlcsstwitter-bootstrap

Footer content no longer overlapping

I'm currently utilizing Bootstrap and attempting to create a footer that stays at the bottom of the page. The issue arises when there is an excess of content, causing the footer to overlap with the content. My layout structure looks like this: <bo ...

javascripthtmltwitter-bootstrap

Tips for effectively managing JSON data in my application

I'm working on a project to create a website that monitors the number of coronavirus cases in my country. The data is organized and stored in a file called cases.json using the following structure: { day: { city: { cases: 1 } ...

htmljson

What steps should I take to troubleshoot this file uploading error on my Mac?

Caution: The file upload for "Kol auto.png" failed to open due to permission issues at line 56 in /Applications/XAMPP/xamppfiles/htdocs/selfsub/one.php Error: Unable to move '/Applications/XAMPP/xamppfiles/temp/phpa6Q0J9' to 'upload/Kol aut ...

javascriptphphtmlformserror-handling

jQuery creates unique IDs for every keypress event triggered

Hey there, I'm currently working on developing a space shooting game using jquery and jquery-collision. I've made great progress so far, but I'm facing an issue. Whenever I press the spacebar to shoot, it keeps generating divs with the same ...

javascriptjqueryhtmljquery-collision

Is there a way to incorporate pagination into my index.html file?

Below are the codes that are currently working fine: #views.py class IndexView(generic.ListView): template_name = 'index.html' context_object_name = 'home_list' queryset = Song.objects.all() paginate_by = 1 def get_ ...

pythonhtmldjangopaginationview

align the horizontal navigation bar

I am facing an issue with my horizontal navigation bar. I want to include a search bar within the navigation bar, but it is causing misalignment. Here is the link to the code: https://jsfiddle.net/r6ntxg2f/ If you look at the menu, you will notice that i ...

css