CSS +- HTML Question

[KRiTiKuL FX]

I'm trying to create a "tabbed" page. I use Javascript to dynamically update the content "frame" with preset data. The problem I'm having is that I'm trying to size the content frame the same width as the tabs part.

Shoot me for using tables, but I am. The tabs piece uses a table to format the tabs where and the images for the tabs where I need them. The width of the table is 80%. Now the content frame is a div, and has it's width set to 80%, and this works fine in IE, but not Mozilla. I have the padding on the div to be 10px all around. I've tried setting exact numbers, but Mozilla still is having a problem with the edges lining up exactly. I have to set the width of the table to be 1000, while the div has a width of 978 (10px on each side of the div for the padding, plus an additional 1px on each side for whatever reason, making it a total of 22px off). Why the hell is it doing this? Shouldn't 80% on a table be the same as 80% on a div?

Any solutions other than not using tables (which I don't want to do, I hate having to learn more CSS than I know now, I rarely use it for positioning).

 

[maw]

Padding and margins will add to that overall width. But IE is non-standard and will instead include padding into the overall width.

So, using your 80% scale, if your containder is 600px wide, IE will make your table 480px (80%) and pad eveything inside it by 10px on each side, while Mozilla will make it 480px (again, 80%) then ADD 10px to each side, essentially making your table 500px wide.