Estoy tratando de centrar un menu desplegabe Drop-Up.
Pero como siempre los problemas salen a la superficie cuando
se trata de los queridísimos y entrañables IE6 y 7
El problema es que me sale cortado por la mitad y los sublinks
aparecen poco menos de la mitad como si les faltara espacio.
De donde puede venir el problema/s
Se puede solucionar sólo con CSS, o tendría que
recurrir a alguna solución en JavaScript?
No se si alguien sabrá de alguna solucion para que se vea bien
en IE6 y 7 especificamente (en los demas navegadores se ve perfecto).
Lo agradeceré eternamente.
Dejo el XHTML y CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>CSS Drop-Up Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Stylesheets -->
<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/default.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper"><!-- Main Container Wrapper -->
<div id="footer"><!-- Footer with Main Navigation -->
<ul><!-- Beginning of Main Navigation -->
<li><a href="#">INICIO</a>
<ul>
<li>
<a href="#">Sub Link</a>
</li>
</ul>
</li><li class="pipe">|</li>
<li>
<a href="#">LOREM IPSUM</a>
<ul>
<li>
<a href="#">Sub Link</a>
</li>
</ul>
</li><li class="pipe">|</li>
<li>
<a href="#">PORTFOLIO</a>
<ul>
<li>
<a href="#">Sub Link Sub Link</a>
<a href="#">Sub Link Sub Link Sub Link</a>
</li>
</ul>
</li><li class="pipe">|</li>
<li>
<a href="#">LOREM IPSUM</a>
</li><li class="pipe">|</li>
<li>
<a href="#">BLOG</a>
<ul>
<li>
<a href="#">Sub Link Sub Link</a>
</li>
</ul>
</li><li class="pipe">|</li>
<li>
<a href="#">SERVICIOS</a>
</li><li class="pipe">|</li>
<li>
<a href="#">PRENSA</a>
</li><li class="pipe">|</li>
<li>
<a href="#">MULTIMEDIA</a>
</li><li class="pipe">|</li>
<li>
<a href="#">CONTACTO</a>
</li>
</ul><!-- End of Main Navigation -->
</div><!-- End of footer -->
</div><!-- End of Wrapper -->
</body>
</html>
@font-face {
font-family: 'FuturaLtBTLight';
src: url('../fonts/futuralightbt-webfont.eot');
src: local('☺'), url('../fonts/futuralightbt-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
html, body {
background:#86C9EF;
color: #FFF;
font-family: 'FuturaLtBTLight', Arial, sans-serif;
height:100%;
overflow:hidden;
}
/*-- FOOTER --*/
#footer {
background:#000;
border-top:1px solid #FFF;
font-size:14px;
-moz-opacity: 0.7; /* Moz proprietary opacity property */
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70 ); /* Microsoft proprietary filter property */
opacity: 0.7; /* CSS 3 opacity property */
position:absolute;
bottom:5px;
left:0;
right:0;
padding-bottom:10px;
}
/* Footer Main Navigation */
/* Top menu items */
#footer ul {
float:right;
position:relative;
right:50%;
-moz-opacity: 0.9; /* Moz proprietary opacity property */
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90 ); /* Microsoft proprietary filter property */
opacity: 0.9; /* CSS 3 opacity property */
}
#footer ul li {
float: left;
padding: 10px 0;
position:relative;
left:50%;
}
#footer ul li a {
display:block;
color: #FFF;
padding: 10px 10px;
text-decoration: none;
}
#footer ul li a:hover{
background-color: #333;
color: #FFF;
}
#footer ul li:hover a,
#footer ul li.hover a { /* This line is required for IE 6 and below */
background:#333; /* Top menu items background colour */
color:#FFF;
}
/* Submenu items */
#footer ul ul {
background:#000;
display:none; /* Sub menus are hiden by default */
padding:5px;
position:absolute;
bottom:50px;
left:0;
right:auto; /*resets the right:50% on the parent ul */
width:200px; /* width of the drop-down menus */
}
#footer ul ul li {
left:auto; /*resets the left:50% on the parent li */
margin:-10px 0; /* Reset the 1px margin from the top menu */
clear:left;
width:100%;
}
#footer ul ul li a,
#footer ul li.active li a,
#footer ul li:hover ul li a,
#footer ul li.hover ul li a { /* This line is required for IE 6 and below */
background:#000;
color:#FFF;
}
#footer ul ul li a:hover,
#footer ul li.active ul li a:hover,
#footer ul li:hover ul li a:hover,
#footer ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
background:#333; /* Sub menu items background colour */
color:#FFF;
}
/* Make the sub menus appear on hover */
#footer ul li:hover ul,
#footer ul li.hover ul { /* This line is required for IE 6 and below */
display:block; /* Show the sub menus */
}
/* Align the vertical pipe */
#footer li.pipe {
color:#FFF;
position:relative;
top:10px;
}
Un saludo y gracias de antemano
