Actualizando, por si alguien puede seguir dandome una mano, que ya estoy parado por ahora:
Encontre que lo que realmente quiero es un menu, con float, que quede centrado, maravillosamente, las personas de CSS Play tienen una solución:
http://www.cssplay.co.uk/menus/centered.html
Copio exáctamente su solución a mi página y sorpresa, me funciona genial en firefox, pero en IE7 no me funciona y me despliega algo raro.
Lo más interesante de todo es que miro la página de el en IE7 y su menu si me funciona, así que me siento confundido, de que es lo que puede suceder.
Este es el xhtml que estoy usando:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Bienvenidos a la Asosiacion Guatemalteca del Arroz</title>
<link href="estilos/estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="navegacion">
<del class="container">
<ul id="menu2">
<li><a href="#nogo">Tab One</a></li>
<li><a href="#nogo">Tab Two: Longer</a></li>
<li><a href="#nogo">Tab Three: Longest</a></li>
<li><a href="#nogo">Tab Four</a></li>
</ul>
</del>
</div>
</body>
</html>
Este es el CSS
#navegacion {
text-align:center;
}
#menu2 {
display:table;
padding:0;
margin:0 auto;
list-style-type:none;
white-space:nowrap;
}
#menu2 li {
display:table-cell;
}
#menu2 a {
width:auto;
display:block;
padding:4px 16px;
color:#fff;
background:#08c;
border:1px solid #fff;
text-decoration:none;
}
#menu2 a:hover {
color:#000;
background:#d4d4d4;
}
<!--[if IE]>
#menu2 li {
float:left;
}
#menu2 a {
float:left;
}
.container {display:inline-block; text-decoration:none;}
<![endif]-->
Asi se me despliega en IE7:
http://img517.imageshack.us/my.php?image=menuie7tf7.jpg
Cualquier sugerencia le sera muy agradecida!