i'm having a weird problem with my form. when you load it, it looks fine, but when you click the button it gets distorted. i have never seen this before. maybe you have had this kind of problem before?
Im not good in CSS but this happened to me once before. I used tables though.
Click on the Submit button without releasing the mouse button - just press on the button - you'll see it happens at that time. When you pressed the mouse button over the button, everything gets misalgined. For some reason, when pushing the button some extra space is required so it adjusts itself. In my prev page I just increased the size of some table and all this misalignment vanished.
I think the problem is that both classes f_label and f_el are float right. Change f_label to float left. It worked for me.
FYI, none of the form shows up at all in Safari. All I get is the gray background in an otherwise empty page. Not sure why, but if I figure it out, I'll post again.
Update:
In Safari, the culprit seems to be the display property in #form_container. If I remove it or change it, I can see the input form. Unfortunately, it wrecks your layout. I'm not experienced with the table/table-cell values for the display property, so I can't say why this happens or how to fix it. Hopefully, knowing where the issue lies will be helpful.
Changing the float to left on f_label does fix the problem of the entire form morphing on you. I just checked it in FF on both Mac and PC. The alignment you want is to have the text of the f_label butt up against the input forms. Correct?
To solve this, you could give f_label a width wide enough to accomodate both the 'headline' and 'body' labels and also apply text-align: right; to that class.
well yes, charp, i have this solution in mind, but i wouldn't like to use it unless there's totally no way otherwise. the thing is, i wanted the f_label have no fixed width so that i could create copies of the existing form by adding new fields and changing 'labels', without worrying about f_label widths. actually it's not that much of a work to set widths every time, just wanted to have as little work to do when copy-pasting as possible.
Yes, it is wise to make the effort ahead of time to make your life easier down the road. Unfortunately, I am out of suggestions. I did revert back to your original CSS and then removed all of the display properties to see what happens. The layout is ruined, but the form does not morph when clicking on the submit button. So, my last offer of help is that the problem may lie in the display property values. Like I said earlier, I'm not familiar with the use of table and table-cell values for the display property. Perhaps someone more savvy in the ways of CSS can help out.