Form label alignment/positioning in IE 7

[LHAjack]

Hello,

I’m having some trouble getting the labels for a form to align properly in IE 7. Works fine FF, Safari, and IE 8.

The labels are supposed to be right-aligned to the left of the field, but in IE 7 they are appearing right-aligned but on top of the fields. The label styling is inline (poor practice, I know. Just sort of did it that way as I went along and didn’t bother to change it) but that shouldn’t make a difference right?

Probably over-looking something pretty simple, but I stumped right now.

Code Below

CSS:

Code:

#form {
position:absolute;
left: 504px;
top: 405px;
width: 500px;
height: auto;
padding:50px 0 0 0;
margin: 0 0 0 0;
z-index: 52;
}

Form Div:

Code:

Fill out the form below and a Barker Financial
representative will contact you shortly.

*First Name

*Last Name

Address

City

State

Zip

*Email Address

Home Telephone

Work Telephone

Comments

Thanks

[doobie]

Dude, first things first. Get that inline styling out of there and into a proper stylesheet.

Then, take a look at this article: https://css-tricks.com/tips-for-creating … web-forms/.

It will answer all of your label placement questions.

Good luck.

[LHAjack]

Thanks for replying. Figured it out on my own. Solution involved a combination of moving the label tags and some IE conditional CSS.

Yeah, I had seen that article before. All of that was in-place for styling, it was just inline at the time. As I was tinkering, took most of the inline styling out and put it in proper. Didn’t fix the issue, but definitely cleaner coding.

[Author]

Posts