Kim,

The short answer is to add browser-specific CSS to address the fact that different browsers are rendering your page differently. You could use IE's conditional comments to add this to a separate style sheet, for example:

<!--[if IE]>
<style type="text/css">
#ddcolortabs, #mainnav, #footer {
width: 789px;
}
#ddcolortabsline {
width: 798px;
</style>
<![endif]-->

However, the long answer is that your markup is overly complicated, and that's one of the reasons why your CSS is struggling to hold it together. I'd recommend you re-think exactly what each element on your page is doing. For example, do you really need a separate div that does nothing but contain a blue line? This is presentation-related, and belongs in your style sheet. So you should instead consider, for example, applying a bottom margin to the container above where this blue line sits, This will result in markup that is cleaner, leaner and easier to understand.

I also noticed there are a stack of CSS hacks in your style sheet too; you should make sure you understand what those are doing, try to avoid using them, and use conditional comments to move them into an IE-specific style sheet.

Hope that helps,
Matt