Problemas con navegadores y menus desplegables

pandols52 · #1 (**permalink**) 01/07/2014, 03:51

Hola amigos,
Estoy empezando con el diseño en css y he creado un menú desplegable usando la utilidad css3. El problema es que salvo en Chrome, don de ve perfectamente y se depliegan las persianas), no hay forma de verlo bien en Explorer, y tampoco se ve correctamente en las vistas "diseño" de Dreanweaver o FrantPage. La verdad es que ya no se que hacer con todas las combinaciones que he hecho. Agradecería cualquier ayuda. Os dejo el codigo.
Agradezco cualquier respuesta.

Código:
<html>

<head>
<link rel="stylesheet" type="text/css" href="general.css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>css3menu.com</title>

<link rel="stylesheet" href="Menu desplegable_files/css3menu1/style.css" type="text/css" /><style type="text/css">._css3m{display:none}</style>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Izquierda Unida - Velilla de San Antonio (Madrid)</title>
<meta name="description" content="Izquierda Unida Velilla de San Antonio (Madrid)">
<meta name="keywords" content="IU, Izquierda Unida, Velilla de San Antonio">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>css3menu.com</title>

<link rel="stylesheet" href="CSS3 Menu desplegable.css3prj_files/css3menu1/style.css" type="text/css" /> <style type="text/css">._css3m{display:none}</style>


</head>

<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">

<div align="center">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="1120"> </td>
</tr>
<tr>
<td><div align="center">

<strong><p class="_css3m"><a href="http://css3menu.com/">pure css
menu</a> by Css3Menu.com</p>

</strong>

<body style="background-color:#EBEBEB">

<ul id="css3menu1" class="topmenu">
<li class="topfirst"><a href="#" style="height:18px;line-height:18px;">INICIO</a></li>
<li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span>ACTIVIDAD MUNICIPAL</span></a>
<ul>
<li><a href="concejales.htm">Concejales</a></li>
<li><a href="programa.htm">Programa electoral</a></li>
<li><a href="mociones.htm">Mociones presentadas por los concejales</a></li>
<li><a href="actas.htm">Actas de los plenos municipales</a></li>
</ul></li>
<li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span>LA ASAMBLEA LOCAL</span></a>
<ul>
<li><a href="historia.htm">Historia</a></li>
<li><a href="organizacion.htm">Organización</a></li>
<li><a href="resultados electorales.htm">Resultados electorales</a></li>
</ul></li>
<li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span>TRANSPARENCIA</span></a>
<ul>
<li><a href="acuerdos asamblea.htm">Acuerdos de la Asamblea</a></li>
<li><a href="acuerdos consejo">Acuerdos del Consejo Político</a></li>
<li><a href="principios.htm">Principios ideológicos</a></li>
<li><a href="http://www.iucm.org/images/stories/documentos/EstatutosIUCM2013.pdf">Estatutos de IUCM</a></li>
<li><a href="finanzas.htm">Finanzas</a></li>
<li><a href="carta financiera.htm">Carta financiera de IUCM</a></li>
<li><a href="sede.htm">La sede de Velilla de San Antonio</a></li>
<li><a href="declaracion de intereses.htm">Declaración de intereses de concejales</a></li>
</ul></li>
<li class="topmenu"><a href="documentos.htm" style="height:18px;line-height:18px;">DOCUMENTOS</a></li>
<li class="topmenu"><a href="enlaces.htm" style="height:18px;line-height:18px;">ENLACES DE INTERÉS</a></li>
<li class="topmenu"><a href="#" style="height:18px;line-height:18px;">HISTORIAL DE NOTICIAS LOCALES</a></li>
<li class="toplast"><a href="contacto.htm" style="height:18px;line-height:18px;">CONTACTO</a></li>
</ul><p class="_css3m"><a href="http://css3menu.com/">drop down menu</a> by Css3Menu.com</p>


</body>

Y este es el archivo stile:

ul#css3menu1,ul#css3menu1 ul{
margin:0;list-style:none;padding:0;background-color:#dedede;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
ul#css3menu1 ul{
display:none;position:absolute;left:0;top:100%;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;background-color:#FFFFFF;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;border-color:#d4d4d4;padding:0 10px 10px;}
ul#css3menu1 li:hover>*{
display:block;}
ul#css3menu1 li{
position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1 li:hover{
z-index:1;}
ul#css3menu1{
font-size:0;width:100%;z-index:999;position:relative;display:inline-block;zoom:1;padding:0 0%;margin:0 0%;
*display:inline;*padding-right:0.72%;}
* html ul#css3menu1 li a{
display:inline-block;}
ul#css3menu1>li{
margin:0;width:12%;}
ul#css3menu1 li.toplast{
width:16%;}
body:first-of-type ul#css3menu1{
display:inline-table;border-spacing:0px 0;}
body:first-of-type ul#css3menu1>li{
display:table-cell;float:none;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
outline-style:none;}
ul#css3menu1 a{
display:block;vertical-align:middle;text-align:center;text-decoration:none;font:12px Verdana,Geneva,sans-serif;color:#ffffff;text-shadow:#FFF 0 0 1px;cursor:pointer;padding:7px 10px 7px 10px;background-color:#000000;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;}
ul#css3menu1 ul li{
float:none;margin:10px 0 0;}
ul#css3menu1 ul a{
text-align:left;padding:4px;background-color:#FFFFFF;background-image:none;border-width:0;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;font:12px Verdana,Geneva,sans-serif;color:#000;text-decoration:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
background-color:#f8ac00;border-color:#C0C0C0;border-style:solid;color:#000000;text-shadow:#FFF 0 0 1px;background-image:url("mainbk.png");background-position:0 100px;text-decoration:none;}
ul#css3menu1 span{
display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{
background-color:#FFFFFF;background-image:none;color:#868686;text-decoration:none;}
ul#css3menu1 li.topfirst>a{
border-radius:0px 0 0 0px;-moz-border-radius:0px 0 0 0px;-webkit-border-radius:0px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;}
ul#css3menu1 li.toplast>a{
border-radius:0 0px 0px 0;-moz-border-radius:0 0px 0px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:0px;-webkit-border-bottom-right-radius:0px;}
ul#css3menu1>li:nth-of-type(1){width:6%}ul#css3menu1>li:nth-of-type(2){width:15%}ul#css3menu1>li:nth-of-type(3){width:14%}ul#css3menu1>li:nth-of-type(4){width:11%}ul#css3menu1>li:nth-of-type(5){width:10%}ul#css3menu1>li:nth-of-type(6){width:14%}ul#css3menu1>li:nth-of-type(7){width:22%}ul#css3menu1>li:nth-of-type(8){width:8%}
@-moz-document url-prefix(){body:first-of-type ul#css3menu1{display:inline-block} body:first-of-type ul#css3menu1>li{display:block;float:left !important;}}

pzin · #2 (**permalink**) 01/07/2014, 08:18

Bienvenido al foro.

Tu código es absolutamente ilegible. Sin formato es una cosa, pero en rojo y todo seguido es un poc bestia. Cuando publiques código, usa la opción highlight.

¿En qué versión de IE no funciona? Cada versión de IE es un mundo. Muchas propiedades de CSS moderno no es interpretado mediante muchas versiones de IE, así que tendrás que ir viendo cuáles puedes usar o no.

Respecto a Dreamweaver y FrontPage, si se ve ahí mal pero en Chrome bien, entonces no tienes nada de qué preocuparte; nadie va a usar ningún editor WYSIWYG para ver tu página.