Foros del Web » Creando para Internet » CSS »

Problema con CSS en firefox

Estas en el tema de Problema con CSS en firefox en el foro de CSS en Foros del Web. Antes de todo presentarme ya que soy nuevo por este foro en el que espero que pueda pasar unos buenos ratos. Llego hasta aqui a ...
  #1 (permalink)  
Antiguo 13/09/2007, 15:14
 
Fecha de Ingreso: septiembre-2007
Mensajes: 2
Antigüedad: 16 años, 6 meses
Puntos: 0
Problema con CSS en firefox

Antes de todo presentarme ya que soy nuevo por este foro en el que espero que pueda pasar unos buenos ratos.

Llego hasta aqui a raiz de un problema con un proyecto web que estoy terminando.
Esta web esta maquetada con CSS a 3 columnas y mi problema viene que el fondo del contenedor principal no se me repite en Firefox sin embargo si me funciona en IE (6 y 7 son los que he probado)

Me gustaria saber porque no funciona ya que me esta exasperando. Os dejo aqui tanto la css como el fichero php (es un template de joomla).

Saludos y gracias de antemano.

Código:
/* Contenedor Principal */
#contenedor{ 
	background: url("http://www.sanlucarcofradiera.com/sagradacenasanlucar/templates/sagradacena/images/fondo_part.jpg");	
      background-attachment: fixed;
	background-repeat: repeat-y ;  
      background-position: top left;
	  width:1000px;
        text-align: left;
	  /*margin-left:auto;
        margin-right:auto;
        margin-bottom: auto;*/
	  margin-left:2px;
        margin-right:auto;
        margin-top:0;
        margin-bottom: auto;
	clear: both;
}

/* Cabecera */

#cabecera{
	width:100%;
}

/* Contenedor Lateral Izquierdo */
#lateral_izq {	
	 float: left;
  	 font-size: 11px;
	 width: 170px;
	 height: 100%;
	 position: relative;
	 border-right: 1.0pt solid #990000;
	 padding-left: 4px;
}

/* Contenedor Centro de Contenidos */
#centro {
	font-size: 11px;
	width: 630px;
	float:left;
	position: relative;
	margin-top: 10px;
	margin-left: 20px;
}

/* Contenedor Lateral Derecho */
#lateral_der {	
	width: 170px;
	float:right;
        font-size: 11px;
        position:relative;
	margin-bottom: 5px;
	border-left: 1.0pt solid #990000;
	padding-right: 3px;
}
  
/* Contenedor Pie de Cierre */
#pie{ 
	 clear:both;	
	 font-size: 10px;
	 color:Black;
	 text-align:center;
	 margin-left: 140px;
}

/* Relleno del Pie */
#rellenoPie{ 
    clear: both; 
    color: Gray;
    font-size: 11px;
    background-image: url(../images/fondo_part_pie.jpg);
    background-repeat: no-repeat;
    background-position: top left;
}

/* Zona de Creditos */
#creditos{
	border: 1.0pt #990000;
}

#lista {
	font-size: 11px;
}

/* ********************* ESTILOS DE CONTENEDORES  ********************* */

/* Bordes del DIV Contenedor Principal */

.bordes {
	border: 1.pt #990000;
}

/* Bordes de los DIV Laterales */
.bordesLaterales {
	border-right: 0.0pt solid #990000;
	border-left: 0.0pt solid #990000;
}

/* Etiquetas zona Acessos Rapidos */
.accesosDirectos {
	color:#990000;
	font-size:10px;
}

/* Etiquetas zona Acessos Rapidos - Barra*/
.accesosDirectos hr {
	color: #990000;
	height: 1px;
}

.accesosDirectos A {
	color:#990000;
	text-decoration: none;
}

.accesosDirectos A:hover {
	text-decoration: none;
}

/* Fondo Lateral Derecho */
.fondoDerecha {
	background-color: #990000;
}

/* Contendor de Fecha */
.fecha {
	color: White;
	top: 5px;
	left: 10px;
	position: absolute;
	font-weight: bold;
	font-size: 10px;
}

/* Contendor de Banner */
.controlesBanner {
	color: White;
	top: 30px;
	left: 340px;
	position: absolute;
}

/* Contendor de Controles */
.controlesWeb {
	color: Black;
	top: 172px;
	left: 20px;
	position: absolute;
	font-weight: bold;
	font-size: 11px;
}

/* Contendor de Controles */
.buscador {
	color: White;
	font-weight: bold;
	font-size: 9px;
	text-align: center;
}

.santoral {
	color: White;
	font-weight: bold;
	font-size: 9px;
	text-align: left;
	padding-left: 16px;
}

/* ********************* ESTILOS DE ELEMENTOS  ********************* */

BODY {
	margin: 0px; 
	font-size: 12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

A {
	COLOR: Black;
	font-weight: bold;
	text-decoration: none;
}
A.enlaceBlanco {
	color: White;
	font-weight: bold;
	text-decoration: none;
}
A.enlaceNoBold {
	COLOR: Black;
	font-weight: normal;
	text-decoration: none;
}

A:hover {
	text-decoration: none;
}
HR:{
	color: #6A5ACD;
}

/* ********************* ESTILOS GENERALES  ********************* */

.texto1 {
	color: #84622F;
}
.texto2 {
	color: #84622F;
	font-weight: bold;
}
.menuT {
	background-color: #990000;
}
.menuT TD {
	padding-left: 5px;
	border-left: 4.0pt solid #990000;
	border-right: 2.0pt solid #990000;
}
.menuT TD.elementoMenu {
	/*background-image: url(../Images/fondo1.jpg);*/
	background-color: #F5E5C6;
	border-bottom: 1.0pt solid Maroon;
	height: 20px;
	font-weight: bold;
	font-size: 11px;
}

.menuT TD.elementoMenu:hover {
	text-decoration: none;
	color: #fff;
}
.menuT TD.elementoMenuD {
	border: 2.0pt solid #990000 !important;
}

.fondo1 {
	background-color: #ebdfc9
}
.fondo2 {
	background-color: #f9e7ca
}

.fondo4 {
	background-color: White;
}
.titulo1 {
	color: #990000;
	font-size: 13px;
	background-color: #990000;
	font-weight: 425;
	padding-left: 0px !important;
}
.titulo2 {
	color: Black;
	font-size: 14px;
	font-weight: bold;
}

.margenInterior {
	padding: 5px 5px 5px 5px;
}
.subtitulo1 {
	color: #993300;
	font-weight: bold;
	text-align: center;
}
.subtitulo2 {
	color: #993300;
	font-weight: bold;
	text-align: center;
	font-size: 14px;
}
.tituloSeccion {
   margin: 2px 0px 0px 0px;
	background-image: url(../images/fondorayas2.gif);
}
.subtituloSeccion {
	margin: 5px 5px 5px 10px;
}
.subtituloSeccion2 {
	margin: 5px 5px 5px 10px;
	background-color: #e8e8e8;
}
.contenidoSeccion {
	margin: 5px 5px 20px 5px;
}
.formulario {
	background-color: #FFFFFF;
	font-size: 12px;
	border: 1.0pt solid Black;
}
.formulario input, textarea {
	border: #000000 1px solid;
	font-size: 8pt;
	color: #800000;
}
.boton {
	color: #000000 !important;
	font-weight: bold;
}
.caja {
	margin:10px;
	padding:5px;
	background-color:#f5f7f9;
	border-right: #a5a7aa solid 1px;
	border-bottom: #a5a7aa solid 1px;
	text-align:center;
	font-weight: bold;
}

.casillero{
	float: left;
	width: 295px;
	margin: 2px 2px 2px 2px;
}
.comentario {
	text-align:center;
	font-size:10px;
	background-color:#EFEFEF;
	margin: 5px 5px 5px 5px;
}


/* GALERIA DE FOTOS */
.contenedorfoto {
	float:left;
	width:250px;
	/*height:180px;*/
	margin:10px;
	padding:5px;
	background-color:#f5f7f9;
	border-right: #a5a7aa solid 1px;
	border-bottom: #a5a7aa solid 1px;
	text-align:center;
}
.contenedorfoto a {
	text-decoration: none;
}
.contenedorfoto span {
	color:#515151;
	font-family: Trebuchet MS;
	font-size: 9pt;
}
.contenedorfoto img {
	border:5px solid #EEE;
}
Código:
<?php defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php $iso = split( '=', _ISO );
echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />

<link href="<?php echo $mosConfig_live_site; ?>/templates/sagradacena/css/template_css.css" rel="stylesheet" type="text/css" />
<link href="<?php echo $mosConfig_live_site; ?>/templates/sagradacena/css/estilos.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="<?php echo $mosConfig_live_site; ?>/templates/sagradacena/javascript/general.js"></script>

<title> Agrupación Parroquial de la Sagrada Cena - Sanlúcar de Barrameda (Cádiz) </title>

</head>

<body>


<!-- Div Contenedor Principal de la Pagina -->
<div id="contenedor" class="bordes">

	<!-- Div Dias hasta semana santa -->
	<div id="fecha" class="fecha">
		&nbsp;&nbsp;
		<script type="text/javascript">faltanDias(2007,04,01);</script>
	</div>

	<!-- Div accessos directos favoritos - incio -->	
	<div id="controlesWeb" class="controlesWeb">
		<a href="#" onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://sagradacena.phpnet.us');return false;">
		.: Página de inicio :.
		</a>
		&nbsp;&nbsp;
		<a href="javascript:window.external.AddFavorite('http://sagradacena.phpnet.us','Sagrada Cena (Sanlucar de Barrameda)');">
		.: Agregar a favoritos :.
		</a>	
	</div>
......................... (no cabia todo el codigo.......)
PD: La url de la web por si quereis verlo es (http://www.sanlucarcofradiera.com/sa...ucar/index.php)

Última edición por Sagrada_Cena; 14/09/2007 a las 00:24
  #2 (permalink)  
Antiguo 14/09/2007, 07:38
Avatar de Juanvi.V  
Fecha de Ingreso: septiembre-2007
Mensajes: 5
Antigüedad: 16 años, 6 meses
Puntos: 0
Re: Problema con CSS en firefox

El problema que veo es que tu contenedor principal no tiene definida una altura.
En Firefox (y en el resto de navegadores estándar) las capas flotantes no añaden altura a su contenedor ¡por eso son flotantes!
Tus tres columnas son flotantes, y no añaden altura al contenedor principal
para "obligar" a que éste crezca, pon una capa al final de ella que tenga clear:both y 100% de ancho, esto es:

<div style="clear:both;width:100%">&nbsp;</div>

justo antes de cerrar el contenedor principal y después de las tres capas flotantes.

------
Juanvi
Departamento de Desarrollo
Diseño Web ArtVisual
  #3 (permalink)  
Antiguo 14/09/2007, 10:09
 
Fecha de Ingreso: septiembre-2007
Mensajes: 2
Antigüedad: 16 años, 6 meses
Puntos: 0
Re: Problema con CSS en firefox

Muchas gracias compañero, tu comentario me abrio los ojos.
A parte de faltar lo que me comentaste (que torpe por mi parte) me faltaba por cerrar una etiqueta DIV y claro el IE se lo "tragaba" pero Firefox no.

Muchas gracias. Gracias a ti tendre terminado este proyecto en breve.

Un saludo.
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 04:32.