Tema: Con IE funciona bien pero no con Firefox
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 29/11/2007, 13:46
gutiw
 
Fecha de Ingreso: marzo-2005
Ubicación: Puerto Viejo - Costa Rica
Mensajes: 125
Antigüedad: 20 años, 2 meses
Puntos: 0
Con IE funciona bien pero no con Firefox
Un saludo a todos:
El problema que tengo es que en Mozilla se descuelga la columna de en medio y sube un poco la de la izq. pero en IE se ve bien.
La dirección para verlo es www.purejunglespa.com

Gracias por los consejos.
Código: 
/* CSS Document */
* {
	margin:0;
	padding:0;
	border: 0 none;
}
html, body {
	background-image: url(../imagenes/fondos/fondo_banano.jpg);
	font-family: Arial, Helvetica, sans-serif;
	width: 100%;
	height: 100%;
}

h1 {
	font-size:120%;
	margin-bottom: 8px;
}
h2{
	font-size:85%;
	text-align: center;
	margin: 0 auto;
	display: block;
	font-weight: bold;
}
h3{
	font-size:85%;
	text-align: center;
	margin: 20px auto;
	display: block;
	font-weight: bold;
}

span {
	margin: 0px auto;
	text-align: center;
	font-size: 75%;
	font-weight: bold;
	display: block;
	}
	
	/* GENERALES */
	
#cabecera, #navcontainer, #titulo, #pie{ 
	background-image:url(../imagenes/fondos/fondo_celdas.jpg)
	}  
	
	/* CLASES */
	
.costaPapito {
	width: 100px;
	height: 155px;
	margin: 5px 25px;
}
.presenta {
	width: 150px;
	float: left;
	position: absolute;
	margin-left: 20px;
}
.idioma {
	float: right;
}
.cabecera {
	font-size: 80%;
}
.imagen_index {
	margin: 10px auto;
	display: block;
	width: 220px;
}
.album {
	border: 0 none;
	margin: 0;
	width: 150px;
	float: left;
	background-image: url(../imagenes/fondos/fondo_celdas.jpg);
	text-align: right;
	padding-top: 15px;
	position: absolute;
	overflow: hidden;
	left: 10px;
}
.contenido_izq {
	width: auto;
	margin: 0 278px 0 153px;
	background-image: url(../imagenes/fondos/fondo_celdas.jpg);
	position: relative
}
.contenido_der {
	margin: 0pt;
	width: 277px;
	float: right;
	background-image: url(../imagenes/fondos/fondo_celdas.jpg);
	position: relative;
}
.imagen_sup {
	width: 180px;
	height: 120px;
	margin: 20px auto;
	display: block;
	border: solid #000 1px;
}
.imagen_masaje {
	width: 180px;
	height: 120px;
	margin: 20px auto;
	display: block;
	border: solid #000 1px;
}
.bloque_texto {
	margin: 0 auto;
	width: 220px;
	text-align: justify;
	font-size: 80%;
	margin-bottom: 10px;
}
.rosa {
	width: 17px;
	height: 18px;
	margin-right: 5px;
	margin-bottom: -3px;
}
.separador {
	margin: 10px auto;
	width: 17px;
	display: block;
}
.miniaturas {
	width: 100px;
	height: 75px;
	margin: 5px 25px;
	border: solid #000 1px;
}
.CRway {
	width: 100px;
	height:80px;
	margin: 5px 25px;
	border: solid #000 1px;
}
.validacion {
	float: left;
	margin-left: 5px;
}
	/* ID */
	
#cabecera {
	width: 730px;
	height: 120px;
	padding-top: 15px;
}
#logo {
	margin: 0 265px 0 265px;
	width: auto;
	position: absolute;
	float: left;
	min-width:125px;
	height: 106px;
}
#version_der {
	float: right;
	width: 150px;
	margin: 25px 10px 0 0;
	padding: 3px;
}
#titulo {
	text-align: center;
	padding: 20px 10px;
	font-weight: bold;
	margin-bottom: 3px;
	width: 710px;
}
#navcontainer{
	height: 20px;
	margin: 0 auto;
	width: 709px;
}
#navcontainer ul{
	border: 0;
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: center;
}
#contenido_general {
	margin-top: 0px;
	width: 730px;
	padding: 10px;
}
#navcontainer ul li{
	display: block;
	float: left;
	text-align: center;
	padding: 0;
	margin: 0;
}
#navcontainer ul li a{
	background: #fff;
	width: 140px;
	height: 18px;
	border-top: 1px solid #f5d7b4;
	border-left: 1px solid #f5d7b4;
	border-bottom: 1px solid #f5d7b4;
	border-right: none;
	padding: 0;
	margin: 0;
	color: #000000;
	text-decoration: none;
	display: block;
	text-align: center;
	font: normal 0.6em Lucida Grande, Lucida Sans Unicode, verdana, lucida, sans-serif;
	font-weight: bold;
}
#navcontainer ul li a:hover{
	color: #009933;
	background: #fff1d2;
}
#navcontainer a:active{
	background: #c60;
	color: #fff;
}
#navcontainer li#active a{
	background: #060;
	border: 1px solid #c60;
	color: #fff;
}
#pie {
	font-size: 70%;
	padding: 10px 0 8px 0;
	text-align: center;
	width: 577px;
	margin: 3px 0 0 153px;
	position: absolute;
	height: 77px;
	float: left;
	overflow: visible;
}
#atras {
	font-family: Arial, Helvetica, sans-serif;
	margin-left: 2em;
	font-size: 0.7em;
	cursor: pointer;
	background-image: url(estilos.css);
	background-repeat: no-repeat;
	margin-top: 0.5em;
	height: 25px;
	width: 300px;
}
#fondo {
	background-image: url(../imagenes/fondos/fondo_celdas.jpg);
	width: 730px;
	margin-bottom: 3px;
	padding-bottom: 5px;
	height: 20px;
}
#contenedor {
	margin: 10px auto;
	padding: 0 0 10px 0;
	width: 750px;
	margin: 10px auto;
	position: relative;
	background-image: url(../imagenes/fondos/fondo_pagina.jpg);
	border: solid #000 1px;
	height: 1650px;
}
Código: 
<!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>
<title>PURE JUNGLE SPA - PUERTO VIEJO - COSTA RICA </title>
.........................
<link rel="stylesheet" type="text/css" href="activos/css/estilos.css" media="screen" />
<style type="text/css"> 
#contenedor {
	height: 1150px;
}
.contenido_izq {
	height: 795px;
}
.contenido_der {
	height: 795px;
}
.album {
	height: 885px;
}
</style> 
<script type="text/javascript" src="activos/js/comun.js"></script>

</head>

<body onload="MM_preloadImages('activos/imagenes/varios/español_on.gif')" >
<div id="contenedor">
  <div id="contenido_general">
	<div id="cabecera">
	  <div class="presenta"><img src="activos/imagenes/vinculos/costa_papito_superior.gif" alt="La Costa de Papito" name="presentacion"   />			
	  </div> 
  			<div id="version_der"><img src="activos/imagenes/varios/español_off.gif" alt="Versión española" name="version" width="122" height="22" class="idioma" onclick="MM_goToURL('parent','html/español/index.html');return document.MM_returnValue" onmouseover="MM_swapImage('version','','activos/imagenes/varios/español_on.gif',1)" onmouseout="MM_swapImgRestore()" />	  </div>
	  <div id="logo"><img src="activos/imagenes/logos/pureAlbum.gif" alt="Pure Jungle Spa" width="200" height="106" />					
	  </div>
	</div><!-- cierra cabecera  -->
	<div id="fondo">
	  <div id="navcontainer">
		<ul id="navlist">
		  <li id="active"><a href="#">Home </a></li>
		  <li><a href="html/ingles/faciales_en.html">Tropical Facial  </a></li>
		  <li><a href="html/ingles/corporales_en.html">100% Pure Body </a></li>
		  <li><a href="html/ingles/masajes_en.html">Massages</a></li>
		  <li><a href="html/ingles/productos_en.html">Products</a></li>
		</ul>
	  </div> <!-- cierra navcontainer -->
	</div>
  <div id="titulo">
    <h1><img src="activos/imagenes/varios/rosa10px.gif" alt="Pure Jungle Spa" width="17" height="18" class="rosa" />PURE JUNGLE SPA </h1>
  </div>
  
  <div class="album">
  <a href="activos/album/index.html"><img src="activos/album/thumbnails/imagen_01.jpg" alt="Pure Jungle Spa" width="100" height="75" border="0" class="miniaturas" /></a>
  <a href="activos/album/index.html"><img src="activos/album/thumbnails/imagen_02.jpg" alt="Pure Jungle Spa" width="100" height="75" border="0" class="miniaturas" /></a>
  <a href="activos/album/index.html"><img src="activos/album/thumbnails/imagen_03.jpg" alt="Pure Jungle Spa" width="100" height="75" border="0" class="miniaturas" /></a>
  <a href="activos/album/index.html"><img src="activos/album/thumbnails/imagen_04.jpg" alt="Pure Jungle Spa" width="100" height="75" border="0" class="miniaturas" /></a>
  <a href="activos/album/index.html"><img src="activos/album/thumbnails/imagen_05.jpg" alt="Pure Jungle Spa" width="100" height="75" border="0" class="miniaturas" /></a>
  <a href="activos/album/index.html"><img src="activos/album/thumbnails/imagen_06.jpg" alt="Pure Jungle Spa" width="100" height="75" border="0" class="miniaturas" /></a> 
  <a href="http://www.lacostadepapito.com/"><img src="activos/imagenes/vinculos/costa_papito.gif" alt="La Costa de Papito" width="100" height="155" border="0" class="costaPapito"/></a> 
  <a href="http://www.costaricaway.net"><img src="activos/imagenes/vinculos/costaricaway.gif" alt="Costa Rica Way" border="0" class="CRway" /></a>		</div>
  
  <!-- cierra album --> 
  
  <div class="contenido_der"> 
    <h3>xxxxxx</h3>
     <img src="activos/imagenes/index/bodegon1.jpg" alt="Pure Jungle Spa" class="imagen_sup" />
       <img class="separador" src="activos/imagenes/varios/rosa10px.gif" alt="Pure Jungle Spa" />
         <p class="bloque_texto">xxxxxxxxxxxxxxxxxxxxxxx</p>
	<p><img class="separador" src="activos/imagenes/varios/rosa10px.gif" alt="Pure Jungle Spa" /></p>
  </div> 
  <!-- cierra contenido der-->
  
  <div class="contenido_izq">
	  
  	<h3>xxxxxxxxxx</h3>
  	<img src="activos/imagenes/index/fachada.jpg" alt="Pure Jungle Spa"  class="imagen_sup" />
	<img class="separador" src="activos/imagenes/varios/rosa10px.gif" alt="Pure Jungle Spa" />
	<p class="bloque_texto">xxxxxxxxxxxxxxxxxxxxx</p>
	<img class="separador" src="activos/imagenes/varios/rosa10px.gif" alt="Pure Jungle Spa" />
	<img class="imagen_index" src="activos/imagenes/index/playa_cocles.jpg" alt="Pure Jungle Spa" />
	<img class="separador" src="activos/imagenes/varios/rosa10px.gif" alt="Pure Jungle Spa" />
  </div>
    <div id="pie">
    	<p>xxxxxx</p>
    </div>
</div> 
</div>
  

</body>
</html>