HTML: <input> element changes position after user input

Question

I am building a web-based, self-quizzing application, but I'm having some troubles out of my input form. I have it structured such that each input element has its own cell in a table. I'm including a picture for reference. The table alternates columns of numbers and input elements. I did this mainly for ease of aesthetic structure.

Unfortunately, those aesthetics are messed up whenever a user enters a string into the input element. The elements move closer to the bottom of the page once a user has entered a string and then tabbed to the next input element. I'm including another picture for reference.

Does anyone have any idea what could be causing this error? I'm happy to update with any details necessary concerning the markup, css, or jQuery.

Link to the site or a jsfiddle with the error might help. But here is a wild guess, the input has some css property for :focus which is causing the top margin? — Swashata Ghosh
– Swashata Ghosh, Commented Sep 8, 2013 at 19:20
@SwashataGhosh , it does have a :focus added to it, but the only things that get altered are the background-color, outline, and box-shadow. I'm developing on my localhost, so I'm not sure if I could fit everything on jsfiddle. — elersong
– elersong, Commented Sep 8, 2013 at 19:26

Andriy F. · Accepted Answer · 2013-09-08 20:11:32Z

1

The culprit seems to be

vertical-align: baseline;

in CSS

edited Sep 8, 2013 at 20:11

answered Sep 8, 2013 at 20:04

Andriy F.

2,5451 gold badge26 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

elersong Over a year ago

Wow. That worked swimmingly. I always looked at CSS normalize as returning everything to an empty default state. Never thought I would CREATE a css problem from CSS normalize. What does that line actually do?

Andriy F. Over a year ago

baseline Aligns the baseline of the element with the baseline of its parent. The baseline of some replaced elements, like <textarea> is not specified by the HTML specification, meaning that their behavior with this keyword may change from one browser to the other. (MDN)

Andriy F. Over a year ago

PS: quite nice normalize.css is used in HTML Boilerplate

Collectives™ on Stack Overflow

HTML: <input> element changes position after user input

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related