CSS - Crossbrowser Strangeness

hi,

can anybody tell me that how can i will make following css styles to be viewed same in both internet explorer and mozilla explorer(cross browser compatibility).
here is my code

thanks
mrjameer

<style type="text/css">
html, body { margin: 0px; padding: 0px; border: 0px;background: url(bg1.gif)repeat-x;
background-color:#66CCFF;
}
#navcontainer ul
{
padding-left : 0;
margin-left : 80px;
margin-top:20px;
background-color : #036;
color : #FFFFFF;
float : left;
width : 73.2%;
font: 100% tahoma;line-height: 1.7;
}



#navcontainer ul li
{
display : inline;
}
#navcontainer ul li a
{
padding : 0.2em 1em;
background-color : #036;
color : #ffffff;
text-decoration : none;
float : right;
border-right : 1px solid #fff;
}


#navcontainer ul li a:hover
{
background-color : #369;
color : #fff;
}

#header
{
margin-left : 80px;
margin-top : 0;
float:left;
}



#right
{
position : relative;
height : 779px;
width : 267px;
float : right;
margin-right:72.3px;
background-color : #ffffff;
margin-top : -8px;
color:#000000;
font: 100% tahoma;
background-image: url(h2.jpg);
background-repeat: repeat-x;}


#left1
{
position : absolute;
/*right : 155px; */
margin-right:400px;
margin-top : -8px;
margin-left:160px;
height : 230px;
width : 564px;
float : left;
font: 100% tahoma;
/*background-color : #FFFFFF; */
color:#23238e;
background-image: url(a1.jpg);
background-repeat: repeat-x;}

#left2
{
position : absolute;
/*right : 155px; */
margin-right:400px;
margin-top :221px;
margin-left:160px;
height : 296px;
width : 564px;
float : left;
font: 100% tahoma;
background-color : #e6e6e6;
color:#000000;
background-image: url(a2.jpg); background-repeat: repeat-x;}

#about_imgtable
{
width:218px;
margin-left:50px;
margin-top:8px;
position:relative;
/*margin:auto;*/
/*border:1px dotted navy;*/
border-style:groove;
padding:1px;
border-color:#006400;
clear:right;
border-width:2px;
color:#ffffff;
background-image: url(hostingbg.jpg);
background-repeat: repeat-x;
}



#about_img
{
float:left;
padding:0 10px;
margin-top:5px;
}
#about_right_text
{
display:table-cell;
}
#product_imgtable
{
width:220px;
margin-left:300px;
margin-top:-158px;
position:relative;
/*margin:auto;*/
/*border:1px dotted navy;*/
border-style:groove;
padding:1px;
border-width:2px;
border-color:#006400;
background-image: url(tutorialsbg.jpg);
background-repeat: repeat-x;
color:#ffffff;
}


#product_img
{
float:left;
padding:0 10px;
margin-top:5px;
}
#product_right_text
{
display:table-cell;
}

#community_imgtable
{
width:470px;
margin-left:50px;
margin-top:14px;
position:relative;
/*margin:auto;*/
/*border:1px dotted navy;*/
padding:1px;
border-style:groove;
clear:right;
border-color:#006400;
border-width:2px;
background-image: url(toolsbg.jpg);
background-repeat: repeat-x;
color:#ffffff;
}

#community_img
{
float:left;
padding:0 10px;
margin-top:5px;
}
#community_right_text
{
display:table-cell;
margin-top:10px;
}
#left3
{
position : absolute;
/*right : 155px; */
/*margin-right:500px;*/
margin-top :517px;
margin-left:160px;
height : 291px;
width : 285px;
float : left;
font: 100% tahoma;
background-color : #ffffff;
color:#000000;
background-image: url(a3.jpg);
background-repeat: repeat-x;
}

#lo
{
width:260px;
height:200px;
margin-left:10px;
margin-top:40px;
position:relative;
/*margin:auto;*/
/*border:1px dotted navy;*/
padding:1px;
background-image: url(greens.gif);
background-repeat: repeat-y;
color:#ffffff;
border-styleutset;
border-color:#ff69b4;
}


#login
{
margin-left:100px;
margin-top:30px;
}
#offline
{

margin-left:40px;
margin-top:30px;

}
#left4
{
position : absolute;
/*right : 155px; */
/*margin-right:500px;*/
margin-top :517px;
margin-left:445px;
height : 291px;
font: 100% tahoma;
width : 279px;
float : left;
background-color : #ffffff;
color:#000000;
background-image: url(a4.jpg);
background-repeat: repeat-x;
}


#shamroc_imgtable
{
width:260px;
height:190px;
margin-left:10px;
margin-top:5px;
position:relative;
/*margin:auto;*/
/*border:1px dotted navy;*/
padding:1px;
background-image: url(scriptsbg.jpg);
background-repeat: repeat-x;
color:#ffffff;
border-styleutset;
border-color:#FF69B4;
}
#shamroc_img
{
float:left;
padding:0 20px;
margin-top:5px;
}
#shamroc_right_text
{
display:table-cell;
word-spacing:5px;
}

#blank_footer
{
width : 831px;
clear : both;
height : 150px;
background-color : #6f636b;
font: 100% tahoma;
color : #000066;
text-align : center;
position : absolute;
margin-left : 160px;
background-image: url(a5.jpg);
background-repeat: repeat-x;
color:#ffffff;
}


#footer
{
width : 831px;
clear : both;
height : 150px;
background-color :#ffffff;
color : #000000;
text-align : center;
position : absolute;
margin-left : 160px;
margin-top:150px;
font: 100% tahoma;
background-image: url(g.jpg);
background-repeat: repeat-x;
}

</style>

Hi guys
I've this code, it looks fine in IE (damn..) but it does not look in Firefox

Code:

body {
scrollbar-track-color: #D8AFAF; 
scrollbar-face-color: #660000; 
scrollbar-highlight-color: #927373; 
scrollbar-3dlight-color: #663333; 
scrollbar-shadow-color: #660000; 
scrollbar-darkshadow-color: #660000; 
scrollbar-arrow-color: #FF0000;  
}

What's wrong ?
- my Firefox version (1.0.1)
- the css code ?

thanks

I am currently workin on a new design for my site and have decided to go tabless (the way it should be). I have gotten pretty much as far as I can apart from adding the content. I have been testing my design in both IE6 and FireFox 1.0.4. I have noticed some problems in width in both browsers.

Here is the link to my site:
Panik Design's New Layout

In IE6 the main div does not stretch out to 700px, It only lines up with the header div when i change the width to 704px. But when I do that , Firefox is then out of line because Firefox measured it correctly the first time.

As for Firefox problem. FF is not measuring the module widths correctly. They are set to 150px and would like them to display like they do in IE6. I will now post my code:

Code:

<html>
<head>
<title>Panik Designs</title>
<style type="text/css">
body {
	margin: 0px;
	background: #fff;
	color: #000;
	font-size: 10pt;
	font-family: verdana;
}
h1 {
	font-family: verdana;
	color: #000;
	font-weight: bold;
	font-size: 24pt;
}
#header {
	border-left: 2px solid #000;
	border-right: 2px solid #000;
	background: #FBF2D9;
	width: 700px;
	margin: 0;
}
#main {
	position: relative;
	width: 700px;
	border-left: 2px solid #000;
	border-right: 2px solid #000;
	height: 100%;
	background: #FBF2D9;
}
#leftcontent {
	position: absolute;
	padding-top: 10px;
	left: 0px;
	background: #FBF2D9;
	width: 150px;
	text-align: center;
}
#rightcontent {
	position: absolute;
	padding-top: 10px;
	right: 0px;
	background: #FBF2D9;
	width: 150px;
}
#centercontent {
	position: absolute;
	left: 150px;
	padding: 10px;
	background: #FBF2D9;
	width: 400px;
	text-align: left;
}
#moduletop {
	position: relative;
	width: 140px;
	padding: 5px;
	color: #fff;
	font-weight: bold;
	text-align: center;
	border: 1px solid #000;
	background: #26476C;
}
#modulebottom {
	position: relative;
	width: 140px;
	padding: 5px;
	color: #fff;
	font-weight: bold;
	text-align: left;
	font-size: 10pt;
	border: 1px solid #000;
	border-top: 0px;
	background: #4184B4;
	background-image: url("images/modulefill.jpg");
	background-position: 0% 100%;
	background-repeat: repeat-x;
}
</style>
</head>
<body>
<center>
<div id="header"><img src='images/header.jpg'></div>

<div id="main">

<div id="leftcontent">
<div id="moduletop">: Navigation :</div>
<div id="modulebottom">
Item one<br>
Item two<br>
Item 3<br>
</div>
This is the left content
</div>

<div id="centercontent"><h1>Heello</h1><br>Thisis where the center content will go. blah blah blabh blah all of this is fun fun fun i like cheese.</div><div id="rightcontent"><div id="moduletop">: Statistics :</div>This is the right Content</div>
</div>
</body>
</html>

I have not added a doctype because it adds even more problems to the page. As shown on this page:

Doctype problems:
Doctype problems