first-letter diferencias entre FF y chrome

Citar

Escrito el 06 Ene 2012 03:35 pm

El problema viene al ajustar los margenes de la capitular con respecto al resto del texto.

CSS:

Código HTML :

article p:first-letter
{
   font-size: 400%;
   float: left;
   margin: 6px 5px 0px -3px;
}

resultado en Firefox:

resultado en Chrome:

es ovbio q necesito q se vea bien en ambos, ya q para IE siempre hay in [if IE]

Por penHolder

Claber

4661 de clabLevel

39 tutoriales
2 articulos

Genero:Masculino Premio_Secretos

Envíale un mensaje privado Web

| mdz |

@penholder

Citar

Escrito el 06 Ene 2012 04:40 pm

Pon un link a una página donde el problema ocurra.

A simple vista parece como si Firefox no acepta o no reconoce el margin para :first-letter mientras que Chrome sí lo hace.

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 06 Ene 2012 07:29 pm

¿Ya probaste con un reset al principio para quitar los margenes y paddings por defecto?

Por Kinduff

Claber

3563 de clabLevel

21 tutoriales
3 articulos

Envíale un mensaje privado Web

web dev wizzard

@kinduff

Citar

Escrito el 06 Ene 2012 11:07 pm

esta todo reseteado, y probe con ese codigo limpio, quiro decir un html sin absolutamente nada mas q un div con texto y ese mismo css, y sigue pasando lo mismo... T_T

Por penHolder

Claber

4661 de clabLevel

39 tutoriales
2 articulos

Genero:Masculino Premio_Secretos

Envíale un mensaje privado Web

| mdz |

@penholder

Citar

Escrito el 07 Ene 2012 12:56 am

Oye penHolder, hay un tuto acá en Clab que habla de eso y por lo que veo funciona bastante bien, revisalo.

Por Kinduff

Claber

3563 de clabLevel

21 tutoriales
3 articulos

Envíale un mensaje privado Web

web dev wizzard

@kinduff

Citar

Escrito el 07 Ene 2012 01:33 am

pasa q la idea es no tener q crear una clase especial para cada capital, de momento eso estoy usando pero no es la mas optima de las soluciones.

Por penHolder

Claber

4661 de clabLevel

39 tutoriales
2 articulos

Genero:Masculino Premio_Secretos

Envíale un mensaje privado Web

| mdz |

@penholder

Citar

Escrito el 07 Ene 2012 02:52 am

penHolder escribió:

pasa q la idea es no tener q crear una clase especial para cada capital, de momento eso estoy usando pero no es la mas optima de las soluciones.

Código :

p:first-letter
{
   float:left;
   color:black;
   background:white;
   border:1px solid #999999;
   font-size:80px;
   line-height:60px;
   padding:2px;
   margin-right: 5px;   
}

Por Kinduff

Claber

3563 de clabLevel

21 tutoriales
3 articulos

Envíale un mensaje privado Web

web dev wizzard

@kinduff

Citar

Escrito el 07 Ene 2012 04:46 am

Kinduff escribió:

Código :

p:first-letter
{
   float:left;
   color:black;
   background:white;
   border:1px solid #999999;
   font-size:80px;
   line-height:60px;
   padding:2px;
   margin-right: 5px;   
}

genial el gif, pero... eso no funciona, gracias de veras pero sigue habiendo diferencias entre navegadores. Por otro lado, para q carajos el borde y el fondo? no influye absolutamente en nada.

Por penHolder

Claber

4661 de clabLevel

39 tutoriales
2 articulos

Genero:Masculino Premio_Secretos

Envíale un mensaje privado Web

| mdz |

@penholder

Citar

Escrito el 07 Ene 2012 05:17 am

después de darle vueltas logre encontrar un condicional para webkit y así corregir las diferencias, quedó raramente cool:

Código :

article p:first-letter
{
   float: left;
   font-size: 56px;
   margin: 6px 5px 0px -5px;  
}
/* if webkit */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
   article p:first-letter
   {
      float: left;
      font-size: 56px;
      margin: -9px 5px -20px -5px;
   }
}

Por penHolder

Claber

4661 de clabLevel

39 tutoriales
2 articulos

Genero:Masculino Premio_Secretos

Envíale un mensaje privado Web

| mdz |

@penholder

Citar

Escrito el 07 Ene 2012 06:38 am

Se ve super bien, muchas gracias por el dato penHolder. A ver si encuentro otro fallback para mejorar.

Por Kinduff