Firefox Table Spacing Issue

Okay, when you view this page:
http://tours.dehoneytravel.com/asia/bestofchina/requestbrochure.htm in Firefox,
there is white spacing between each of the fields. If viewed in IE7, the
spacing is correct (the way I'd like it). I've been over my code, had friends
go over the code, and none of us can find where the issue lies. I'm guessing
the issue is with IE7, because its the same in Firefox, Safari, and Netscape.
How can I fix it and make it work for each browser? Thanks!

Hello,

There sure is a big difference between the two browsers!

Try here whilst waiting for support here:

http://www.positioniseverything.net/explorer/inherited_margin.html

First get rid of the nowrap attributes. There is no reason for them.

Second you have cellpadding set to 2. That appears to be your main problem in
Firefox. Cellpadding affects the entire padding of each cell and IE seems to
be ignoring the cell padding altogether. Setting that to 0 will bring
everything closer together in the other browsers.

Third your math is off on that table. You have the table at a width of 498
but if you add the 3 columns together you get 486.

FIx those few problems and let's see if we can go from there after those
issues have been fixed.

Okay, the changes have been made. Still have the issue. What next? (I really do appreciate your help!)

I think I may have found it.

In each of your table cells you have a P tag. However, your problem lies with
the line height. I think it would be easier to remove the P tags from the
table, if not you would need to define a class and change the line-height
attribute for those p tags in the table cells. If you need to align something
in a cell you could align via td tag (which is what DW normally defaults to) or
the div tag.

Also just a note. Your original total table math may have been more accurate
than your total column width. The First Name and Travel Date items are now
listed on 2 lines. I believe the nowrap attribute you had before was adding in
the same. Adding a few more pixels back to that first column will quickly
solve this.

I'll take a look at it this weekend and see if I can figure that one out. It's
been a long day and my brain is shot. I have removed the P tags before, but
then my text changes to Times Roman, which I want the site set at Verdana.
I'll try it once again, and try tweaking the Divs to see what I come up with.

Also, just a note: I added the nowrap attribute in a thought that maybe it
would fix it. Origninally it wasnt there. I had removed it before posting my
original question because I didn't see a change, but forgot to update the live
file.

I'll be in touch.

Hello,

To make all the text in your page Verdana, you can just add that to the body
CSS style.
Then you won't need to include it in all the classes.

body {background-color: #666666;
margin-left: 0px;
margin-top: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

The spaces between the fields in FF are caused by the defualt margin of the
<p> tag that your Text Fields are in.
The default is different in FF than in IE.

You can remove the <p> tags now to fix it, and the font will stay Verdana as
you defined that in the body style.
This is the better choice.
You could also just set a margin for the <p> tags so the margin is the same in
different browsers.
p {margin:2px;}
You might want to do this just to see how it makes the design in FF look the
same as in IE, but there's really no need to have the <p> tags around the Text
Fields in each table cell.

If you have other <p> tags in your site, it's a good idea to set the margin
with CSS so the line spacing is the same cross browser.

Take care,
Tim

Thanks TC2112. I set the margins for the <p> tags to 2 and that did it. I
played around with removing the <p> tags and redefining the body css style, but
could never get it to work.

Thanks for your help too SnakEyez02!