No aplica width a capa en Firefox

Kailea · #1 (**permalink**) 11/11/2008, 12:18

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!

Calizman · #2 (**permalink**) 11/11/2008, 12:20

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!

Kailea · #3 (**permalink**) 11/11/2008, 12:33

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>

Kailea · #4 (**permalink**) 11/11/2008, 12:35

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;
}

Calizman · #5 (**permalink**) 11/11/2008, 12:41

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...

kseso? · #6 (**permalink**) 11/11/2008, 13:06

Prueba este cambio:

Cita:

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

Mikmoro · #7 (**permalink**) 11/11/2008, 13:12

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



y te está invalidando el selector .oficina

Bórralo a ver qué pasa.

kseso? · #8 (**permalink**) 11/11/2008, 13:20

Cita:

Iniciado por Mikmoro

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



y te está invalidando el selector .oficina

Bórralo a ver qué pasa.

Entonces, ¿sí reconoce el inicio del comentario () ?

talmente · #9 (**permalink**) 11/11/2008, 13:31

Quita esto



Edito: llego tarde

Mikmoro · #10 (**permalink**) 11/11/2008, 16:37

Cita:

Iniciado por kseso?

Entonces, ¿sí reconoce el inicio del comentario () ?

Sinceramnete no sé la razón técnica, pero yo diría que en realidad lo que no reconoce es el selector

 .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.

kseso? · #11 (**permalink**) 11/11/2008, 16:44

¿ 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 ;)

Mikmoro · #12 (**permalink**) 11/11/2008, 16:49

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.

Calizman · #13 (**permalink**) 11/11/2008, 17:43

Buena observacion!! no lo habia visto de esa forma! xD

daPhyre · #14 (**permalink**) 12/11/2008, 10:52

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 */

Mikmoro · #15 (**permalink**) 12/11/2008, 11:06

Cita:

Iniciado por daPhyre

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

daPhyre · #16 (**permalink**) 12/11/2008, 11:26

No leí ese pequeño detalle, perdón