making a webpage cross browser compatible - css

Question

i want to display my webpage in all the browser versions...my code is working fine in mozilla and chrome but not working properly in internet explorer.
here is the css code which is not compatible with IE it's seems....
EDIT
Struggling to create a web page for cross browser and multiple resolution support for the past 2 months,As my design have multiple issues with resolution and browser support.i am new to this designing thing and i dont have any idea on how to this.i saw a article regarding multiple resolution support which states that we have to use regular css code which is supported by all the browsers under all resolutions.Also i heard that we have to put our normal <div></div> inside a container,so that the design will never collide which each other when it is viewed under lower resolution.below is my css code which will work under 1680X1050 and only in Mozilla.currently iam using a template which works fine under all circumstances.give me some sample examples of a perfect design so that i will learn to design my own
#image img
{
padding:6px;
border-top:0px solid #ddd;
border-left:0px solid #ddd;
border-bottom:0px solid #c0c0c0;
border-right:0px solid #c0c0c0;
display:inline;
position:relative;
top:-210px;
margin-left:auto;
margin-right:auto;
}
#hori
{
width: 70em;
margin-left:350px;
position:absolute;
}
#hori ul li
{
display:inline;
float:left;
list-style:none;
}
#hori ul
{
padding:0;
margin-top:-620px;
}
#hori li
{
display: inline;
padding:0;
text-align:center;
width:7em;
float:left;
list-style:none;
height:25px;
margin-left:15px;
background:#38ACEC;
-moz-border-radius: 70px;
border-radius: 70px;
}
#verti
{
float:bottom;
width:200px;
margin-top:50px;
position:relative;
display: inline;
}
#verti ul li
{
list-style:none;
text-decoration:none;
}
#verti ul
{
padding:0;
margin:0;
}
#verti li
{
width:150px;
background:#38ACEC;
margin-bottom:9px;
position:relative;
top:170px;
-moz-border-radius:80px;
border-radius:80px;
text-align:center;
}
#slideshow
{
position:relative;
height:500px;
right:-570px;
top:-280px
}
#slideshow img
{
position:absolute;
top:0;
left:0;
z-index:8;
}
#slideshow img.active
{
z-index:10;
}
#slideshow img.last-active
{
z-index:9;
}
table,th,td
{
border:1px solid black;
width:650px;
position:relative;
right:-480px;
margin-top:-35%;
}
th
{
background-color:#38ACEC;
color:white;
}

Answer 1

Since you didn't ask any question may I presume the question is: how should I make this css compatible in IE browsers?
There are actually several ways to do this:
Find out wich css properties are not functioning correct in IE check this site for some common CSS mistakes http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml
Add an inline filter to render different css when using IE followed with the IE compatible css if you want to make this negative just add ! before the condition.
make 2 different css files wich are included in the top of your html page with the same filter
<!--[if lt IE #version]>
<link rel="stylesheet" type="text/css" href="styleIE.css" />
hope this helps you out.