Css "table" borders not aligning

[atryeu]

I've been recoding my site to implement some of the html 5 and css 3 into my site that are supported by most browsers currently (my code was way outdated). I decided to make the leap from plain old html tables that I've used for over 10 years and switch over to div tags and css for my "tables". After some struggling I've managed to get it all figured out and my layout looks correct in Firefox 19, however in both IE 8 and Chrome 22, at the bottom of the code where I have a 'footer' on my site, the left and right borders are not aligning correctly and are 2 pixels smaller. (see screenshot of a closeup of the border issue) My best guess at this is that the scrollbar in the browsers is to blame. I have heard of similar issues before. My main "table" is set to 1000px and the footer "table" is also set to 1000px but, like I said above, it's displaying 2px shorter in IE and Chrome. If I switch it to 1002px it is then 2px too large in Firefox. How can I get this fixed so the border lines up across all browsers? I'd prefer not to use a percentage in my width or it will cause issues with my banner which is sized to fit perfectly in the 1000px width area. My knowledge is so outdated with a lot of the code now days so between that and the fact that I've had a horrible headache for the last few days, I just can't get this figured out.

[newseed]

It's hard to say based on what you have provided. Might need to provide a url so we can take a look at the issue you are having. ...and you mentioned that the table borders are not lining up and yet you said you want to convert them over to divs? Why are you not using divs in this case? There can be a number a reasons why it's not aligning. One can be paddings are different between the two. An image that has a fixed width larger than the 1000px. An incorrect width setting for the cells. Sorry I could not be of more help.