Saludos, tengo un submenu que utilizo en mis sitios webs, pero ahora lo quiero utilizar para un sistema en php, el problema es que no sé que linea del css debo editar.
El submenu me funciona en los siguientes navegadores:
Mozilla Firefox desde la 2.5 hasta la 3.6.6
Internet Explorer 6,7
Pero no me funciona del todo bien en Internet Explorer 8.
El submenu se ubica en una posicion diferente cada vez que hago Refresh, aunque las opciones, colores distribucion lineal es correcta, pero en ocaciones me aparece en el pie de pagina, otras ocaciones me aparece en medio de la pagina y otras ocaciones si aparece en la posicion correcta.
Presento el codigo css.
Código HTML:
body{
background:#09F url(/sipe/img/bg1.png) repeat;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin:0 0 0 0;
padding:0 0 0 0;
}
/*****************************************
MENU
*****************************************/
/*URL: http://www.cssplay.co.uk/menus/pro_seventeen */
.preload17a {background: url(../img/menu/pro_seventeen_1a.gif);}
.preload17b {background: url(../img/menu/pro_seventeen_1b.gif);}
.menu17 {padding:5x 0 0 1em; margin:0; list-style:none; height:35px; position:relative; background:transparent url(../img/menu/pro_seventeen_0c.gif) repeat-x left bottom; font-size:11px;}
.menu17 li {float:left; height:35px; margin-right:1px;}
.menu17 li a {display:block; float:left; height:35px; line-height:33px; color:#333; text-decoration:none; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 4px; cursor:pointer; background:url(../img/menu/pro_seventeen_0a.gif) no-repeat;}
.menu17 li a b {float:left; display:block; padding:0 16px 5px 12px; background:url(../img/menu/pro_seventeen_0b.gif) no-repeat right top;}
.menu17 li.current a {color:#000; background:url(../img/menu/pro_seventeen_2a.gif) no-repeat;}
.menu17 li.current a b {background:url(../img/menu/pro_seventeen_2b.gif) no-repeat right top;}
.menu17 li a:hover {color:#000; background: url(../img/menu/pro_seventeen_1a.gif) no-repeat;}
.menu17 li a:hover b {background:url(../img/menu/pro_seventeen_1b.gif) no-repeat right top;}
.menu17 li.current a:hover {color:#000; background: url(../img/menu/pro_seventeen_2a.gif) no-repeat; cursor:default;}
.menu17 li.current a:hover b {background:url(../img/menu/pro_seventeen_2b.gif) no-repeat right top;}
/********************
FIN MENU
********************/
/**************************
SUBMENU
***************************/
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.animatedtabs{
border-bottom: 0px solid gray;
overflow: hidden;
width: 100%;
font-size: 10px; /*font of menu text*/
}
.animatedtabs ul{
list-style-type: none;
margin: 0;
margin-left: 10px; /*offset of first tab relative to page left edge*/
padding: 0;
}
.animatedtabs li{
float: left;
margin: 0;
padding: 0;
}
.animatedtabs a{
float: left;
position: relative;
top: 5px; /* 1) Number of pixels to protrude up for selected tab. Should equal (3) MINUS (2) below */
background: url(../img/menu/tab-blue-left.gif) no-repeat left top;
margin: 0;
margin-right: 3px; /*Spacing between each tab*/
padding: 0 0 0 9px;
text-decoration: none;
}
.animatedtabs a span{
float: left;
/*position: relative;*/
display: block;
background: url(../img/menu/tab-blue-right.gif) no-repeat right top;
padding: 5px 14px 3px 5px; /* 2) Padding within each tab. The 3rd value, or 3px, should equal (1) MINUS (3) */
font-weight: bold;
color: black;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
.animatedtabs a span {float:none;}
/* End IE5-Mac hack */
.animatedtabs .selected a{
background-position: 0 -125px;
top: 0;
}
.animatedtabs .selected a span{
background-position: 100% -125px;
color: black;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}
.animatedtabs a:hover{
background-position: 0% -125px;
top: 0;
}
.animatedtabs a:hover span{
background-position: 100% -125px;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}
/**************
FIN SUBMENU
***************/
Lo aplico de la siguiente forma:
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="/sipe/css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<span class="preload17a"></span>
<span class="preload17b"></span>
<ul class="menu17">
<li><a href="../welcome.php"><b>Inicio</b></a></li>
<li><a href="../reportes/reportes.php"><b>Búsquedas y Reportes</b></a></li>
<li class="current"><a href="./internos.php"><b>Internos</b></a></li>
<li><a href="../penales/penales.php"><b>Centros Penales</b></a></li>
<li><a href="../penas-delitos/penas.php"><b>Penas y Delitos</b></a></li>
<li><a href="../juzgados/juzgados.php"><b>Juzgados</b></a></li>
<!--li><a href="#nogo"><b>Reportes</b></a></li-->
<li><a href="../usuarios/usuarios.php"><b>Usuarios</b></a></li>
<li><a href="../cerrar_sesion.php"><b>Cerrar Sesion</b></a></li>
</ul>
<div class="animatedtabs">
<ul>
<li class="selected"><a href="#" title="Administración de Datos Personales"><span>Datos Personales</span></a></li>
<li><a href="fotos.php" title="Administración de Fotos"><span>Foto</span></a></li>
<li><a href="./datos_juridicos.php" title="Administración de Datos Jurídicos"><span>Datos Jurídicos</span></a></li>
<li><a href="traslados.php" title="Administración de traslados"><span>Traslado</span></a></li>
<li><a href="incidencias.php" title="Administración de Incidencias"><span>Incidencias</span></a></li>
<li><a href="./datos_historicos.php" title="Administración de datos históricos"><span>Histórico</span></a></li>
</ul>
</div>
</body>
</html> Esta es la pantalla:
[URL="http://hosting.deimagenes.com/imagen/submenu.jpg"]http://hosting.deimagenes.com/imagen/submenu.jpg[/URL]
Pues no sé que linea de codigo tengo que modificar en el css para que no me aparezcan estos problemas en el submenu, y especificamente en el internet explorer 8.