[SOLVED] Display problem in IE 6

I have a page that seems to display well in most browsers except in IE 6 (and possibly below).  The content that should appear in the right_sidebar is shifted to the bottom left of the page.  Dreamweaver has shown a "three-pixel text jog" error.  I have read several articles on the IE bugs especially the ones at positioneverything.com but I still can't solve my problem.

Here is what I have:

http://thebeaconpage.com/test/test.html - Get the source code

http://thebeaconpage.com/test/default.css  - css file

This seems to be the suggested fix, but I apparently am not applying it correctly:

<!--[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
#column, #right_sidebar { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->

Can someone show me what I am doing wrong?  This line my be my problem:

#column, #right_sidebar { zoom: 1; }

Thanks!

That fix isn't the right one. That fix is for the 'haslayout' bug, when your element isn't visible at all in IE6. You just have width issues.

Plus, yYchange this:

<!--[if IE]>

to this:

<!--[if IE 6]>

otherwise any changes you make will happen in all versions of IE.

Now as to how to fix it, well anything you add between these tags:

<!--[if IE 6]>
// add code here
<![endif]-->

Will only affect IE 6. So play with the margins and paddings and widths of your various elements inside those tags until you get it right.

And finally, make sure those tags come after ALL your other CSS, or they won't work.

I got this fix from another board.  Thanks to "job0107."  Seems to work fine.  Do you have any other suggestions that might be helpful?

Change #right_sidebar to this and it will fix part of the problem.

#right_sidebar {
    float: left;
    width: 177px;
    font-size: small;
    color: #000000;
    margin: 0px;
    padding: 0px;
    border: 0px;
}

Then in the html in the <!-- start right_sidebar --> section, add a negative right margin to the corner image (images/img04a.png).

    <div align="right"><img style="margin-right:-3px;" src="images/img04a.png" alt="right sidebar" width="40" height="23" /></div>

These corrections seem to make it work fine in IE 6 and FF 3.

I also deleted this:

<!--[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
#column, #right_sidebar { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->

Here's a simple way to solve any bugs/issues in IE6:

DON'T DESIGN FOR IE6.

Unless of course, you are working for someone else.

Here's a simple way to solve any bugs/issues in IE6:

 

DON'T DESIGN FOR IE6.

 

Unless of course, you are working for someone else.

I agree but a site review just 2 weeks ago showed 31% used IE6.  :'(