Having trouble with Absolute positioning.

Hey fellas.

So here is my website www.Gameradvice.com

I am new to the whole web design thing and I am having trouble getting my top navigation bar to be in the same position in all 3 major browsers. Right now it looks great in Chrome but in IE and Moz its more down than I want it. The absolute positioning is not working the same for different browsers, I even created a test element completely unrelated to the navigation bar that still have different positions when using Position:Absolute.

So why is Position:absolute behaving differently in IE and Moz then in Chrome? I feel like the problem is related to the CSS of the navigation bar, but I can't pinpoint the problem. Here is all the code relating to my Navigation bar:

#MainNavigation { /* The whole Nav bar */
position:absolute;
top:72px;
left:625px;
}

ul.tabs { /*The list items of the menu */
margin:0;
padding: 0;
list-style: none;
}

ul.tabs li {
margin: 0;
padding: 0px;
font-family:Verdana, sans-serif;
font-size:1em;
text-transform:uppercase;
list-style: none;
float: left;
}

ul.tabs a {
display: block;
color:#ffffff;
padding:16px 20px;
}

ul.tabs a:hover {
background:url(/backnav.jpg) repeat-x;
}

#MainNavigation li:hover ul {
left:auto;
}

ul.dropdown { /*The dropdown list of each "tabs" list */
margin-top:0px;
padding:0;
border:2px solid #5386e3;
background-color:#e8f7ff;
position: absolute;
top: 100%;
z-index:999;
left:-9999px;
width: 240px;
}

ul.dropdown li {
margin: 0;
padding: 0;
float: none;
position: relative;
font-size:1em;
list-style: none;
display:block;
}

ul.dropdown li a {
display: block;
padding:0;
color:#191919;
}



#itemtwo li { /*The "about" dropdown list */
text-transform:none;
height:80px;
}

#itemtwo li a {
padding:10px;
}

#itemtwo li img{
margin-left:12px;
padding:0;
float:left;
border:1px solid #4a6ee3;
margin-bottom:3px;
}

#itemtwo li p {
margin:0px;
float:left;
margin-left:15px;
width:125px;
font-size:1em;
font-style:bold;
color:#3d3d3d;
}

#itemtwo li a:hover{
background:none;
}

#itemtwo li a p:hover{
color:#1947D1;
}

#itemthree li { /* The "archives" dropdown list *?
text-transform:none;
margin-top:5px;
background:none;
}
#itemthree li a {
float:left;
padding: 5px;
margin-left:15px;
background:none;
width:180px;
font-size:1.1em;
font-style:bold;
color:#3d3d3d;
}

#itemthree li p {
font-size:1.3em;
}
#itemthree li a:hover {
background:#1947D1;
}





I reaaally appreciate any help. I usually don't post on forums but I haven't had any luck in solving this problem. Once again, thanks!


EDIT: I changed the code so that the navigation bar would look correct in IE and Moz but not Chrome. #Mainnavigation now looks like:
#MainNavigation {
position:absolute;
top:44px;
left:625px;
}

-Robbor911

are you using reset.css?
if not go to http://meyerweb.com/eric/tools/css/reset/
The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on
this reset all browser's default css styles to common value.

it has helped me many times in those kind of situations

Is this any better? (http://www.exitfegs.co.uk/Document25.html)

Frank