left content always in center position in ie6

Question

hi to all

I have consumed almost 8 hours to find the problem but I have no luck. I have a 3 column layout. My problem is the navigation menu I created that supposed to be position in left was located in center in ie6, in firefox there is no problem

Any suggestion would greatly appreciated

thanks in avance.

here is the link

http://webberzsoft.com/clients/staffill/index.php/jobseeker/testtmplate

here is my css

body{
 background-color: #333333;
 padding: 0;
 margin: 0;
 font-family:Arial,Helvetica,sans-serif;
 font-size: 12px;
}
#wrapper{
 background-color: #FFFFFF;
 width: 1020px;
 margin: auto;
}

/*** IE6 Fix ***/
* html #left {
 left: 180px;              /* RC width */
}

#container{
 width: 580px;
 padding-left: 220px;      /* LC width */
 padding-right: 220px;     /* RC width */
}

#container #left{
 float: left;
 width: 200px;             /* LC width */
 right: 240px;             /* LC width */
 margin-left: -97%;
 position: relative;
 padding: 10px 
}

#container #middle{
 width: 97%;
 float: left; 
 position: relative;
 padding: 10px;
}

#container #right{
 float: left;
 width: 200px;
 margin-right: -97%;
 position: relative;
 padding: 10px 5px 10px 15px;    
}

#footer{
 padding: 10px;
 font-size: 12px;
}

ul#menu-new, ul#menu-new ul {
 list-style-type:none;
 margin: 0;
 padding: 0;
 width:180px;
}

ul#menu-new a {
 display: block;
 text-decoration: none; 
}

ul#menu-new li {
 margin: 0;
 list-style-type: none;
}

ul#menu-new li a {
 color: #FFFFFF; 
 height: 24px;
 line-height: 24px;
 vertical-align: middle; 
 padding: 0.5em;
}

ul#menu-new li a:hover {
 color: #000000;
}

ul#menu-new li ul li {
 padding-left: 10px;
 background-color: #666666;
 border-bottom: 1px solid #333333;
}

ul#menu-new li ul li a {
 color: #FFFFFF;
}

ul#menu-new li ul li a:hover {
 padding-left: 15px;
}

my javscript for nav menu

 <script type="text/javascript">
    function initMenuNew() {
      $('#menu-new ul').hide();
      //$('#menu ul:first').show();
      $('#menu-new li a').click(
        function() {
          var checkElement = $(this).next();
          if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
            return false;
            }
          if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
            $('#menu-new ul:visible').slideUp('normal');
            checkElement.slideDown('normal');
            return false;
            }
          }
        );
      }

    $(document).ready(function() {initMenuNew();});
    </script>

my html

<div id="wrapper">
    <div id="header">      
    </div>
    <div class="spacer-20"></div>            
    <div id="container">          
        <div id="middle" style=" border: 1px solid #FF0000">
            middle content           
        </div>

        <div id="left" style="border:1px solid #FF00FF">
            left content
            <div>
                <div style="background:url(<?php echo base_url() ?>images1/menu_header.jpg); width:200px; height:44px"></div>
                <div style="background:url(<?php echo base_url() ?>images1/menu_middle.jpg) repeat-y; padding:10px 0">
                    <div style="padding: 0 10px">
                        <ul id="menu-new">
                            <li>
                                <a href="#">test</a>
                                <ul>
                                    <li><a href="#"> test1 </a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">test</a>
                                <ul>
                                    <li><a href="#"> test2 </a></li>
                                </ul>
                            </li>                                                             
                        </ul>                        
                    </div>
                </div>
                <div style="background:url(<?php echo base_url() ?>images1/menu_footer.jpg) no-repeat scroll 0 0; width:200px; height:10px"></div>
            </div>
        </div>

        <div id="right" style="border:1px solid #00FF00">
            right content
        </div>
        <div class="clearboth"></div>                                    
    </div>

    <div class="clearleft"></div>

    <div id="footer">
    </div>
</div>

Answer 1

Not quite sure but i think it has to do with the padding on #container and the auto margin on #wrapper.

You should also check you float property.