Problema con Menu y barra CSS en Internet Explorer 8.0.6001.

IntoxicKat · 11 Enero 2010, 19:29 PM

Hola a todos, buen dia.

Tengo un problema. Es lo siguiente:

Estoy desarrollando un website en PHP, aunque no lleva mucho de php.

Hize un menú y una barra de pie de página con ayuda de hojas de estilo. En Firefox 3.0.5 se ve perfectamente el menú y la barra, excepto cuando redusco la pantalla como a 100 px de ancho por 700 px de alto. Es cuando el menú se ensima y la barra pie de página reduce su ancho. El otro problema es que en Internet Explorer 8.0.6001 se ve fatal tanto el menú como la barra pie de página.

Entonces quiero saber que tengo que modificar para solucionar el problema.

El código es el siguiente: index.php

Código [Seleccionar]

 <HTML>
<HEAD>
<TITLE> GRUPO TEC COMPUTADORAS S.A DE C.V. </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<LINK REL=StyleSheet HREF="Styles/Menu.css" TYPE="text/css" MEDIA=SCREEN>
<LINK REL=StyleSheet HREF="Styles/Textos.css" TYPE="text/css" MEDIA=SCREEN>
<link REL=StyleSheet HREF="Styles/taskbar.css" TYPE="text/css" MEDIA=SCREEN>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<?php include("libpagina.php") ?>
<?php CabeceraPagina(); ?>

<!-- Todo el cuerpo de la página... -->

<!-- Menu -->
<ul class="cssMenu cssMenum0">							   <!--#######Principal-->
	<li class=" cssMenui0"><a class="  cssMenui0" href="#"><span>Productos</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class=" cssMenum">									<!--#####Fin Principal-->
		<li class=" cssMenui"><a class="  cssMenui" href="#">Pc's</a></li>
		<li class=" cssMenui"><a class="  cssMenui" href="#">Laptops</a></li>
		<li class=" cssMenui"><a class="  cssMenuo" href="#"><span>Impresoras</span><![if gt IE6]></a><![endif]><!--]if lte IE6]><table><tr><td><![endif]-->
			<ul class=" cssMenum">
			<li class=" cssMenui"><a class="  cssMenui" href="#">Inyecci&oacute;n</a></li>
			<li class=" cssMenui"><a class="  cssMenui" href="#">Laser</a></li>
			<li class=" cssMenui"><a class="  cssMenui" href="#">Matriz de punto</a></li>
			<li class=" cssMenui"><a class="  cssMenui" href="#">Multifuncional</a></li>
			</ul>		
		<li class=" cssMenui"><a class="  cssMenui" href="#">Copiadoras</a></li>
		<li class=" cssMenui"><a class="  cssMenui" href="#">Faxes</a></li>
		<li class=" cssMenui"><a class="  cssMenui" href="#">Monitores</a></li>
		<li class=" cssMenui"><a class="  cssMenui" href="#">Scanners</a></li>
		<li class=" cssMenui"><a class="  cssMenui" href="#">C&aacute;maras digitales</a></li>
		<li class=" cssMenum"><a class="  cssMenui" href="#">Otros</a></li>
		<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
	</ul>													<!--#####Principal-->
	<li class=" cssMenui0"><a class="  cssMenui0" href="#"><span>Consumibles</span><![if gt IE6]></a><![endif]><!--[if lte IE6]><table><tr><td><![endif]-->
		<ul class=" cssMenum">								<!--####Fin principal-->
		<li class=" cssMenui"><a class="  cssMenui" href="papel.php">Papel</a></li>
		<li class=" cssMenui"><a class="  cssMenui" href="#">Cartuchos</a></li>
		<li class=" cssMenui"><a class="  cssMenui" href="#">Toners</a></li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <!--#####Principal-->
	<li class=" cssMenui0"><a class="  cssMenui0" href="#"><span>Servicios</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul class=" cssMenum">							   <!--#####Fin principal-->
		<li class=" cssMenui"><a class="  cssMenui" href="#">Prestamos</a></li>
		<li class=" cssMenui"><a class="  cssMenui" href="#">Mantenimiento preventivo</a></li>
		</ul>	
	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>			   <!--####Principal-->
	<li class=" cssMenui0"><a class="  cssMenui0" href="#"><span>Cont&aacute;ctanos</span><![if gt IE6]></a><![end if]><!--[if lte IE6]><table><tr><td><![endif]-->
		<ul class=" cssMenum">												<!--####Fin Principal-->
		<li class=" cssMenui"><a class=" cssMenui" href="#">Ubicanos</a></li>
		<li class=" cssMenui"><a class=" cssMenui" href="#">Por correo electr&oacute;nico</a></li>
		<li class=" cssMenui"><a class=" cssMenui" href="formulario.php">Comentarios</a></li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!-- FIN MENU --> 
Ruta de navegaci&oacute;n. D&oacute;nde estoy?

<!-- Promos ...-->
<BR> <BR> <BR>
<CENTER>
<TABLE WIDTH="90%" HEIGHT="55%" BORDER="1" SUMMARY="PROMOCIONES!">
<TR>
<TD> 
<IMG SRC="images/HP2.GIF" ALT="HP">
<IMG SRC="images/LEXMARK1.GIF" ALT="LEXMARK">
<IMG SRC="images/COMPAQ1.JPG" ALT="COMPAQ">
<IMG SRC="images/TEXA1.GIF" ALT="TEXA">
<IMG SRC="images/EPSON1.GIF" ALT="EPSON">
<IMG SRC="images/canon-logo.jpg" ALT="CANON" width="150">
<IMG SRC="images/brother-logo.jpg" ALT="BROTHER" width="150">
<IMG SRC="images/samsung-logo.jpg" ALT="SAMSUNG" width="150">
 </TD>
</TR>
</TABLE>
</CENTER>
<!-- FIN PROMOS ...-->


textotextotextotextotextotextotextotextotextotextotextotextotextotextotextotexto
textotextotextotextotextotextotextotextotextotextotextotextotextotextotextotexto
textotextotextotextotextotextotextotextotextotextotextotextotexto


<!--Fin cuerpo página... -->

.............
.............
<BR> <BR>
<center>
<?php PiePagina(); ?>
</center>
</BODY>
</HTML>

La hoja de estilo del menú es la siguiente:
Menu.css en la carpeta "Styles"

Código [Seleccionar]

 ul.cssMenu ul{display:none}
ul.cssMenu li:hover>ul{display:block}
ul.cssMenu ul{position: absolute;left:-1px;top:100%;}
ul.cssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.cssMenu,ul.cssMenu ul {
	margin:0px;
	list-style:none;
	padding:0px 2px 2px 0px;
	background-color:#fff;
	background-repeat:repeat;
	border-color:#808080;
	border-width:1px;
	border-style:solid;
}
ul.cssMenu table {border-collapse:collapse}ul.cssMenu {
	display:block;
	zoom:1;
	height:21px;
	float: left;
}
ul.cssMenu ul{
	width:194.25px;
}
ul.cssMenu li{
	display:block;
	margin:2px 0px 0px 2px;
	font-size:0px;
}
ul.cssMenu a:active, ul.cssMenu a:focus {
outline-style:none;
}
ul.cssMenu a, ul.cssMenu li.dis a:hover, ul.cssMenu li.sep a:hover {
	display:block;
	vertical-align:middle;
	background-color:#FFFFFF;
	border-width:1px;
	border-color:#fff;
	border-style:solid;
	text-align:center;
	text-decoration:none;
	padding:2px 5px 5px 10px;
	_padding-left:0;
	font:15px Tahoma;
	color: #000;
	text-decoration:none;
	cursor:default;
}
ul.cssMenu span{
	overflow:hidden;
}
ul.cssMenu li {
	float:left;
}
ul.cssMenu ul li {
	float:none;
}
ul.cssMenu ul a {
	text-align:left;
	white-space:nowrap;
}
ul.cssMenu li.sep{
	text-align:left;
	padding:0px;
	line-height:0;
	height:100%;
}
ul.cssMenu li.sep span{
	float:none;	padding-right:0;
	width:3px;
	height:100%;
	display:inline-block;
	background-color:#808080;	background-image:none;}
ul.cssMenu ul li.sep span{
	width:100%;
	height:3px;
}
ul.cssMenu li:hover{
	position:relative;
}
ul.cssMenu li:hover>a{
	background-color:#DBF0F9;
	border-color:#45ADE4;
	border-style:solid;
	font:15px Tahoma;
	color: #444;
	text-decoration:none;
}
ul.cssMenu li a:hover{
	position:relative;
	background-color:#DBF0F9;
	border-color:#45ADE4;
	border-style:solid;
	font:15px Tahoma;
	color: #444;
	text-decoration:none;
}
ul.cssMenu li.dis a {
	color: #557D4F !important;
}
ul.cssMenu img {border: none;float:left;_float:none;margin-right:2px;width:16px;
height:16px;
}
ul.cssMenu ul img {width:16px;
height:16px;
}
ul.cssMenu img.over{display:none}
ul.cssMenu li.dis a:hover img.over{display:none !important}
ul.cssMenu li.dis a:hover img.def {display:inline !important}
ul.cssMenu li:hover > a img.def  {display:none}
ul.cssMenu li:hover > a img.over {display:inline}
ul.cssMenu a:hover img.over,ul.cssMenu a:hover ul img.def,ul.cssMenu a:hover a:hover ul img.def,ul.cssMenu a:hover a:hover img.over,ul.cssMenu a:hover a:hover a:hover img.over{display:inline}
ul.cssMenu a:hover img.def,ul.cssMenu a:hover ul img.over,ul.cssMenu a:hover a:hover ul img.over,ul.cssMenu a:hover a:hover img.def,ul.cssMenu a:hover a:hover a:hover img.def{display:none}
ul.cssMenu a:hover ul,ul.cssMenu a:hover a:hover ul{display:block}
ul.cssMenu a:hover ul ul{display:none}
ul.cssMenu span{
	display:block;
	background-image:url(../images/arrv_white.gif);
	background-position:right center;
	background-repeat: no-repeat;
   padding-right:9px;}
ul.cssMenu ul span{background-image:url(../images/arr_black.gif)}
ul.cssMenu ul li:hover > a span{	background-image:url(../images/arr_white.gif);}
ul.cssMenu table a:hover span,ul.cssMenu table a:hover a:hover span{background-image:url(../images/arr_white.gif)}
ul.cssMenu table a:hover table span{background-image:url(../images/arr_black.gif)}
ul.cssMenu li.cssMenui0 {
width:110px;
height:23px;
}
ul.cssMenu li a.cssMenui0{
height:100%;
background-image:url(../images/btn3.jpg);
border-width:0px;
font:normal 11px Tahoma;
color:#fff;
}
ul.cssMenu li a.cssMenui0:hover{
background-image:url(../images/btn4.jpg);
font:normal 11px Tahoma;
color:#eee;
}
 ul.cssMenum0 {
background-color:transparent;
border-width:0px;
	padding:0px 0px 0px 0px;
}
 ul.cssMenum0>li>a {
padding:8px 10px 0px 10px;
}
 ul.cssMenum0 a {
padding:8px 10px 0px 10px;
}
 ul.cssMenum0 ul a {
padding:2px 5px 5px 10px;
}
 ul.cssMenum0>li {
margin:0px 0px 0px 0px;
}
 ul.cssMenum0 li {
margin:0px 0px 0px 0px;
}
 ul.cssMenum0 li li {
margin:2px 0px 0px 2px;
}

El código de la barra es el siguiente: taskbar.css

Código [Seleccionar]

/* CSS Documento */
body{
	text-align:center;
}
#taskbar{
	height:35px;
	width:100%;
	margin:auto;
	position: absolute;
	bottom: auto;
	z-index: 99;
}
#taskbar #container{
	background-color:#0080FF; /*Color de fondo en la barra*/
	border:1px solid #B5B5B5; /*Color del borde*/
	display:block;
	margin-left:1px;
	margin-right:15px;
	height:55px;  /*Alto de la barra*/
}

Y el contenido de libpagina.php

Código [Seleccionar]

 <?php
   function CabeceraPagina()
   {
	print('<CENTER> <A HREF="index.php"><IMG SRC="images/logo02.bmp" 
				    BORDER="0" VSPACE=0 HSPACE=0 WIDTH="990" HEIGHT="100" ALT="LOGO ENCABEZADO"> </CENTER></A>');
   }
?>   
<?php 
	function PiePagina()
	{
		print('<div id="taskbar">');
		print('<div id="container">');
		print("TEXTO 13456799TXTO");
		print("</div>");
		print("</div>");	
	}  
?>

Se que hasta les a de dar weba leer todo el código, pero si no lo leen aunque sea diganme que sitio leer para entender esto de la incompatibilidad con estupido internet explorer de *****.

Un gran saludo y gracias por tomarte la molestia de analizar el código.

Saludos!

Mr. Crowley · 11 Enero 2010, 19:38 PM

Seeee, que weba!

IntoxicKat · 12 Enero 2010, 00:11 AM

Mr. Crowley, hahaaha

Si se opina es para contribuir. Esto no es el messenger.

Nakp · 12 Enero 2010, 00:27 AM

claro... el menu se "encima" porque reduces el ancho y la barra modifica su tamaño has definido la barra del pie de página con width:100%; (ancho fluido), si no quieres que cambien con el ancho de la pantalla debes usar anchos fijos (no porcentajes)

sobre IE no puedo ayudarte si no la subes a un servidor para verla directamente xD

IntoxicKat · 12 Enero 2010, 19:52 PM

Muchas gracias Nakp. Solución efectiva a la barra pie de página. La solución es algo lógico, pero soy un menso. hehe

Mira, he subido la web a iespana. Y el mismo error.

Se ve del asco en Internet Explorer y en Firefox se ve bien.

Gracias por la ayuda.

Alguien conoce un sitio donde me expliquen el por qué de esta jalada? Me imagino que tengo que modificar unas cosas en el codigo del menu. Se ve que el problema es con la compatibilidad de CSS

Saludos!

IntoxicKat · 10 Febrero 2010, 01:53 AM

Hola a todos.

Se borró el link del sitio para que vean como se ve la pagina? O lo borraron, no lo sé.

Vean como se ve mal el sitio en general con el internet explorer. Con firefox se ve perfecto.

http://intoxickat.iespana.es/

intoxickat.iespana.es

Alguien podría ayudarme a solucionar el problema?

Un saludo a todos, y gracias de antemano.

elquenosabe · 10 Febrero 2010, 04:36 AM

y si de puritita casualidad le pones esta linea hasta el principio de tu codigo (index.php)

Código [Seleccionar]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

tal vez funcione no se bien pero puede servirte digo yo estoy jugando al dale dale dale no pierdas el tino jojojo espero te sirva, salu2

IntoxicKat · 10 Febrero 2010, 16:46 PM

-Que tal elquenosabe,

Puse la linea de código que me diste hasta el principio del index, antes de la etiqueta <HTML> y si cambió la apariencia, pero sólo se ve una parte del menu bien, lo demas se ve feo, como si fueran viñetas.

En Firefox se sigue viendo bien después de agregar la linea al index. Al parecer el error de mi codigo tiene que ver con estas lineas, pero no se bien que sifnifica: (se repiten a lo largo del menu)

Código [Seleccionar]

<![if gt IE 6]></a><![endif]>

Espero una orientación satisfactoria.

De antemano muchar gracias.

Un saludo!

elquenosabe · 10 Febrero 2010, 17:38 PM

aqui esta la respuesta a todo tus problemas bueno yo lo veo bien en IE y FF no se que hice pero ya quedo jojojo broma solo quite esas lineas que comentas, no hay que descargar codigos de internet si no les entendemos jejeje

Código [Seleccionar]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE> GRUPO TEC COMPUTADORAS S.A DE C.V. </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<LINK REL=StyleSheet HREF="Styles/Menu.css" TYPE="text/css" MEDIA=SCREEN>
<LINK REL=StyleSheet HREF="Styles/Textos.css" TYPE="text/css" MEDIA=SCREEN>
<link REL=StyleSheet HREF="Styles/taskbar.css" TYPE="text/css" MEDIA=SCREEN>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
   <CENTER> <A HREF="index.php"><IMG SRC="images/logo02.bmp" 				    BORDER="0" VSPACE=0 HSPACE=0 WIDTH="990" HEIGHT="100" ALT="LOGO ENCABEZADO"> </CENTER></A>


<ul class="cssMenu cssMenum0">							  
	<li class=" cssMenui0"><a class="  cssMenui0" href="#"><span>Productos</span>
	<ul class=" cssMenum">									
		<li class=" cssMenui"><a class="  cssMenui" href="#">Pc's</a></li>

		<li class=" cssMenui"><a class="  cssMenui" href="#">Laptops</a></li>
		<li class=" cssMenui"><a class="  cssMenuo" href="#"><span>Impresoras</span>
			<ul class=" cssMenum">
			<li class=" cssMenui"><a class="  cssMenui" href="#">Inyecci&oacute;n</a></li>
			<li class=" cssMenui"><a class="  cssMenui" href="#">Laser</a></li>
			<li class=" cssMenui"><a class="  cssMenui" href="#">Matriz de punto</a></li>

			<li class=" cssMenui"><a class="  cssMenui" href="#">Multifuncional</a></li>
			</ul>		
		<li class=" cssMenui"><a class="  cssMenui" href="#">Copiadoras</a></li>
		<li class=" cssMenui"><a class="  cssMenui" href="#">Faxes</a></li>
		<li class=" cssMenui"><a class="  cssMenui" href="#">Monitores</a></li>
		<li class=" cssMenui"><a class="  cssMenui" href="#">Scanners</a></li>
		<li class=" cssMenui"><a class="  cssMenui" href="#">C&aacute;maras digitales</a></li>

		<li class=" cssMenum"><a class="  cssMenui" href="#">Otros</a></li>
		
	</ul>													
	<li class=" cssMenui0"><a class="  cssMenui0" href="#"><span>Consumibles</span>
		<ul class=" cssMenum">								
		<li class=" cssMenui"><a class="  cssMenui" href="papel.php">Papel</a></li>

		<li class=" cssMenui"><a class="  cssMenui" href="cartuchos.php">Cartuchos</a></li>
		<li class=" cssMenui"><a class="  cssMenui" href="toners.php">Toners</a></li>
		</ul>
	
	<li class=" cssMenui0"><a class="  cssMenui0" href="#"><span>Servicios</span><
		<ul class=" cssMenum">							  

		<li class=" cssMenui"><a class="  cssMenui" href="#">Prestamos</a></li>
		<li class=" cssMenui"><a class="  cssMenui" href="#">Mantenimiento preventivo</a></li>
		</ul>	
	
	<li class=" cssMenui0"><a class="  cssMenui0" href="#"><span>Cont&aacute;ctanos</span>
		<ul class=" cssMenum">											

		<li class=" cssMenui"><a class=" cssMenui" href="#">Ubicanos</a></li>
		<li class=" cssMenui"><a class=" cssMenui" href="#">Por correo electr&oacute;nico</a></li>
		<li class=" cssMenui"><a class=" cssMenui" href="formulario.php">Comentarios</a></li>
		</ul>

</ul>

Ruta de navegaci&oacute;n. D&oacute;nde estoy?



<BR> <BR> <BR>
<CENTER>
<TABLE WIDTH="90%" HEIGHT="55%" BORDER="1" SUMMARY="PROMOCIONES!">
<TR>
<TD> 
<IMG SRC="images/HP2.GIF" ALT="HP">
<IMG SRC="images/LEXMARK1.GIF" ALT="LEXMARK">
<IMG SRC="images/COMPAQ1.JPG" ALT="COMPAQ">
<IMG SRC="images/TEXA1.GIF" ALT="TEXA">
<IMG SRC="images/EPSON1.GIF" ALT="EPSON">
<IMG SRC="images/canon-logo.jpg" ALT="CANON" width="150">
<IMG SRC="images/brother-logo.jpg" ALT="BROTHER" width="150">
<IMG SRC="images/samsung-logo.jpg" ALT="SAMSUNG" width="150">
 </TD>

</TR>
</TABLE>
</CENTER>
<!-- FIN PROMOS ...-->


textotextotextotextotextotextotextotextotextotextotextotextotextotextotextotexto
textotextotextotextotextotextotextotextotextotextotextotextotextotextotextotexto
textotextotextotextotextotextotextotextotextotextotextotextotexto


<!--Fin cuerpo página... -->

.............
.............
<BR> <BR>
<center>
</BODY>
</HTML>

espero que te sirva salu2

IntoxicKat · 10 Febrero 2010, 18:24 PM

Hola elquenosabe.

Azu, de no saber nomas el nick tienes eh!

Muchas gracias amigo!

Quedó perfecto, de verdad gracias. Me comprometo a ayudar a otros de ves en cuando, es que la verdad ando super apurado con la chamba.

Gracias, sigue adelante asi.

Un saludos!