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

Question

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 1

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.

Answer 2

Problem is when you focus an input text element, your browser puts 2px border around it for focus which is shifting its position if it is contained in a tight container...

I think it is more related to having 2px border all the times. Use the same color border and your text field to have transparent borders... Your problem is addressed on this question

StackOverflow Question when focusing an input field border 8270380

Answer 3

This is speculation, but since focusing in an element seems to trigger the shifting, you may have different styles applied to those focused elements. Increased margins or borders could be responsible.

Answer 4

Not a big deal just put:- outline: none;

in input tags

input {


  width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    display: block;
    border-radius: 5px;
    outline: none;

}

if you want to have a border of your own then put

input:focus {
    border: 2px solid salmon;
    color: #333;
}

Answer 5

I think your structure conflicting with your parent structure CSS (there may possible is you using third party plugin something like jQuery UI or else) do one thing just for confirmation cut or copy your conflicting code and paste out side of you parent structure or beginning of your body tag. you find the difference.

For proper help I want to review you code. Thnx