How to use one CSS file but different settings for different browsers?

I've found out that IE and Firefox both handle CSS page structure differently. I have a CSS container of width: 740px Height: 960px and IE prints the page with extra spaces at the top and bottom while this same setting is a bit short both width and height wise in Firefox. How do I compensate for both two browsers by using the same CSS file? I don't want to create different CSS for each browser. I have FF 2.0 and IE 7. However, I assumed many of my users will still be using IE6.

Any help is appreciated.

Yeah, many people are still using IE6. I expect that a few months after IE8 is released there will be very few IE7 users but that there will still be a lot of IE6 users

It sounds like you're not using a complete doctype. Please show us an example page.

Okay, here's the page.

http://tommy.hostsnake.com/page3.htm

In IE 7, it prints the page perfectly fine in just a single page but in FF 2.0, it prints the page in two pages.

It looks the same in IE7 and FF2 to me.

Yes, it looks the same; however, if you do a Print Preview, FF will break that page into two pages. I did a print screen of the print preview in FF and it looks like the printable margin are Height: 686px Height: 910px when it should be 740px by 960px. I have the page setup as left/right set to .4" and top/bottom .5" in both IE and FF browser but some how FF breaks that single page into two with the second box in the second page.

Ah. I see now. I don't know why it's displaying differently in the print preview.

Have you considered generating a PDF instead?

Yes, that's my ultimate goal but I'm not sure to go about it. I don't want to pay for a program that will generate a PDF file for me. I want something that is relatively cheap or free if there is one.

I seem to remember hearing about some free options a while back. I suggest you ask about it in the forum for whichever server-side language you want to use.