The first thing to do is to move all of the <script> elements to after all of the <link> and <style> elements.
Are you aware that your page contains errors? The first step in debugging should always be making sure that your code is valid (in order to rule out any errors as the cause for the problem).
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/ (Under "more options", make sure it's set it to use "CSS level 3".)
Conditional comments can not be used inside a stylesheet.
Code:
.twoColFixLtHdr #mainContent {
margin: 0px auto 0 210px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
padding: 0 0 0 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
background: #FFFFFF;
height:387px;
}
<!--[if IE 6]>
.twoColFixLtHdr #mainContent {
margin:-387px auto 0 210px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
padding: 0 0 0 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
background: #FFFFFF;
height:387px;
} <![endif]-->
You could use a CSS filter instead.
The "* html" filter targets IE6 and older. Also you don't need to repeat all of the declarations in the rule, only the one(s) that you need a different value for:
Code:
* html .twoColFixLtHdr #mainContent {
margin:-387px auto 0 210px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
}
Did you intend to post the screenshot as such a small image? Why a GIF? The GIF format is only good for very small images, e.g. 10x10, or simple animations.
The use of tables for layout makes me very sad. Ever heard of "display:table-cell" (which doesn't work in IE7 but does in newer browsers)?