problem with divs in IE 7

[alapimba]

Hello

I did a site that it's working fine on IE6, and FIREFOX, but for some reason ie7 render it wrong.

 

Here is the result:

 

http://www.opelclassico.pt/_index.htm

 

If you open on firefox you see the menu in place, perfect and the logo it's centered with the line of the tables.

But on IE it moves my divs about 20pixels to the right. how can i fix it?

 

Here is my code:

 

<table width="100%" border="0" cellpadding="0" cellspacing="3">
  <tr>
    <td bgcolor="#FFED00"> </td>
    <td width="800" height="250"><img src="homepage_fotos/rotator.php" width="800" height="250" /></td>
    <td bgcolor="#000000"> </td>
  </tr>
  <tr>
    <td bgcolor="#005b6b"> </td>
    <td bgcolor="#FFED00"><div id="logo"><a href="index.htm"><img src="img/logo_club.png" width="138" height="204" border="0" /></a></div><!-- #BeginLibraryItem "/Library/links.lbi" --><div id="navcontainer">
      <ul id="navlist" name="navlist">
        <li><a href="cocp.html">COCP</a></li>
        <li><a href="socios.php">SÓcios</a></li>
        <li><a href="actividades.php">Actividades</a></li>
        <li><a href="classificados.php">Classificados</a></li>
        <li><a href="links.php">Links</a></li>
        <li><a href="gbook.php">Guestbook</a></li>
        <li><a href="contactos.php">Contactos</a></li>
      </ul>
    </div><!-- #EndLibraryItem --></td>
    <td bgcolor="#FFFBDB"> </td>
  </tr>
</table>

 

My css:

#logo{

height: 192px;

width: 138px;

z-index: 2;

position: absolute;

margin-left: 733px;

top: 45px;

}

#navcontainer{

background-color:#FFED00;

height: 23px;

width: 740px;

position: relative;

margin-top: 0px;

margin-left: 0px;

}

#navcontainer ul

{

position: relative;

margin-top: 0px;

margin-left: 0;

margin-bottom: 0px;

background-color:#FFED00;

color: #333333;

float: inherit;

font-family: Verdana, Arial, Helvetica, sans-serif;

text-transform: uppercase;

font-size: 11px;

margin-right: 0px;

padding: 0px;

text-align: center;

width: 800px;

font-weight: bold;

}

 

#navcontainer ul li {

display: inline;

background-color: #FFED00;

}

 

#navcontainer ul li a

{

/*padding: 1px;*/

background-color: #FFED00;

color: #333333;

text-decoration: none;

float: left;

padding-bottom: 5px;

padding-top: 5px;

padding-right: 7px;

padding-left: 12px;

}

 

#navcontainer ul li a:hover

{

background-color: #FFFBDB;

color: #333333;

}

 

What i'm doing wrong?

[racer x]

I can't see your site?

 

Do you realize you have a "logo" div that is a height of 192px that contains an image that is 204px high? Sometimes that will screw things up.

[darkfreaks]

Cleaned up CSS:

#logo {
height:192px;
width:138px;
z-index:2;
position:absolute;
margin-left:733px;
top:45px;
}

#navcontainer {
background-color:#FFED00;
height:23px;
width:740px;
position:relative;
margin-top:0;
margin-left:0;
}

#navcontainer ul {
position:relative;
background-color:#FFED00;
color:#333;
float:inherit;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-transform:uppercase;
font-size:11px;
text-align:center;
width:800px;
font-weight:700;
margin:0;
padding:0;
}

#navcontainer ul li {
display:inline;
background-color:#FFED00;
}

#navcontainer ul li a {
background-color:#FFED00;
color:#333;
text-decoration:none;
float:left;
padding:5px 7px 5px 12px;
}

#navcontainer ul li a:hover {
background-color:#FFFBDB;
color:#333;
}