Tables not lined up in IE and Opera

Hello, new here

I'm having a lot of trouble figuring out what's wrong with these tables. After finishing the new layout for my website ( http://www.petportraitsstudio.com ) I find that the tables are fine in Firefox but do not line up in IE and Opera (you can tell by the dog portrait).

both tables are 800px each devided up in in 4 columns of 50px 400px 300px 50px. But the bottom table doesn't seem to line up with the top even though the measurements are the same :/ I'm very confused after playing around with it for an hour but not getting anywhere

The issues you are having are the reasons CSS was invented - to avoid using layer upon layer of nested tables for layout purposes. Tables should be used strictly for columnar data presentation, not to place chopped up images on a page.

If you can't bring yourself to give up the tables, try resetting all elements to zero margin and padding, at least that way all modern browsers will treat them the same.

/*reset.css*/body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{mar gin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}

That bit of info is courtesy of Yahoo and their YUI initiative, and has solved many layout problems in CSS based designs.

Gary

* {margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
Might work and is easier to code.