Css 我需要帮助使这些div维度在浏览器之间保持一致

我在一个网站上工作，该网站位于：

我使用了960网格，960的css取自网站： （谷歌960GS，因为我只能发布一个超链接）

我意识到也许我应该避免使用960，但无论如何。。。我确实使用过它，但不幸的是，我的网站在不同浏览器之间并不统一。幻灯片下方的灰色表格（右侧的表格）应该延伸到幻灯片的长度，这样它就不会变短，并且两个表格排列成相同的长度。相反，它在每个浏览器上都比较短，如果我尝试将属性从%更改为px，那么它仍然是不统一的。在firefox浏览器中，即使是包含幻灯片的表格也与其他浏览器截然不同，看起来网站已经崩溃了。这是我的CSS：

@charset "UTF-8";
/* CSS Document */


body {
 margin:0;
 padding:0;
 background-image:url(../images/fgc_bg.png);
 color: #FFFFFF;
 font-family: arial,sans-serif;
}

h1 {
 font-size: 24px;
 color: #FFFFFF;
 font-family: arial,sans-serif;
 line-height: 50px;
}

#container {
 position:absolute;
 height: 100%;
 left: 50%;
 width: 1200px;
 margin: 0;
 margin-left: -600px;
}

#navigation {
 position: float;
 float: left;
 background-image:url(../images/topbar.png);
    width: 960px;
    height: 50px;
 margin-top: -825px;
 margin-left: 120px;
}

#footer {
 position: float;
 float: left;
 background-image:url(../images/topbar.png);
 text-align: center;
    width: 960px;
    height: 50px;
 margin-top: -25px;
 margin-left: 120px;
}

#clearfooter {
 position: float;
 float: left;
    width: 1200px;
    height: 50px;
}

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
 display:inline;
 z-index: 1;
 float: left;
 position: float;
 margin-left: 1%;
 margin-right: 1%;
}

 .grid_1 {
 width:6.333%;
}

 .grid_2 {
 width:14.667%;
}

 .grid_3 {
 margin-left: 120px;
 margin-top:  30px;
 width:23.0%;
}

 .grid_4 {
 width:31.333%;
}

 .grid_5 {
 width:39.667%;
}

 .grid_6 {
 width:48.0%;
}

 .grid_7 {
 margin-top:  30px;
 width:50.666%;
}

.grid_8 {
 width:64.667%;
}

.grid_9 {
 width:73.0%;
}

.grid_10 {
 margin-top: 50px;
 margin-left: 120px;
 width: 940px;
}

.grid_11 {
 width:89.667%;
}

.grid_12 {
 width:98.0%;
}

#logo {
 position: float;
 float: left;
 background-image:url(../images/logo.png);
 z-index: 100;
 width: 266px;
    height: 266px;
 margin-top: -933px;
 margin-left: 472px;
}

#content{
 position: relative;
 float: left;
 background-image:url(../images/contentbg.png);
 width: 1200px;
 height: 800px;
 margin: 150px 0 0 0;
 z-index: -20;
 }

#background {
 position: relative;
 float: left;
 overflow: auto;
 background-color:#bf6b31;
 width: 100%;
 height: 800px;
 padding: 0;
 margin: 150px 0 0 0;
 z-index: -100;
}

#clearfix {
 clear: both;
}

我也有一个奇怪的问题，幻灯片。在IE6中，幻灯片导航（右下角的4个按钮）正常工作。在其他所有浏览器中，这些按钮都不起作用，访问者无法访问。我不知道这是什么原因，但我认为这可能与z指数有关。以下是幻灯片的CSS文件：

.featuredbox-wrapper{
 display: none;
}
.featuredbox-wrapper,
.featuredbox{
 top: 0px;
 left: 0px;
 width: 940px;
    height: 400px;
 margin-left:auto;
 margin-right:auto;
    position: relative;
    overflow: hidden;
    font-family:  Verdana, Tahoma, "Lucida Sans";
    font-size: 9pt;
    font-weight: normal;
 z-index: 10;
} 
.featuredbox .description{
 bottom: 55px;
 left: 5px;
 font-size: 16pt;
 color: #FFF;
 width: 500px;
 height: 20px;
 position: absolute;
 font-style:none;
 font-weight:normal;
}
.featuredbox-wrapper .navigation{
 bottom:15px;
 right:15px;
 padding:0px;
 position:absolute;
 z-index: 100; 
 height: 20px;
 width: 100px;
}
.featuredbox-wrapper .navigation ul{
 list-style: none;
 list-style-type: none;
 margin: 0px;
 padding: 0px;
}
.featuredbox-wrapper .navigation li{
 float: left;
 height: 20px;
 width: 20px;
 margin: 0px 5px 0px 0px;
 padding: 0px;
 background-color: #FF0000;
 cursor: pointer; cursor: hand;
 background:transparent url(../images/inactive.png) no-repeat scroll 0 0;
}
.featuredbox-wrapper .navigation li.hover{
 cursor: pointer; cursor: hand; 

}
.featuredbox-wrapper .navigation li.active{
 cursor: pointer; cursor: hand;
 background:transparent url(../images/active.png) no-repeat scroll 0 0;
}
.featuredbox .box-slide1,
.featuredbox .box-slide2 {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 300px;
    width: 600px;
    z-index: -1;
 background: #FFF;
 color: #000; 
}

---

谢谢你的帮助。我仍在学习CSS，并感谢帮助我理解哪里出了问题。浏览器之间的一致性是目前我主要抱怨的领域

主要问题是，您选择使用网格系统，但没有使滑块符合网格所需的大小。使用网格系统的目的是使其提供统一的大小/间距。因此，解决这个难题的一个办法是缩小滑块图像的尺寸，使其适合网格。

没有html，很难诊断问题。html位于他提供的链接处