Foros del Web » Creando para Internet » CSS »

Problemas con Menú css en IE8

Estas en el tema de Problemas con Menú css en IE8 en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 20/07/2010, 11:42
Avatar de djcandido  
Fecha de Ingreso: junio-2009
Ubicación: San Salvador
Mensajes: 50
Antigüedad: 8 años, 6 meses
Puntos: 0
Problemas con Menú css en IE8

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.

Etiquetas: djcandido, horizontal, ie8
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:31.