Foros del Web » Creando para Internet » CSS »

No aplica width a capa en Firefox

Estas en el tema de No aplica width a capa en Firefox en el foro de CSS en Foros del Web. Hola a todos! Hay algo que debo estar haciendo mal y no sé qué es Tengo un contenido que quiero que se muestre en cajetines ...
  #1 (permalink)  
Antiguo 11/11/2008, 12:18
 
Fecha de Ingreso: marzo-2004
Ubicación: Sureste
Mensajes: 186
Antigüedad: 13 años, 9 meses
Puntos: 0
No aplica width a capa en Firefox

Hola a todos!

Hay algo que debo estar haciendo mal y no sé qué es

Tengo un contenido que quiero que se muestre en cajetines de un determinado tamaño para que se queden mostrados como si fuera una cuadrícula de 2 x 2.

Lo he hecho mediante un <div class="oficina"></div>, al que le aplico este CSS:

Código:
.oficina {
width: 300px;
float: left;
position:relative;
margin-top: 15px;
margin-left: 50px;
border: 1px solid  #CCCCCC;
}
Todo está englobado en divs de niveles superiores. La teoría me dice que yo le estoy diciendo a esa capa que tenga un ancho de 300px, pero... firefox lo ensancha a todo el ancho de la capa que da el ancho máx que son 770px. Si le aplico un color de fondo... resulta que es que parece que firefox pase olímpicamente de los datos de la hoja css para esa clase. En cambio, IE7 sí lo lee (qué raro jeje). Así que nada... ¿cómo podría hacer que firefox lea mi css?

Olvidaba decir que tengo:

Cita:
.oficina h3 {
text-align: center;
color: #ffffff;
background-color: #333333;
padding: 5px;
}
y a los h3 sí les aplica el estilo, pero en general no.
Espero vuestros comentarios,
Gracias mil!

Última edición por Kailea; 11/11/2008 a las 12:19 Razón: adición de info
  #2 (permalink)  
Antiguo 11/11/2008, 12:20
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: No aplica width a capa en Firefox

Lo veo y no lo creo...!!! jaja...

Te pido el codigo restante si? el css y el html porque parece que el error no esta en ese div sino que en uno de los de arriba...

Suerte y Saludos!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #3 (permalink)  
Antiguo 11/11/2008, 12:33
 
Fecha de Ingreso: marzo-2004
Ubicación: Sureste
Mensajes: 186
Antigüedad: 13 años, 9 meses
Puntos: 0
Respuesta: No aplica width a capa en Firefox

Por un lado el html:

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="estilos/css.css" rel="stylesheet" type="text/css">
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="estilos/css-ie6.css" />
<![endif]-->
</head>
<body>
<div id="body-wrap">
<div id="cabecera">
<div id="titulo"><h1>xxxx</h1></div>
<div id="menu-arriba">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="presentacion.htm">Presentaci&oacute;n</a></li>
<li><a href="sectores.htm">-----</a></li>
<li><a href="oficinas.htm">Oficinas</a></li>
<li><a href="noticias.php">Noticias</a></li>
<li><a href="email/contacto-general.php">Contacto</a></li>
</ul>

</div>

</div>
<div id="contenido-sector">
<div id="titulo-contenido">
<h2>Oficinas y datos de contacto</h2>
		<div id="enlaces">
	<p class="ruta"><a href="index.php">Home</a> > Oficinas y datos de contacto</p>
		</div>	
</div>
<br>
		<div class="oficina">
		<h3>xxxx - xxxx</h3>
		<p>--<br>
		-- - xxxx<br><br>
		Tel:   ---<br>
		Fax:  --<br>
		Mail:  <a href="mailto:[email protected]">[email protected]</a>
		</p>
		<p><a href="oficinas/mapa-acceso-xxxx.php">Mapa de acceso a las oficinas de xxxx</a></p>
		<p><a href="fotos-oficinas-xxxx.htm">Fotograf&iacute;as del almac&eacute;n de xxxx</a></p>
		</div>
		
		<div class="oficina">
		<h3>xxxx - --</h3>
  		<p>--<br>
		-- - --<br><br>
		Tel:   --<br>
		Fax:  --<br>
		Mail:  <a href="mailto:[email protected]">[email protected]</a></p>
		<p><a href="oficinas/mapa-acceso------.php">Mapa de acceso a las oficinas de --</a></p>
		<p>&nbsp;</p>
		</div>
		<div class="oficina">
		<h3>xxxx - --</h3>
		<p>--<br>
		-- - --<br><br>
		Tel:  --<br>
		Fax:  --<br>
		Mail: <a href="mailto:[email protected]">[email protected]</a></p>
		<p><a href="oficinas/mapa-acceso------.php">Mapa de acceso a las oficinas de --</a></p>
		<p><a href="fotos-oficinas------.htm">Fotograf&iacute;as de las oficinas</a></p>
		</div>
		<div class="oficina">
		<h3>xxxx - --</h3>
		<p>v<br>
		-- v <br><br>
		Tel:   (v<br>
		Fax:  -----<br>
		Mail:  <a href="mailto:[email protected]">[email protected]</a>
		</p>
		<p><a href="oficinas/mapa-acceso------.php">Mapa de acceso a las oficinas de -----</a></p>
	  <p>&nbsp;</p>
		</div>

</div>
<div id="footer">
<div id="menu-footer">
(C) xxxx y C&iacute;a.
</div>
</div>
</div><</body></html>
  #4 (permalink)  
Antiguo 11/11/2008, 12:35
 
Fecha de Ingreso: marzo-2004
Ubicación: Sureste
Mensajes: 186
Antigüedad: 13 años, 9 meses
Puntos: 0
Respuesta: No aplica width a capa en Firefox

Por otro el CSS.

Código:
/* CSS Document */

*{border:0; margin:0;padding:0}

body{
font-family: Arial, Verdana, sans-serif;
font-size: 62.5%;
}

table{
display: block;
margin: auto;
padding: 5px;
}

.checkbox {
border:0;
}

#contenido table{
border: 0px;
}
#contenido td{
border: solid 1px #cccccc;
padding-left: 15px;
padding-right: 15px;
padding-top: 6px;
padding-bottom: 6px;
}

#contenido .celda-logo{
text-align:center;
}

#contenido-sin-texto {
background-color: #ffffff;
font-size: 13px;
height: 500px;
}

input {
border: solid 1px #000000;
}

#body-wrap{
margin: auto;
background-color: #fff;
width: 770px;
position:relative;
}

#cabecera{
color: #00ffff;
background-color: #FFFFFF;
text-align: center;
background-image: url(media/gradiente.png);
}

#contenido{
background-color: #ffffff;
font-size: 13px;
border: solid 1px #CCCCCC;
}

#contenido p{
padding: 15px;
}

#contenido-control{
background-color: #ffffff;
font-size: 16px;
border: solid 1px #CCCCCC;
}

#contenido-control p{
padding: 18px;
font-variant:small-caps;
}


#contenido-sector{
background-color: #ffffff;
font-size: 13px;
border: solid 1px #CCCCCC;
height: 650px;
width: auto;
position:relative;
}

#contenido-sector p{
padding: 15px;
}

#contenido-sector h2 {
background-color: #333333;
color: #FFFFFF;
text-align:center;
padding: 5px;
text-transform:uppercase;

}

#contenido-noticias{
background-color: #ffffff;
font-size: 13px;
border: solid 1px #CCCCCC;

}

#contenido-noticias p{
padding: 15px;
}

#contenido-noticias h2 {
background-color: #333333;
color: #FFFFFF;
text-align:center;
padding: 5px;
text-transform:uppercase;
}

#contenido-contacto {
background-color: #ffffff;
font-size: 13px;
border: solid 1px #CCCCCC;
}

#contenido-contacto p{
padding: 15px;
}

#contenido-contacto h2 {
background-color: #333333;
color: #FFFFFF;
text-align:center;
padding: 5px;
text-transform:uppercase;
}

#enlaces {
border: solid 1px #ccc;
height: auto;
}

#especial{
font-size: 0.7em;
text-align:center;
margin-top: 175px;
}

#footer{
background-color: #000000;
color: #fff;
clear: both;
text-align:center;
}

#formulario{
font-size: 13px;
margin-left: 60px;
}


#formulario input{
border:1px solid #000;
}

#formulario p{
padding: 5px;
}

#formulario textarea{
border: 1px solid #000;
}

#imagen {
width: 567px;
padding-top: 20px;
display: block;
margin: auto;
}
#menu-arriba{
background-color: #fff;
border: solid 1px #ccc;
padding: 10px 5px;
}

#menu-arriba ul, #menu-arriba li{
list-style-type: upper-alpha;
display: inline;
font-size: 14px;
font-weight: bold;
}

#menu-arriba li a{
text-decoration: none;
color: #fff;
padding: 5px 30px; 
background-color: #333333;
}

#menu-arriba li a:hover{
background-color: #ddd;
color: #336666;
}

#menu-arriba li a:active{
background-color: #ddd;
color: #336666;
}
#menu-footer{
padding: 3px;
text-align: center;
}

#menu-footer ul, #menu-footer li{
display: inline; 
padding: 25px 8px;
text-decoration: underline;
}


#menu-footer li a{
text-decoration: none;
color: #cccccc;
font-size: 11px;
}

#menu-footer li a:hover{
text-decoration: underline;
}
#menu-footer li a:active{
text-decoration: underline;
}

<!-- noticias -->
#noticias{
float: left;
font-size: 11px;
width: 200px;}

#noticias h4{
font-size: 14px;
color: #000066;
margin-top: 10px;
}

#noticias h5 {
font-size: 11px;
font-weight: normal;
text-decoration: underline;
margin-top: 5px;}

.titulo-noticia {
font-size: 16px;
color: #FFFFFF;
}

#titulo h1{
font-family: Arial Black;
color: #0067ff;
font-size: 68px;
}

#titulo-contenido {
border: solid 1px #ccc;
width: 768px;
}

#titulo-contenido h2{
color: #000044;
background-color: #ffffff;
text-align: center;
font-size: 26px;
padding: 5px;
}

#titulo-contenido h3{
text-align: center;
font-size: 18px;
color: #000099;
}

a:link.boton-motor {
display: block;
width: 250px;
height: 250px;
border: solid 1px #ffffff;
}

a:hover.boton-motor  {
display: block;
border: solid 1px #000000;
}
.derecha {
text-align: left;
font-size: 0.9em;
font-weight: normal;
}
  
.derecha-motor a{
text-align: left;
font-size: 1.1em !important;
font-weight:bold !important;}

.imagen{
font-size: 14px;
float: right;
display: block;
margin:auto;
}

.imagen-solar{
font-size: 14px;
float: right;
display: block;
margin:auto;
padding: 8px;
}

.img {
display: block;
margin: auto;
padding: 15px;
}


.flash {
z-index: 2;
}

.imagen-producto {
width: 200px;
height: 140px;
}

.logo {
height: 50px;
}

.man{
padding: 10px;
width: 700px;
border: solid 1px #ccc;
margin: 5px;
}

.mantext{
line-height: 45px;
text-align: center;
text-transform:uppercase;
}

.mantext a{
text-decoration: none;
font-family: Arial,sans-serif;
font-weight: bold;
font-size: 1.2em;
color: #330066;
}

.mantext a:hover{
text-decoration: underline;
}
.mantext a.visited{
color: #330066;
}

.ruta {
text-align: left;
}

.paginado{
text-align: right;
font-size: 11px;
display: block;
float: right;
}

.producto{
width: 450px;
float: left;
padding: 10px;
text-align: justify;}

.producto-a {
width: 210px;
display: block;
float: left;
text-align: center;
background-image: url(media/fondo-producto-grande-ancho.gif);
background-position: center;
background-repeat:no-repeat;
height: 275px;
margin: auto;
margin-left: 35px;
margin-top: 20px;
}

.producto-a-esp {
width: 210px;
display: block;
float: left;
text-align: center;
margin: auto;
}

.producto-a .imagenes-logos{
display: block;
margin-top:5px;
padding-bottom: 10px;
height: 50px;
}

.producto-a .imagenes-productos{
display: block;
height: 121px;
}

.imagenes-productos img{
margin-top: 8px;
margin-left: 0px;
}

.imagenes-productos-esp img{
margin-top: 5px;
margin-left:0px;
}

.imagenes-productos-esp a img {
margin-top: -5px;
margin-left: -4px;
}

.imagenes-productos a img {
margin-top: -2px;
margin-left: -4px;
}
.producto-a .descripcion-productos{
display: block;
height: 104px;
font-size: 11px;
}

.producto-a .descripcion-productos a{
display: block;
font-size: 11px;
margin-top: auto;
margin-bottom: auto;
height: 104px;
}

.producto-b-esp {
width: 210px;
display: block;
text-align: center;
margin: auto;
}

.productob{
display: block;
margin: 0 auto;
text-align: center;
}

.producto-c-esp {
width: 210px;
display: block;
text-align: center;
margin: auto;
float: right;
margin-right: 15px;
}

.producto-titulo img{
display: block;
margin: auto;
}

.producto-titulo{
background-color: #ffffff;
text-align: center;
padding: 10px;
background-color: #ccc;
}

.productos-titulo img{
display:block;
margin: auto;
}
.productos {
font-size: 11px;
padding-top: 10px;
background-color: #fff;
width: 768px;

}
.productos ul{
padding: 20px;
margin-left: 20px;}

.productos li{
list-style: none;
margin: 10px;
display: block;
}
.productos a{
display:block;
color: #000033;
padding: 10px;
font-size: 1.4em;
text-decoration: none;
font-weight: bold;
}


.productos h3{
font-size: 1.5em;
color: #000033;
}

.productos-general {
font-size: 11px;
padding-top: 10px;
background-color: #fff;
width: 768px;

}
.productos-general ul{
padding: 20px;
margin-left: 20px;}

.productos-general li{
list-style: none;
margin: 10px;
display: block;
}
.productos-general a{
display:block;
color: #000033;
font-weight:bold;
font-size: 11px;
padding: 10px;
background-color: #cccccc;
font-size: 1.4em;
text-decoration: none;
font-weight: bold;
}

.productos-general a:hover{
background-color: #333333;
color: #fff;
}

.productos-general h3{
font-size: 1.5em;
color: #000033;
}


.productos-motor{
border-left: solid 1px #ccc;
border-right: solid 1px #ccc;
font-size: 11px;
background-color: #fff;
width: 568px;
float: right;
}

.texto {
width: 752px;
border: solid 1px #ccc;
padding: 8px;
text-align: justify;}

.texto-title{

width: 752px;
height: 70px;
border-bottom: solid 1px #cccccc;
}

.texto h3{
padding: 5px;
color: #000066;
}

.texto h4{
color: #000033;
font-size: 14px;
padding-top: 5px;
padding-bottom: 2px;
font-variant: small-caps;
}

.texto h5 {
color: #999999;
font-size: 13px;
padding-top: 2px;
padding-bottom: 5px;
font-variant:small-caps;

}

.texto ul{
margin-left: 40px;
padding: 5px;
list-style-position: inside;
}

.texto li{
padding: 10px;
}

.texto ol{
list-style-position: inside;
padding: 15px;
}

.texto table{
border: solid 1px #ccc;
}

.texto td{
border: solid 1px #ccc;
padding: 10px;
}

.texto th{
background-color: #000000;
color: #fff;
padding: 10px;}

.datos-arriba {
font-size: 0.8em;
border-top: dashed 1px #999999;
padding: 5px;
margin-top: 10px;
}

.datos-abajo {
font-size: 0.8em;
border-bottom: dashed 1px #999999;
padding: 5px;
}

<!-- oficinas -->

.oficina {
width: 300px;
float: left;
position:relative;
margin-top: 15px;
margin-left: 50px;
border: 1px solid  #CCCCCC;
}


.oficina h3 {
text-align: center;
color: #ffffff;
background-color: #333333;
padding: 5px;
}

.not {
padding-top: 12px;
padding-bottom: 12px;
border-bottom: solid 1px #999999;
overflow: auto;
}

.not h4 {
font-size: 16px;
font-variant:small-caps;

}

.not h5 {
color: #999999;
font-size: 14px;
padding-top: 2px;
padding-bottom: 5px;
font-variant:small-caps;

}

.img-noticia {
padding: 5px;
display:block;
float:left;
}
  #5 (permalink)  
Antiguo 11/11/2008, 12:41
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: No aplica width a capa en Firefox

Cita:
.oficina {
width: 300px;
float: left;
position:relative;
margin-top: 15px;
margin-left: 50px;
border: 1px solid #CCCCCC;
}
Por pura curiosidad... intenta cambiar el relative por static si? y me dices...
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #6 (permalink)  
Antiguo 11/11/2008, 13:06
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: No aplica width a capa en Firefox

Prueba este cambio:
Cita:

.oficina {
width: 300px;
display: inline;
margin-top: 15px;
margin-left: 50px;
border: 1px solid #CCCCCC;
}
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #7 (permalink)  
Antiguo 11/11/2008, 13:12
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: No aplica width a capa en Firefox

Ya sé lo que ocurre: has metido un comentario html en el css:

<!-- oficinas -->

y te está invalidando el selector .oficina

Bórralo a ver qué pasa.
__________________
Visita mi nueva web idplus.org
  #8 (permalink)  
Antiguo 11/11/2008, 13:20
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: No aplica width a capa en Firefox

Cita:
Iniciado por Mikmoro Ver Mensaje
Ya sé lo que ocurre: has metido un comentario html en el css:

<!-- oficinas -->

y te está invalidando el selector .oficina

Bórralo a ver qué pasa.
Entonces, ¿sí reconoce el inicio del comentario (<!---) pero no el cierre (-->) ?
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #9 (permalink)  
Antiguo 11/11/2008, 13:31
Avatar de talmente  
Fecha de Ingreso: noviembre-2007
Mensajes: 233
Antigüedad: 10 años, 1 mes
Puntos: 4
Respuesta: No aplica width a capa en Firefox

Quita esto

<!-- oficinas -->


Edito: llego tarde
  #10 (permalink)  
Antiguo 11/11/2008, 16:37
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: No aplica width a capa en Firefox

Cita:
Iniciado por kseso? Ver Mensaje
Entonces, ¿sí reconoce el inicio del comentario (<!---) pero no el cierre (-->) ?
Sinceramnete no sé la razón técnica, pero yo diría que en realidad lo que no reconoce es el selector

<!-- oficinas --> .oficina

Es decir, que a mi entender (o imaginación), lo que ocurre es que como es algo que no interpreta como comentario, es simplemente texto que está antes del selector, y por tanto formará parte de él. De hecho, sólo afecta a ese selector, e imagino que es por eso.
__________________
Visita mi nueva web idplus.org
  #11 (permalink)  
Antiguo 11/11/2008, 16:44
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: No aplica width a capa en Firefox

¿ No será que espera un .oficina hijo de "--" que esté en "oficinas" estando éste contenido en un "<!--" ?
Nunca se me dio bien la genealogía ;)
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #12 (permalink)  
Antiguo 11/11/2008, 16:49
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: No aplica width a capa en Firefox

Yo supongo que sí. Como he dicho, no entiende ese selector, y yo tampoco lo he explicado con tanto detalle

Pero sí, por los espacios sería como dices "genealógicamente" hablando. Yo creo que es esa la razón, Igual alguien sabe alguna otra razón técnica documentada.
__________________
Visita mi nueva web idplus.org
  #13 (permalink)  
Antiguo 11/11/2008, 17:43
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: No aplica width a capa en Firefox

Buena observacion!! no lo habia visto de esa forma! xD
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #14 (permalink)  
Antiguo 12/11/2008, 10:52
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: No aplica width a capa en Firefox

Tiene razón Kseso?, y esto se dio por que se puso un comentario HTML en la hoja CSS, lo que es incorrecto. Debió ser /* oficinas */
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #15 (permalink)  
Antiguo 12/11/2008, 11:06
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: No aplica width a capa en Firefox

Cita:
Iniciado por daPhyre Ver Mensaje
Tiene razón Kseso?, y esto se dio por que se puso un comentario HTML en la hoja CSS, lo que es incorrecto. Debió ser /* oficinas */
Creo que llegas bastaaaante tarde

http://www.forosdelweb.com/f53/no-ap...0/#post2658283
__________________
Visita mi nueva web idplus.org
  #16 (permalink)  
Antiguo 12/11/2008, 11:26
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: No aplica width a capa en Firefox

No leí ese pequeño detalle, perdón
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
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 15:59.