Why do my HTML form elements move around when clicking on them in IE8?

html css internet-explorer-8 forms input-field
DecafJava picture DecafJava · Aug 6, 2012 · Viewed 12.4k times · Source

I have an HTML form with a bunch of input fields (of type text and select). I am floating them such that there are two on each row. In all browsers (including IE7), everything works okay, but for some reason in IE8, whenever I click inside any of the fields or their labels, that field or a surrounding one vertically moves up or down. The position then returns to normal once I click away from the box, though then another nearby box might move. Also, not all of the textbox fields have this issue, and clicking the same textbox doesn't always cause this issue. Any ideas?

Answer

abc123 picture abc123 · Aug 31, 2012

I had the exact same problem, and to fix it, I set 

display:block

On the element that was jumping around and that fixed it. Hope that helps.

Related questions

Why an inline "background-image" style doesn't work in Chrome 10 and Internet Explorer 8?

Why the following example shows the image in Firefox 4, but not in Chrome 10 and Internet Explorer 8? HTML: <div style="background-image: url('http://www.mypicx.com/uploadimg/1312875436_05012011_2.png')"></div> CSS: div { width: 60px; height: 60px; border: 1px …

Read More
IE8 support for CSS Media Query

Does IE8 not support the following CSS media query: @import url("desktop.css") screen and (min-width: 768px); If not, what is the alternate way of writing? The same works fine in Firefox. Any issues with the code below? @import url("…

Read More
IE8 issue with Twitter Bootstrap 3

I am creating a site using the new Twitter Bootstrap. The site looks fine and works in all required browsers except IE8. In IE8 it seems to be displaying elements of the mobile version but stretched across the full screen …

Read More