Re: [Ovillo] [Spam]: Problema en Firefox con re petición background-image 1 pixel

Wed, 07 Nov 2007 08:19:20 -0800 

Un elemento flotado no tiene tamaño y no se estira para abrazar a sus 
contenidos, por lo que no es visible  ni él ni su imagen de fondo (IE lo hace 
mal, FF lo hace bien). Prueba a comentar los estilos ".box_container" y 
."box_1" que tienen float left y sí se verá el fondo. Tal vez debas usar otro 
sistema para conseguir lo que quieres.

En general debes pensar que menos es más ;-) Es decir que te sobran un monton 
de div´s, no sólo porque son innecesarios, también "emborronan" todo y hacen 
más dificil saber porqué falla algo. Con una capa contenedora y varios párrafos 
te basta.

Prueba con esto (tendrás que ajustar alguna cosa como el tamaño del texto de la 
cabecera etc...):

HTML:

<div class="base_commerce_middle">
<h2>Qui&eacute;nes Somos</h2>
<a href="">xxx.com</a> es la primera empresa dedicada.
<p>Todas las madres conocemos los problemas a los que nos enfrentamos cuando 
dejamos a nuestros hijos en las guarder&iacute;as.</p>
<p>En la mayor&iacute;a de las guarder&iacute;as, los pedagogos han optado por 
poner los nombres de los ni&ntilde;os.</p>
<p>Cansados de ver a padres y pedagogos desesperados sin saber qu&eacute; 
hacer</p>
<p>Es así como nace <a href="">xxx.com</a>.</p>
</div>
  
CSS:

    .base_commerce_middle{
      width:440px;   
      background: url(img.gif) repeat-y 50% 0; 
      border: 1px solid #D1D3D4;
      } 
    .base_commerce_middle h2{ 
      background-color:#C6C8CA; 
      padding-left:5px; 
      color:#FFFFFF; 
      font-weight:bold; }
    .base_commerce_middle p{
      line-height:19px;
      padding:5px 40px; 
      text-align:justify;
      }


> >-----Mensaje original-----
> >De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] En
> >nombre de Rafa Artacho
> >Enviado el: miércoles, 07 de noviembre de 2007 16:34
> >Para: [email protected]
> >Asunto: [Spam]: [Ovillo] Problema en Firefox con repetición background-image 
> >1
> >pixel
> >
> >Buenas tardes:
> >
> >Tengo un problema al emplear una imagen de fondo que deseo que se repita a
> >lo largo de todo el contenido de un div. La imagen mide width:800px y
> >height:1px.
> >En IE 7 e IE6 funciona, pero en Firefox no me muesta ni una sola línea.
> >
> >A continuación refiero el div en cuestión y las clases CSS empleadas:
> >
> >        <div class="base_commerce_middle">
> >            <div class="box_container">
> >                <div class="box_1">
> >                    <div class="box1_heading">Qui&eacute;nes Somos</div>
> >                    <div class="box1_body">
> >                        <div class="box1_content">
> >                            <a href="">xxx.com</a> es la primera empresa
> >dedicada.
> >                            <p>
> >                            Todas las madres conocemos los problemas a los
> >que nos enfrentamos cuando dejamos a nuestros hijos en las
> >guarder&iacute;as.
> >                            </p>
> >                            En la mayor&iacute;a de las guarder&iacute;as,
> >los pedagogos han optado por poner los nombres de los ni&ntilde;os.
> >                            </p>
> >                            <p>
> >                            Cansados de ver a padres y pedagogos
> >desesperados sin saber qu&eacute; hacer .
> >                            </p>
> >                            <p>
> >                            Es así como nace <a href="">xxx.com</a>.
> >
> >                            </p>
> >                        </div>
> >                    </div>
> >                </div>
> >                 <div class="box_2">
> >                    <img src="images/ines.jpg" width="100" height="129"
> >style="border:2px solid #D1D3D4;">
> >                    <div class="espvert_1"></div>
> >                    <img src="images/ines.jpg" width="100" height="129"
> >style="border:2px solid #D1D3D4;">
> >                </div>
> >             </div>
> >        </div>
> >
> >CSS:
> >.base_commerce_middle{
> >width:800px;
> >height:auto; /*He probado con height:1px; que es lo que mide la imagen y
> >nada tampoco*/
> >text-align:left;
> >background: url('images/base_shop_middle.gif') repeat-y;
> >background-position:50% 0;
> >}
> >.box_container{
> >float:left;
> >}
> >.box_1{
> >float:left;
> >width:440px;
> >padding:5px 40px;
> >text-align:justify;
> >}
> >.box1_heading{
> >background-color:#C6C8CA;
> >padding-left:5px;
> >color:#FFFFFF;
> >font-weight:bold;
> >}
> >.box1_body{
> >padding-top:5px;
> >border:1px solid #D1D3D4;
> >}
> >.box1_content{
> >padding:5px 10px;
> >line-height:19px;
> >}
> >.box_2{
> >float:left;
> >width:120px;
> >padding:45px 20px;
> >}
> >.espvert_1{
> >margin-top:30px;
> >}
> >
> >
> >¿Alguna idea?, gracias
> >
> >Rafa Artacho
> >_______________________________________________
> >Lista de distribución Ovillo
> >Para escribir a la lista, envia un correo a [email protected]
> >Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> >http://lists.ovillo.org/mailman/listinfo/ovillo
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo

Responder a