Question

I wrote a small script to let a label move out of the way everytime the corresponding input field is needed.

Please check it out here: http://jsfiddle.net/5nZWJ/68/

The problem is: it works just as expected in Firefox, but all other browsers I tried (Chromium, Internet Explorer and others) don’t keep the bottom-border justified (hard to explain but you will see it if you try it out).

What do I have to change to make this thing in all browsers look like in Firefox?

Thank you in advance!

Answer 1

I have solved your problem. It is now smooth in all browsers: http://jsfiddle.net/5nZWJ/70/

The key is having #formWrapper positioned absolutely from the bottom. This means when the height is increased it expands from the bottom up and doesn’t need to recalculate the position from the top.

CSS:

#wrapper {
    background-color: lightblue;
    height: 110px;
    width: 500px;
    position:relative; /* Allows absolute figures to be predictable */
}

#formWrapper {
    background-color: yellow;
    border-bottom: 4px solid red;
    bottom: 29px; /* Changed from top and new measurement added */
    left: 120px;
    height: 57px;
    position: absolute;
    z-index: 1;
    width: 108px;
}

JavaScript:

I removed all lines of code referring to the position, as it no longer needs to be changed or recalculated.