Getting alignment right in FF

[chrisL]

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:

[email protected]

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

[Conspi]

"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..

[chrisL]

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

[Author]

Posts