Floating boxes and form inputs help please

My designer is trying to fix a form from pushing the button out of a box, as well as boxes that should be at the bottom of a page that are floating on the right side of the page. I believe its a css issue and just want it fixed. It only does this in certain browser/system combinations. (see attached)

Can someone help with this or point me in the right direction?

Thank you

 

I am sorry, I forgot the link: http://www.paydaymoneyasap.com/

 

Is it fixed? No problem checked on FF/IE8/Chrome - Win XP.

But from your screenshot looks like the form issue is on the select box, adjust the height to match the input box.

And for the floating links, try to give it's div container a fixed width.

 

Not quite. The form boxes were fixed but the certificate seals are still floating to the right. I believe only certain system/browser combos are doing this. Mac/chrome is one of them.

Thank you for the response.

 

Pfft. "designers"... and people wonder why I **** on them from orbit.

Fixed width layout, fixed size elements, and forced positioning of elements instead of letting flow do it's job -- the hallmark of someone who needs to go back to drawing their pretty pictures and forget about doing anything for the Internet as they "just don't get it" when it comes to accessibility, or even the point of HTML, CSS and the web as a whole.

One peek under the hood at this alleged "form" is proof enough of that, with the list abuse, nothing remotely resembling a LABEL or FIELDSET, endless stupid games of trying to shoe-horn what should be labels to show up inside the INPUTS... entirely what one comes to expect from an artist who goes "WCAG, what's that?!?". The concept of that box basically ignores every practical concern for accessible design, and the code being used to implement it reflects that even more so with the list around non-list item elements, extra DIV for christmas only knows what, javascripted nonsense destroying accessibility, static style inlined in the markup, etc, etc, etc...

My advice, throw that entire layout away and try putting things on the page with semantic layout using ACCESSIBLE form design, instead of the 'gee ain't it neat' javascript trickery and "but I can do it in photoshop" nonsense.

Because to be brutally frank, no matter how 'pretty' your "designers" PSD might be, that is NOT a viable design for an accessible, sustainable and maintainable website and does nothing but prove they have no business designing Jack so far as a website is concerned... which is why the entire page is a laundry list of how not to build a website!

 

First, rants. Then solutions. Is good.

Using placeholders for labels is terrible practice: http://baymard.com/blog/false-simplicity

The HTML5 spec, which introduced placeholders, states the placeholder attribute should not be used as an alternative to a label.

Not only that, if a site's going to use placeholders, they're meant to give users a hint or little tip to help them fill out the input (also linked in the HTML spec). So does everyone on the internet know what three "phone" mean? Is this site restricted to a particular country? (if so, why doesn't it say so?) And if they're going to say something isn't a valid "ZIP" code, the placeholder is ideal to show someone what formatting they're expecting (tell them right away they expect 5 numbers, no plus 4, no Canadians please).

Find someone's grandma and make her fill this out. If it don't pass the grandma test, fix it until it does.

Anyway from the 2nd picture I suspect the select has some more margin on the bottom or more height in total or something. The First-Name field appears to be doing a float-snag (where it can't go all the way to the left because it's snagging on the lower-hanging select). Replace it temporarily with a plain text input and see if everyone magically goes back into proper place. If they do, you know the select is the culprit and you can work on debugging it or changing its style.
Conversely First Name could just force clear the floats above it, though IE never liked floats who cleared other floats in the same direction.

First picture looks like two items don't have the room to fit side by side.

Ditch the list. It's a waste of HTML. Din't yo momma teach you not to brush yo teeth with the HTML running? Somewhere in Africa there're li'l kids without any HTML at all.