Buenas, pues primero contaros que estoy empezando y la teoria la tengo pienso que bastante bien, pero a la hora de la practica es cuando fallo... bueno al lio.
Estoy haciendo una pagina HTML+CSS y tengo el problema al introducir en la 'cabecera' un menu desplegable (vertical).
El primer fallo es que en IE no hace ni el 'amago' de mostrar el desplegable....
El segundo fallo y el que mas me jode es que si desplazo el 'menu' donde tiene que ir (es decir a la parte baja de la cabecera) mueve todas las div del contenedor... llevo horas y horas pegandome....
El tercer pero menos importante es como narices lo cuadro si el menu lo coloco en el centro de la pag en Chrome, Firefox, Opera todo OK, pero en IE nunca que igual (suele aparecer mas a la izq).
Os paso el 'codigo' a ver si podeis abrirme los ojos que ya nose que hacer.
Tambien os paso la 'cabecera.gif' para que veais donde me gustaria poner el menu que no lo consigo.
Imagen
[URL="http://img813.imageshack.us/img813/1117/cabecera.gif"]http://img813.imageshack.us/img813/1117/cabecera.gif[/URL]
HTML Código HTML:
<HTML>
<HEAD>
<TITLE> puto IE y medidas </TITLE>
<link rel="stylesheet" type="text/css" href="css/menu.css" title="style" />
<script type="text/javascript" src="js/codigo.js"></script>
</HEAD>
<BODY>
<div id="contenedor">
<div id="cabecera">
<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="/menu/includes/ie6.css" media="screen"/> <![endif]-->
<div class="wrapper1">
<div class="wrapper" style="width:600px;">
<div class="nav-wrapper">
<div class="nav-left"></div>
<div class="nav">
<ul id="navigation" style="width:538px";>
<li class="#">
<a href="index.html" target="_self">
<span class="menu-left"></span>
<span class="menu-mid">INICIO</span>
<span class="menu-right"></span>
</a>
</li>
<li class="#">
<a href="productos.html" target="_self">
<span class="menu-left"></span>
<span class="menu-mid">PRODUCTOS</span>
<span class="menu-right"></span>
</a>
<div class="sub">
<ul>
<li>
<a href="pescado.html" target="_self">PESCADO</a>
</li>
<li>
<a href="marisco.html" target="_self">MARISCO</a>
</li>
<li>
<a href="ahumados.html" target="_self">AHUMADOS</a>
</li>
<li>
<a href="precocinado.html" target="_self">PRECOCINADO</a>
</li>
<li>
<a href="postres.html" target="_self">POSTRES</a>
</li>
</ul>
</li>
<li class="#">
<a href="ofertas.html" target="_self">
<span class="menu-left"></span>
<span class="menu-mid">OFERTAS</span>
<span class="menu-right"></span>
</a>
</li>
<li class="#">
<a href="informacion.html" target="_self">
<span class="menu-left"></span>
<span class="menu-mid">INFORMACIÓN</span>
<span class="menu-right"></span>
</a>
</li>
</ul>
</div>
<div class="nav-right"></div>
<br><br>
</div>
</div>
</div>
<div id="dosIzq">
<p>sdfsdfsdf dfsdfsdfdfsdfsdfdfsdfsdf dfsdfsdfdfsdfsdf dfsdfsdfdfsdfsdf dfsdfsdf
</p>
</div>
<div id="dosIzqIzq">
centro
</div>
<div id="dosIzqDer">
derecha
</div>
<div id="pie">
<ul id="pieOpciones">
<li><a href="enlaces.html">Enlaces</a> </li>
<li><a href="formulario.html">Contacto</a> </li>
</ul>
</div> <!-- Pie pagina -->
</div> <!-- contenedor -->
<!-- CLICKY analisis web visita
<a title="Real Time Web Analytics" href="http://getclicky.com/66355352"><img alt="Real Time Web Analytics" src="http://static.getclicky.com/media/links/badge.gif" border="0" /></a>
<script src="http://static.getclicky.com/js" type="text/javascript"></script>
<script type="text/javascript">clicky.init(66355352);</script>
<noscript><p><img alt="Clicky" width="1" height="1" src="http://in.getclicky.com/66355352ns.gif" /></p></noscript>
-->
<div class="losHs">
<h1>tienda congelados, tienda congelados online, tienda congelados Madrid, productos congelados online, productos congelados Madrid,
marisco congelado, verdura congelada, precocinado congelado, pescado congelado, Madrid, congelados vicky,
</h1>
<h2>tienda congelados, tienda congelados online, tienda congelados Madrid, productos congelados online, productos congelados Madrid,
marisco congelado, verdura congelada, precocinado congelado, pescado congelado, Madrid, congelados vicky,
</h2>
</div>
</BODY>
</HTML>
CSS
Código CSS:
Ver originalbody{margin:0 auto; text-align:center; font-size:15px; font-family:Verdana; background-color:#fff; color:#fff;}
a{color:#f00; text-decoration:none;}
ul {text-decoration:none; list-style:none}
li {text-decoration:none; list-style:none }
#contenedor{width:1024px; height:1500px; border:none; text-align:left; margin:0 auto; background-color:#fff;}
#cabecera{width:1024px; height:180px; background:url(../images/cabecera.gif) no-repeat center top; float:left;}
#dosIzq{width:400px; height:1300px; background-color:#b55; float:left;}
#dosIzqIzq{width:400px; height:1300px; background-color:#5b5; float:left;}
#dosIzqDer{ width:224px; height:1300px; background-color:#55b; float:left;}
.losHs { float:left; margin:0; padding:0; text-indent:-999999px;}
/* --------------------------- pie --------------------------- */
#pie{width:1024px; height:50px; float:left; background:url(../images/footCongelados1024.gif) no-repeat center top; color:#fff;}
#pieOpciones {color:#fff; margin-top:17px; margin-left:850px; }
#pieOpciones li {font-family: Arial, sans-serif; font-weight:bold; font-size:11px; margin-right:1em; padding:0.4em; display: inline; /*display: inline; <---Solution for bug IE6 */ }
#pieOpciones li span {margin-left:20px; font-size:11px; }
#pieOpciones li a {color:#fff;}
#pieOpciones li a:hover {color:#0B0B61;}
/*#menuProductos li a{visibility: hidden; list-style:none;}*/
/* --------------------------- Menu desplegable 'PRODUCTOS' --------------------------- */
/******************************************/
/* ------------------- MENU EXTENSIBLE ---------------------- */
.wrapper1{color: transparent;}
.wrapper1 a{ color: #fff; text-decoration: none;}
.wrapper1 a:hover {color: #f00;}
/*.wrapper1 p {margin: 0 0 17px; padding: 0;line-height: 18px; } */
.wrapper {/*width: 710px;*/margin: 0px auto;}
.nav {background:transparent; float: left;}
.nev-wrapper {clear: both; float: left;}
.nav ul { /*width: 648px;*/height: 150px;float: left;margin: 0;padding-top: 3px;list-style: none;font-size: 15px; font-weight:bold;}
.nav li { float: left;padding: 0 7px; background:transparent; position: relative; z-index: 1;}
.nav li.last {background:none;}
.nav li:hover {z-index:2;}
.nav li a {display: block; line-height: 38px; overflow: hidden;float: left;}
/* tamanio de tecla del 'menu' */
a .menu-mid {background:transparent;height: 32px;line-height: 35px;display: block;float: left;}
/* separacion lateral 'menu' */
a .menu-right { background: transparent;width: 20px;height: 32px;line-height: 35px; display: block; float: left;}
.nav li a:hover .menu-left,
.nav li.active a .menu-left,
.nav li:hover a .menu-left,
.nav li a:hover .menu-mid,
.nav li.active a .menu-mid,
.nav li:hover a .menu-mid,
.nav li a:hover .menu-right,
.nav li.active a .menu-right,
.nav li:hover a .menu-right {background-position: 0 -37px;line-height: 35px;}
.nav li a:hover,.nav li.active a,
.nav li.hover a,
.nav li:hover a {color: #0B0B61;} /* letra menu :hover */
.nav li:hover .sub,.nav li.hover .sub {display:block;}
.nav li .sub { display: none; position: absolute; top: 30px; left: 2px; background: #00a; width: 150px; padding-top: 9px;} /* menu desplegable */
.nav li ul { background:#00a; width: 130px; height: auto;margin: 0; padding: 0 12px 10px; list-style: none; font-size: 14px;}
.nav li:hover li,
.nav li.active li { width: 100%; padding: 1px 0 2px; background: none !important;}
.nav li:hover li a,
.nav li.active li a {color: #fff;background: none !important;line-height: normal;width: 130px;padding: 8px 3px 3px;text-indent: 1px;}/* letra menu desplegable */
.nav li:hover li a:hover, .nav li.active li a:hover {color: #FF8000;background: #00a !important;text-decoration: none;line-height: normal;}
/*Internet Explorer*/
.nav li li a:hover, .nav li li a:hover { color: #FF8000; background: #00a !important;text-decoration: none; line-height: normal;}
/**/
.nav .btm-bg {background: #f00; no-repeat; width: 205px;height: 9px;overflow: hidden;clear: both;} /* NOSE QUE HACE*/