I am trying to design an inline form with three labels/inputs per line
(with the label above the corresponding input box). I originally had all
three labels and then all three inputs, which worked fine minus (2)
distinct problems.
1. The labels were indented. The first one was seemingly tabbed once,
the second twice, etc. The last label started roughly in the middle of its
input.
2. When I tested the responsiveness, it showed all three labels then all
three inputs.
After slapping myself in the forehead, i then decided to put each
corresponding label and input in a span and add a div container. But now
the spans seemingly overlap each other; the inputs start before the
previous one ends such that really long inputs (ie emails) would have the
end hidden behind the next box.
Is there a way to fix the styling or a class i can add to make the spacing
look like it did when i just had the three labels and then the three
inputs. There was a small sliver of space between each input box. I even
tried to offset the first row in my code (which I have uploaded) and it's
fine in desktop view, but it still overlaps in tablet view.
Also my footer displays on the side of the main container div only in IE8.
Is there a fix for this? The footer displays at the bottom in every other
browser i have tested, including mobile ones.
Thanks for any help you may provide,
-MT
