I need help with getting these div dimensions to be uniform across browsers

Question

I am working on a website located here: http://www.freshhealthybistro.com/temp/

I used a 960 grid, and the css for the 960 was taken from the website: (google 960 gs because I can only post one hyperlink)

I realize that maybe I should have just avoided using the 960, but anyway... I did use it and unfortunately my website isn't uniform across browsers. The gray table underneath the slideshow (the one on the right hand side) should be extending to be the length of the slideshow so that it isn't shorter and both tables line up to be the same length. Instead, it is shorter on every browser and if I attempt to change the properties from % to px then it is still not uniform. In the firefox browser, even the table that is encasing the slideshow is drastically different than every other browser and looks like the website is broken. Here is my 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;
}

I am also having a weird problem with the slideshow. In IE6, the slideshows navigation (the 4 buttons in the bottom right hand corner) is functioning as it should. In every other browser these buttons are not functioning, and unclickable by the visitor. I don't know what the reason for this is, but I am assuming it may have something to do with the z-index. Here is the CSS file for the slideshow:

.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; 
}

Thank you for the assistance. I am still learning CSS and appreciate the help with understanding where I went wrong. Uniformity between browsers is currently my major complaint area.

Answer 1

The main issue is that you chose to use a grid system, but then did not make your slider conform to the size it needed to be to fit the grid. The point of using a grid system is to have the uniform sizing/spacing it provides. So one answer to your dilemma is to downsize your slider images so they fit the grid.