左側的內容始終處於ie6的中心位置

-1

我已經消耗了近8個小時來發現問題，但我沒有運氣。我有一個3列布局。我的問題是我創建的應該是在左邊是位於IE6中心位置的導航菜單，在Firefox中是沒有問題的左側的內容始終處於ie6的中心位置

任何建議將不勝感激

感謝AVANCE。

這裏是鏈接

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

這裏是我的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; 
}

我javscript的導航菜單

<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>

我的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>

來源

2009-12-06 tirso

你可以在容器周圍放置邊框嗎？所以我可以看看。 – Tebo 2009-12-06 12:29:14

我已經在容器周圍放置了邊框。謝謝。 – tirso 2009-12-07 02:35:16

不太確定，但我認爲它與#container上的填充以及#wrapper上的自動邊距有關。

你也應該檢查你的浮動屬性。

來源

2009-12-06 12:40:50 Tebo

左側的內容始終處於ie6的中心位置

回答

相關問題