Menú se ve bien en página principal pero mal en otras (IE8 y anteriores)

DanielitoDG · #1 (**permalink**) 13/12/2013, 02:04

Buenos días.

Llevo un tiempo con este problema y por más que hago cambios, consulta a San Google y me leo y releo el código no consigo encontrar el error que hace que mi página web se vea mal en Internet Explorer (funciona bien en Mozilla y Chrome).

La web es esta: [URL="http://www.viatgesbetulo.com/nueva/index.php"]http://www.viatgesbetulo.com/nueva/index.php[/URL]

Cuando se accede con Internet Explorer 8 o anteriores no se aprecia ningún tipo de problema: menú horizontal desplegable hacia abajo, al pasar se muestra el efecto previsto y los enlaces funcionan bien. El problema viene cuando se quiere enlazar a alguna de las opciones del menú (en este caso, por ejemplo, a la sección "[URL="http://www.viatgesbetulo.com/nueva/productos.php"]PRODUCTOS[/URL]").

Ya veis que entonces es cuando tengo el problema, el menú aparece en forma de lista y me descoloca toda la página web.

Llevo desde el fin de semana pasado comiéndome la cabeza por averiguar qué es lo que puede estar pasando y si tengo alguna cosa mal en el código o simplemente es un problema de interpretación del mismo por parte de Internet Explorer, aunque me extraña que en la web principal se vea bien y después en las secciones mal

.

Agradecería si algunos de los expertos del Foro me pudiera ayudar con esto, ya que no se me ocurre qué más puedo probar.

Os dejo por aquí el código de la cabecera (header):

Cita:

<head>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/menu_horizontal.css"/>
<link rel="shortcut icon" type="image/ico" href="img/favicon.ico"/>
</head>
<header>
<div id="header">
<div id="logotipo">
<a href="index.php"><img src="img/logo.png" width="400px" height="70px" align="left" hspace="30" vspace="15"></img></a>
</div>
<div id="socio">
<a href="http://www.grupogea.com/" target="_blank"><img src="img/logo_gea.png" width="70px" height="70px" align="right" hspace="30" vspace="15"></img></a>
</div>
</div>
</header>
<body>
<nav>
<div id="menu">
<div id="menu_principal">
<ul>
<li><a href="productos.php"><span>Productos</span></a>
</li>
<li><a href="financiacion.php"><span>Financiación</span></a>
</li>
<li><a href="cajas_regalo.php"><span>Cajas Regalo</span></a>
</li>
<li><a href="ofertas.php"><span>Ofertas</span></a>
<ul>
<li><a href="ofertas.php?categoria=0"><span>Baleares</span></a></li>
<li><a href="ofertas.php?categoria=1"><span>Canarias</span></a></li>
<li><a href="ofertas.php?categoria=2"><span>Norte de África</span></a></li>
<li><a href="ofertas.php?categoria=3"><span>Caribe</span></a></li>
<li><a href="ofertas.php?categoria=4"><span>Europa</span></a></li>
<li><a href="ofertas.php?categoria=5"><span>Escapadas</span></a></li>
<li><a href="ofertas.php?categoria=6"><span>Puentes</span></a></li>
<li><a href="ofertas.php?categoria=7"><span>Cruceros</span></a></li>
<li><a href="ofertas.php?categoria=8"><span>Larga Distancia</span></a></li>
<li><a href="ofertas.php?categoria=9"><span>Nieve</span></a></li>
</ul>
</li>
<li><a href="#"><span>Información Viajeros</span></a>
<ul>
<li><a href="http://www.aemet.es" target="_blank"><span>Tiempo</span></a></li>
<li><a href="http://www.horamundial.com" target="_blank"><span>Horario Mundial</span></a></li>
<li><a href="http://www.xe.com" target="_blank"><span>Cambio Divisas</span></a></li>
<li><a href="http://www.visados.org" target="_blank"><span>Visados</span></a></li>
<li><a href="http://www.msps.es/sanitarios/consejos/vacExt.do" target="_blank"><span>Recomendaciones Sanitarias</span></a></li>
<li><a href="http://www.viajeteca.com" target="_blank"><span>Información Destino</span></a></li>
<li><a href="http://www.aeropuertos.net" target="_blank"><span>Aeropuertos</span></a></li>
</ul>
</li>
<li><a href="oficina.php"><span>Oficina</span></a>
</li>
<li><a href="servicio_empresas.php"><span>Servicio Empresas</span></a>
</li>
</ul>
</div>
</div>
</nav>
</body>

Y por aquí os dejo el código de la página en la que el menú se ve mal:

Cita:

<?php
header ('Content-Type: text/html; charset=utf-8');
include('header.php');
?>

<ul style="list-style-image: url(img/list.png); font-size: 15pt;">
<li>Billetes de avión, tren y barco.</li>
<li>Reservas de hotel.</li>
<li>Alquiler de vehículos.</li>
<li>Seguros de viajes.</li>
<li>Venta de entradas de espectáculos de teatro, musicales, deportivos, parques de atracciones, etc.</li>
<li>Documentación y visados.</li>
<li>Excursiones.</li>
<li>Circuitos en autocar, aéreo-terrestres.</li>
<li>Cruceros.</li>
<li>Viajes de novios.</li>
<li>Viajes de empresa.</li>
<li>Vacaciones playa-montaña.</li>
<li>Viajes IMSERSO.</li>
<li>Viajes organizados.</li>
<li>Viajes de grupo : empresas, asociaciones o fin de curso.</li>
<li>Grandes viajes.</li>
</ul>

<?php include('footer.php'); ?>

Y por si puede servir para algo el CSS del menú:

Cita:

#menu {
list-style: none;
}

#menu_principal {
width: 1024px; /* ancho del contenedor de menú */
height: 27px; /* alto del contenedor de menú */
border: none;
background: #807777; /* color del contenedor de menú */
/*padding-top: 0px;
padding-bottom: 0px;*/
}

#menu_principal > ul { /* ESTILO DE LA BARRA DE MENÚ */
padding-top: 0px; /* espacio antes del menú dentro del contenedor */
padding-bottom: 0px; /* espacio después del menú dentro del contenedor */
padding-left: 0px;
padding-right: 0px;
margin: 0px;
list-style: none;
width: 1024px;
height: 27px; /* altura del contenedor de menú */
border-top: none; /* espacio antes del contenedor de menú */
border-bottom: 3px solid #000000; /* espacio después del contenedor de menú */
font-size: 11px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, Sans-serif;
position: relative;
}

#menu_principal > ul li { /* ESTILO DEL CONTENEDOR DE LAS OPCIONES DE MENÚ */
margin: 0px;
padding: 0px;
display: block !important;
float: left;
position: relative;
width: 145px; /* ancho secciones del menú */
}

#menu_principal > ul li a:link, #menu_principal > ul li a:visited { /* ESTILO DE LAS OPCIONES DE MENÚ EN ESTADO NORMAL */
padding: 6px 0; /* primer valor: margen por encima y debajo de las letras , segundo valor: margen a izquierda y derecha de las letras */
display: block !important;
text-align: center;
text-decoration: none;
background: #807777; /* color del fondo de la celda */
color: #FFFFFF; /* color de las letras */
width: 145px; /* ancho de las secciones del menú */
height: 15px; /* alto de las secciones del menú */
}

#menu_principal > ul li:hover a, #menu_principal > ul li a:hover, #menu_principal > ul li a:active { /* ESTILO DE LAS OPCIONES DE MENÚ AL PASAR POR ENCIMA */
padding: 6px 0;
display: block !important;
text-align: center;
text-decoration: none;
background: #323030; /* color al pasar por encima de una sección del menú */
color: #FFFFFF; /* color de la letra al pasar por encima de una sección del menú */
width: 143px;
height: 15px;
border-left: 1px solid #FFFFFF; /* margen a la izquierda del contenedor de una sección del menú */
border-right: 1px solid #FFFFFF; /* margen a la derecha del contenedor de una sección del menú */
}

#menu_principal > ul li ul {
margin: 0;
padding: 1px 1px 0;
list-style: none;
display: none;
background: #FFFFFF;
width: 143px; /* ancho del contenedor de una opción de sección del menú */
position: absolute;
top: 27px; /* margen entre la sección del menú y el desplegable */
left: 0px; /* margen por la izquierda donde empieza el contenedor de una opción de sección del menú */
border: 0px solid #323030; /* borde del contenedor de una opción de sección del menú */
border-top: none;
}

#menu_principal > ul li:hover ul {
display: block;
}

#menu_principal > ul li ul li {
clear: left;
width: 143px;
}

#menu_principal > ul li ul li a:link, #menu_principal > ul li ul li a:visited {
clear: left;
background: #323030;
padding: 4px 0;
width: 143px;
border: none;
border-bottom: 1px solid #FFFFFF;
position: relative;
z-index: 1000;
}

#menu_principal > ul li ul li:hover a, #menu_principal > ul li ul li a:active, #menu_principal > ul li ul li a:hover {
clear: left;
background: #1690E1; /* color al pasar por encima de una opción de sección del menú */
padding: 4px 0;
width: 143px;
border: none;
border-bottom: 1px solid #FFFFFF;
position: relative;
z-index: 1000;
}

Lo siento por el tocho... Pero es que ando ya desesperado y no sé qué hacer

.

pitufoweb · #2 (**permalink**) 13/12/2013, 03:57

Hola,

Lo único que te puedo recomendar es que leas un buen manual de HTML, por que tienes varios orrores en el código y así es muy difícil que funcione correctamente.

Saludos

DanielitoDG · #3 (**permalink**) 14/12/2013, 07:07

Cita:

Iniciado por pitufoweb

Lo único que te puedo recomendar es que leas un buen manual de HTML, por que tienes varios orrores en el código y así es muy difícil que funcione correctamente.

Bueno, gracias

.