Hello Everyone and thanks for your help in advance.  I am new to using CSS and am muddling through the differences between browsers.  I developed a page that can be viewed at:

http://www.efrec.com/Default6.aspx

When clicking on the Contact Us page in IE 7, the page displays fine.  However, when using Firfox or Safari, clicking on the same link causes the form to display outisde of the "page" (which should be contained by a div tag) and floats to the far right side of the page.  I am not sure why this is happening.  Any help on this topic woul dbe greatly appreciated.  Thanks.

Hi kmcnet,

The <ul id="nav"> tag is floated left, which is forcing the following <div> containing the form to appear to its right, in this case off the page.  To fix it, add a clear: left; to the div.  This forces the browser to ignore any previous floating object and display in the normal document flow.  At this point you'll see that the form table is aligned left.  To fix this, add a margin-left: auto and margin-right: auto; to the contactus class (applied to the table).  Setting both left and right margin to auto is the correct way to center align (although IE will center align an object with a text-align: center - which it shouldn't).

IE has a lot of CSS "features", so typically if you can get it working in FF, then it will work in IE7 (but not the other way around :). 

Hope that helps.

Aaron

That helps a ton.  Thanks so much.  If I may, I have two more questions.  First, I understand the part that the <ul id="nav"> tag is floated left and cuases the problem with the form, however, I'm confused as to why the same effect doesn't happen for the <div id="centerspalsh"> which holds the three columns and precedes the nav div.  Also, one last Firefox issue that these changes didn't clean up is that, in Firefox, the middle column on the splash screen floats higher than the left and right columns.  Not sure why. 

Once again, thanks for the help.

One thing I've learned about floats is that frequently they behave in ways I don't fully understand, but I guess they key is being able to clean it up :)

For the <div id="centersplash">, I'm not sure why it doesn't exhibit the same behavior, or why the middle column appears slightly higher.  I did try another clear: left; in the <div id="centersplash"> and that cleaned up the middle colum though.  In general, when I see unexpected formatting after a float that's the first thing I try.

Aaron