Como dice el titulo, tengo problemas para centrar un div sencillo y uno de un menú interactivo de mi pagina (sobre todo con Internet explorer) y me gustaría saber que hago mal o que me falta para lograr el centrado correcto.
Este es el Enlace a mi Pagina
http://gameredmania.xtrweb.com/
Este es el HTML:
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
</head>
<link href="/pestilos.css" rel="stylesheet" type="text/css" >
<body>
<div id="contenido"></div>
<div class="nav2">
<ul>
<li><a href="">INICIO</a></li>
<li><a href="">JUEGOS PC</a>
<ul>
<li>Subseccion</li>
<li>Subseccion</li>
<li>Subseccion</li>
<li>Subseccion</li>
<li>Subseccion</li>
<li>Subseccion</li>
</ul>
</li>
<li><a href="">PROGRAMAS</a>
<ul>
<li>Subseccion</li>
<li>Subseccion</li>
<li>Subseccion</li>
<li>Subseccion</li>
<li>Subseccion</li>
<li>Subseccion</li>
</ul>
</li>
<li><a href="">GUIAS-TRUCOS</a>
<ul>
<li>Subseccion</li>
<li>Subseccion</li>
<li>Subseccion</li>
<li>Subseccion</li>
<li>Subseccion</li>
<li>Subseccion</li>
</ul>
</li>
<li><a href="">FORO</a>
<ul>
<li>Subseccion</li>
<li>Subseccion</li>
<li>Subseccion</li>
<li>Subseccion</li>
<li>Subseccion</li>
<li>Subseccion</li>
</ul>
</li>
<li><a href="">ACCEDER</a>
<ul>
<li>Subseccion</li>
<li>Subseccion</li>
<li>Subseccion</li>
<li>Subseccion</li>
<li>Subseccion</li>
<li>Subseccion</li>
</ul>
</li>
<li><a href="">REGISTRARSE</a>
<ul>
<li>Subseccion</li>
<li>Subseccion</li>
<li>Subseccion</li>
<li>Subseccion</li>
<li>Subseccion</li>
<li>Subseccion</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Y ESTE ES EL DEL CSS:
Código:
body {background-color: black;}
#contenido {background-color: a4a4a4; width: 1000px; height: 1400px;
position: absolute; z-index: 1;
margin: 200px auto 200px auto; left:0px; right:0px;
filter: alpha(opacity=50); opacity: 0.5;}
.nav2 {height: 100px;
position: absolute; z-index: 2;}
.nav2 ul {color: white;}
.nav2 li {padding:10px; text-align: center; color: white;
display:block; background: #4e4e4e; width:120px;}
.nav2 ul li {float: left;}
.nav2 li:hover {background:red;
-moz-transition: background 1.0s;
-moz-transition: background 1.0s;
-ms-transition: background 1.0s;
-o-transition: background 1.0s;
-webkit-transition: background 0.6s;
transition: background 0.6s;}
.nav2 ul li:hover ul {/*display:block;*/height:250px; width:250px; visibility: visible; overflow: hidden;
color:red; margin: 10px 0px 0px -50px;
-moz-transition: 1.0s;
-ms-transition: 1.0s;
-o-transition: 1.0s;
-webkit-transition: 1.0s;
transition:1.0s;}
.nav2 ul li ul {/background:#cac99e; position: absolute; height:0px; width:0px; visibility: hidden;
margin: 10px 0px 0px -50px; left:;}