Retroceder   Foros del Web > Diseño de Sitios web > CSS

Respuesta
 
Herramientas Desplegado
Antiguo 13-sep-2007, 15:14   #1 (permalink)
Sagrada_Cena ha deshabilitado el karma
 
Fecha de Ingreso: septiembre-2007
Mensajes: 2
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-sep-2007 a las 00:24.
Sagrada_Cena está desconectado   Responder Citando
Antiguo 14-sep-2007, 07:38   #2 (permalink)
Juanvi.V ha deshabilitado el karma
 
Avatar de Juanvi.V
 
Fecha de Ingreso: septiembre-2007
Mensajes: 5
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
Juanvi.V está desconectado   Responder Citando
Antiguo 14-sep-2007, 10:09   #3 (permalink)
Sagrada_Cena ha deshabilitado el karma
 
Fecha de Ingreso: septiembre-2007
Mensajes: 2
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.
Sagrada_Cena está desconectado   Responder Citando
Respuesta

No hay votos aún.


Herramientas
Desplegado

Normas de Publicación
No puedes crear nuevos temas
No puedes responder temas
No puedes subir archivos adjuntos
No puedes editar tus mensajes

BB code is Activado
Caritas están Activado
[IMG] está Activado
Código HTML está Desactivado


La Zona horaria es GMT -6. Ahora son las 21:05.


Message Board Statistics

LinkBacks Enabled by vBSEO 3.1.0

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93