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.
