Jumping text in form input

Get Started
1

Hi everybody.

I have a number of text boxes on a form and the text falls to the bottom when the box has focus and centres itself when focus is lost.

div.form-container form fieldset input.textinput {
height:1.1em;
font-size:1.1em;
color:#999;
}

Any idea why this should be doing this anybody?

Thanks

Justin

2

It’s not possible to determine from what you have provided.

Please provide a link to a test page that exhibits the problem, and we can diagnose the cause from there.

3

Hi pmw57

Here is the URL:

http://www.justinoakleyandassociates.co.uk/lel2013/login/login_form.php

There are still a few things to do on the form but it is the two inputs that are not behaving themselves!!

Any ideas welcomed.

CSS is http://www.justinoakleyandassociates.co.uk/lel2013/login/smallform.css

Thanks

Justin

4

Google Chrome: no problem
Mozilla Firefox: no problem
Internet Explorer: problem

It’s going to be an Internet Explorer CSS issue, and the problem is:
When the mousedown event occurs on an input field, Internet Explorer drops the position of the text within that input field down by a couple of pixels.

Let’s remove as much code as possible and still have the problem occur.

The minimum code for the problem to still occur is:


<style type="text/css">
input.textinput {
	height:1em;
}
</style>
<input class="textinput">

The problem occurs when you reduce the height of the input box down below the size of the text.