I wouldn't use transitional doctype as IE has a lot of quirks in this mode (which is why its called quirks mode). Try a strict html 4.0 or xhtml 1.0 doctype instead.

THe other main problem you're having is you're not taking into account the different way IE determinds margin and padding from firefox and other compliant browsers.

IE thinks that padding width should be determined by TOTAL WIDTH = DIV WIDTH + LEFT PADDING + RIGHT PADDING

While FF and other compatibles think it should be TOTAL WIDTH = (DIV WIDTH - LEFT PADDING - RIGHT PADDING) + LEFT PADDING + RIGHT PADDING

In other words if you have a 500px wide div and a padding of 10px, firefox makes sure the width of the div plus the padding is 500px while IE takes the padding and adds it to 500 giving you a total width of 510px;

Most of the time, I nest make a div with no margin and padding and only a width for design elements. Then I will make nested div's to contain different content. This helps deal with this problem.

I also notice you're using spacer divs in your code in the menu links. The propper way would be to use a UL/LI list and style the LI's to include whatever images/space you want. CSS was invented with eliminating spacer elements in mind.

I would also make sure your menu ID's are explicitedly receiving a margin and padding, even if it's 0. I would do this at least for a test. Because IE (and firefox) refuse to let some elements inherit a padding or margin of 0 (UL/LI being one of these). SO you have to be careful that you don't have something nested inside another element that does not inherit. The cascading element of CSS is absolutely wonderful, however it does take some tweaking and getting used to.

I have not fully examined your code so I don't know what the problem is exactly I just wanted to give you some common errors that cause these types of problems. My bet is that your padding/margins on the menu elements are out of whack. Change them up and see how it affects your document for some testing.