The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Form label alignment/positioning in IE 7

  • # August 10, 2010 at 3:22 pm


    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


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

    Form Div:


    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: … 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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed