Grow your CSS skills. Land your dream job.

Form label alignment/positioning in IE 7

  • # August 10, 2010 at 3:22 pm

    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.








    # August 10, 2010 at 9:33 pm

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

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

    It will answer all of your label placement questions.

    Good luck.

    # August 11, 2010 at 10:18 am

    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.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".