Grow your CSS skills. Land your dream job.

Getting alignment right in FF

  • # August 25, 2008 at 4:35 pm

    Hi -

    I’m trying to layout a report using a CSS layout that I had previously done with a table. I can get everything looking right in IE, but not Firefox (go figure).

    It has nested divs and everything lines up correctly unless the label block overflows into multiple lines. The last response in the second column is incorrectly lined up under the previous response instead of it’s associated label.

    What am I missing?

    Here is a code example:

    Code:

    Section A. Customer Information

    Legal Name (Last, First, MI):

    Smith, Bob, L

    Social Security #:

    111-22-3333

    Birthdate:

    09/06/1968

    Age:

    39

    Gender:

    Male

    Height:

    5′ 10"

    Weight:

    200 lbs.

    Use tobacco:

    No

    Residential address:

    111 N Main St

    City:

    Springfield

    State:

    MO

    ZIP:

    65809

    Home phone:

    417-555-1212

    Work phone:

    417-555-1313

    Cell phone:

    417-555-1414

    Fax:

    (n/a)

    E-mail address:

    bobsmith@gmail.com

    Marital status:

    Married

    Occupation:

    Driver

    Household income:

    $50,000

    Do you and your spouse read, write, speak, and understand the English language?

    Yes

    Do you have an adoption pending?

    No

    # August 25, 2008 at 7:04 pm

    You need to post a link to your site. It would help us out if we could see the html code of your site as well as a visual of the problem.

    # August 25, 2008 at 7:07 pm
    "cybershot" wrote:
    You need to post a link to your site. It would help us out if we could see the html code of your site as well as a visual of the problem.

    HTML code is right there..

    Well, obviously the last line is wrongly aligned because it is the only one that has question on multiple lines. So what you would have to do is make the answer to be on multiple lines also, simply add two <br/> tags in front of your last question and it will be fixed.

    Like so:
    </p><p class="response"><br/><br/>No</p>

    EDIT: Agh, or not.. this messes it up in IE. I hate all the differences in browsers. Couldn’t they just leave the language as it is and make it work the same everywhere? Well, in this case I would just use tables, or if I really wanted to use divs then make different div for every question and answer, But that is probably the most noobish solution. Probably because I am one in CSS..

    box
    # August 26, 2008 at 8:58 am

    There is an argument for this being tabular data. I don’t advocate the use of tables often – but sometimes there’s content that suits exactly what tables were designed for.
    Endeavour to use standards compliant tables and only for the data in div.left and not for the page layout as a whole. Also, use the caption tag and a proper thead/tbody structure… and enjoy :)

    on a side note – p is a block level element naturally so need not be declared each time.

    # August 26, 2008 at 1:25 pm

    Thanks for the tips, guys. I wasn’t completely adverse to using tables in this scenario, but the code is much cleaner without the overhead of all the associated table tags. I will re-think the design.

    If anyone has any other ideas that would work nicely for a layout, I’m all ears. :D

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

You must be logged in to reply to this topic.

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