Hey all, long time no speak.
I've been working on something over that past few days that I really like but I am stuck on one final thing that is keeping it from being perfect.
Basically I HATE form input labels, trying to position them before the input and make them line up, or after the input and the text dropping on page resize and putting the text into the input (which works fine and you can fade it and all that but when you go back to a form that is pre-filled you can't see what the field is supposed to be).
So anyway, I sat down last week and started tinkering with an idea I had, putting the input label across the top line of the input border, similar to a fieldset / legend. Getting it to work is a snap really, I just create an input with a certain class and put the label text into the title attribute of the element like this:
<p><input type='text' name='first_name' id='first_name' maxlength='256' size='50' value='' class='required input' title='First Name *' /></p>
$(this).before("<span style='position: absolute; z-index: 1000; margin-top: -12px; font-size: .75em; margin-left: 10px; background-color: #FFF; padding: 0 2px; color:#4a1486;'>" + $(this).attr('title') + "</span>");
And yes I plan to move all the CSS to the style sheet once I have it working right and just give the span that class.
So it works and looks great with one exception, if you have two inputs sitting next to each other and you re-size the page down the second input drops to the next line while the label span stays where it originally was. I have tried setting the parent paragraph position to relative but then realized I had two inputs within one parent so that didn't work.
I also tried adding a span around the input (so the new span would be added to that span via the JS) and setting it to position: relative - again nothing.
Here's an example of a client I am testing it on (site not live at this point) http://aoops.com/client-application but I don't have any public example with two fields next to each other.
Really hoping I missed something I could do with CSS to make this work.