Foros del Web » Creando para Internet » CSS »

Incompatibilidad explorer-firefox

Estas en el tema de Incompatibilidad explorer-firefox en el foro de CSS en Foros del Web. Hola!! A ver, mi problema es el siguiente: estoy intentando hacer una página sencillita, y mi primera idea fue hacerla con capas y asi practicar ...
  #1 (permalink)  
Antiguo 11/08/2007, 10:19
 
Fecha de Ingreso: diciembre-2004
Mensajes: 31
Antigüedad: 13 años
Puntos: 0
Pregunta Incompatibilidad explorer-firefox

Hola!!

A ver, mi problema es el siguiente: estoy intentando hacer una página sencillita, y mi primera idea fue hacerla con capas y asi practicar un poco con el css, pero fue un completo desastre porque en cada navegador se vea como le venía en gana, y como lo de los tamaños y el posicionamiento no los llevo muy bien pues decidi hacerlo con tablas y con css, pero aun no llevo ni la plantilla general y ya están ahi otra vez las incompatibilidades entre explorer y firefox!! (y eso que solo lo compruebo con dos navegadores) vamos fatal.

Si alguien es capaz de decirme que hago mal para que todo se descuadre de esta manera se lo agradecere de verdad.

Aqui dejo el código lo mas reducido que he podido:
Código HTML:
<html>
<head>

<style type="text/css">
	body{margin-top:0; margin-left:50px; margin-right:50px; margin-bottom:20px; padding:0; background:#FFFFFF;}
	
	table.General{ width:95%; height:100%; border-width:0; border-spacing:0; border-collapse:collapse}

	td.Cuerpo{text-align:right; background-color:#B8FBA2; border-style:solid; border-color:#000000; border-width:1px;}
	
	td.Cabecera{ border-width:0; padding:0;	background-color:#000000;}
		
	td.MenuSuperior{border-style:none; border-width:0;  background-color:#000000;}
	td.MenuSuperior ul{margin: 0; padding: 0; margin-bottom: 0; float: right; 
		font: bold 70% Verdana; background-color: #00FF00;	border: 1px solid #000000;
	}

	td.MenuSuperior ul li{display: inline;}
	td.MenuSuperior ul li a{ float: left; padding: 2px 12px;
		color: black; text-decoration: none; border-left-width:1px; border-left-style:dashed;
	}
	td.MenuSuperior ul li a:visited{color: black;}
	td.MenuSuperior ul li a:hover{color: black; background-color: #008800;}
	
	td.Noticias{background-color: #000000; font: bold 90% Verdana; padding: 0px; margin: 0px;}
	
	td.MenuLateral{position:relative; background-color: #B8FBA2; font: bold 95% Verdana; border-color:#FF6600;
		width:90px; height:50px; padding: 0px; margin: 0px; vertical-align:top; border-width:0; border-style:none; 
	}
	td.MenuLateral h1 {position:relative; display: block; background-color:#00FF00; color: #000000;
		font-size: 95%; padding: 3px 0 5px 3px; text-transform:uppercase; font-weight:1;
		border: 1px solid #000000; margin: 0px; width:100%; text-align:center; border-left: 7px solid #000000;
	}
	td.MenuLateral ul {list-style: none; margin: 0px; padding: 0px; border: none; text-align:left;}
	td.MenuLateral ul li {margin: 0px; padding: 0px;}
	td.MenuLateral ul li a {font-size: 80%; display: block; border-bottom: 1px dotted #333333; padding: 5px 0px 2px 4px;
		text-decoration: none;color: #666666;width:160px; border-left: 7px solid #000000;
	}
	td.MenuLateral ul li a:hover, #vertmenu ul li a:focus {	color: #000000;	background-color: #B8FBA2; border-bottom: 1px dotted #000000; 	}
</style>


</head>

<body>
	<table align="center" class="General">
	  <tr>
	  
	  	<!-- CELDA DE CABECERA DE LA PÁGINA -->
		<td colspan="2" height="80px" class="Cabecera">&nbsp;</td>
	  </tr>
	  <tr>
	  	<!-- CELDA DEL MENÚ DE NAVEGACIÓN SUPERIOR -->
	    <td colspan="2" height="10px" class="MenuSuperior">
				<ul>
					<li><a href="opcion1">Opcion 1</a></li>
					<li><a href="opcion2">Opcion 2</a></li>
					<li><a href="opcion3">Opcion 3</a></li>
				</ul>
		</td>
      </tr>
	  <tr>
	  	<!-- CELDA DE MENU LATERAL -->
		<td width="50px" class="MenuLateral">
			<h1>OPCION A</h1>
				<ul>
					<li><a href="opcion1">Opcion 1</a></li>
					<li><a href="opcion2">Opcion 2</a></li>
					<li><a href="opcion3">Opcion 3</a></li>
				</ul>
		</td>
		
		<!-- CELDA DE CONTENIDO -->
		<td rowspan="2" class="Cuerpo">&nbsp;</td>
	  </tr>
	  <tr>
	  	<!-- CELDA DE NOTICIAS -->
		<td class="Noticias" width="50px">&nbsp;</td>
	  </tr>
	</table>

</body>
</html> 
  #2 (permalink)  
Antiguo 11/08/2007, 12:45
 
Fecha de Ingreso: diciembre-2004
Mensajes: 31
Antigüedad: 13 años
Puntos: 0
Re: Incompatibilidad explorer-firefox

Sigo buscando soluciones, y al menos ya veo que el problema se encuentra en la clase MenuSuperior, supongo que me he hecho un lio al intentar reutilizar las clases que usaba para hacer las capas en las tablas. Aun asi, sigo sin saber que está mal.
  #3 (permalink)  
Antiguo 12/08/2007, 05:15
 
Fecha de Ingreso: diciembre-2004
Mensajes: 31
Antigüedad: 13 años
Puntos: 0
Re: Incompatibilidad explorer-firefox

Bueno, aunque parece que nadie sabe que le pasa a este diseño de las narices, he comprobado que si en el menu superior se dejan solo dos opciones, entonces funciona a la perfección. Es raro no?
  #4 (permalink)  
Antiguo 01/07/2008, 14:36
Avatar de IGNIS  
Fecha de Ingreso: junio-2003
Mensajes: 70
Antigüedad: 14 años, 6 meses
Puntos: 0
Respuesta: Incompatibilidad explorer-firefox

Hola, creo que esto esta un poco extemporaneo pero para los que apenas lo necesiten como yo, encontre este link que explica las diferencias que existen entre IE y otros navegadores como Firefox:

http://www.webmasterlibre.com/2006/0...C2%A1y-valido/

Mi problema radica en un menu CSS flotante, en firefox trabaja perfecto y en IE no.
__________________
La verdad es la llave, no la puerta.
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 09:43.