CSS position problems...

[Teensweb]

I was trying to integrate niceforms to my smf based blog, and almost entirely succeeded. So here is the only problem that I face:
When the 'niceforms' is put into action, it works fine but the position of the input boxes are not rendering as intended see this page for example. It shows how the input is rendered with niceform functioning. Here's a page that shows the correct rendering with javascript disabled.
I fixed the problem for firefox by slightly changing the css as shown:
Before:

/*Text inputs*/
.NFText {border:none; vertical-align:middle; font:12px/15px Arial, Helvetica, sans-serif; background:none;}
.NFTextCenter {height:15px; background:url(img/input.png) repeat-x 0 0; padding:3px 0; margin:0; float:left; line-height:15px;}
.NFTextLeft, .NFTextRight {width:7px; height:21px; vertical-align:middle; float:left;}
.NFTextLeft {background:url(img/input-left.png) no-repeat 0 0;}
.NFTextRight {background:url(img/input-right.png) no-repeat 0 0;}

After:

/*Text inputs*/
.NFText {border:none; vertical-align:middle; font:12px/15px Arial, Helvetica, sans-serif; background:none;}
.NFTextCenter {height:15px; background:url(img/input.png) repeat-x 0 0; padding:3px 0; margin:0;display:inline-block; line-height:15px;}
.NFTextLeft, .NFTextRight {width:7px; height:21px; vertical-align:middle;}
.NFTextLeft {background:url(img/input-left.png) no-repeat 0 0;}
.NFTextRight {background:url(img/input-right.png) no-repeat 0 0;}

Here's that page (with fix for ff).
But this fix wont work in browsers like chrome and IE, can somebody help with this?

 

[misson]

Since the text boxes and textbox ends are floated, float the labels to preserve document order. Alternatively, float nothing and keep all the elements as inline elements (replace the <div>s with <span>s).

On a related note, the label tag for "next" is in the wrong place. You have:

 [and this should be just after the first one]
<label for="next">
<input type="text" name="next" value="9999" size="5" maxlength="5" />  
</label>

but should have:

&nbsp;<label for="next">[and this should be just after the first one]</label>
<input type="text" name="next" value="9999" size="5" maxlength="5" />

Lastly, your CSS sample isn't very readable. Extraneous pieces should be removed, lines indented and (if the ratio of lines-to-differences is high) differences highlighted.

You could combine the the old and new versions using (e.g.) text color to highlight the differences (with an explanation: red means deleted, blue means added):

/*Text inputs*/
...
.NFTextCenter {
    ...
    [COLOR="red"]float:left;[/COLOR]
    [COLOR="blue"]display:inline-block;[/COLOR] 
    ...
}
.NFTextLeft, .NFTextRight {
    ...
    [COLOR="red"]float:left;[/COLOR]
}

This puts more emphasis on the differences.

 

[Teensweb]

I changed it to span, but still there are problems with chrome and IE, and as usual, it works fine with good old firefox. See the modified page here
Edit: I found out that, when I remove the line-height property from ".NFTextCenter" , it works in chrome, but IE still sucks with the rendering. Is there a fix?

 

[misson]

It doesn't quite work in FF or Chrome; try resizing the window.

The problem you see has the same cause as in IE: the window has a resize handler that calls NFFix that ... calls inputText.unload, which appends form inputs rather than placing them back in their original DOM position. There's some other bug that causes IE to duplicate the elements, but I haven't bothered to hunt it down because fixing the unload methods (and it's a simple fix) causes the duplication bug to vanish. For each of the input unload methods, replace the line that appends the element (red lines) with one that puts it in it's original position (blue lines):

function inputText(el) { //extent Text inputs
    ...
    el.unload = function() {
        [COLOR="red"]this.parentNode.parentNode.appendChild(this);[/COLOR]
        [COLOR="blue"]this.dummy.parentNode.insertBefore(this, this.dummy);[/COLOR]
    ...
function inputFile(el) { //extend File inputs
    ...
    el.unload = function() {
        [COLOR="red"]this.parentNode.parentNode.appendChild(this);[/COLOR]
        [COLOR="blue"]this.dummy.parentNode.insertBefore(this, this.dummy);[/COLOR]
    ...
function textarea(el) { //extend Textareas
    el.unload = function() {
        [COLOR="red"]this.parentNode.parentNode.appendChild(this);[/COLOR]
        [COLOR="blue"]this.right.parentNode.insertBefore(this, this.right);[/COLOR]

There may be other lines that need a similar fix.

I'm not certain why NFFix is necessary. Presumably it has something to do with some of the other form input types and should be left active.

Overall, the code isn't terribly impressive. There are other things that could stand some improvement.

 

[Teensweb]

It doesn't quite work in FF or Chrome; try resizing the window.

I removed the nffix on resize, now it works fine I think, see this