Foros del Web » Creando para Internet » CSS »

p:first-letter - Posicionamiento distinto según navegador

Estas en el tema de p:first-letter - Posicionamiento distinto según navegador en el foro de CSS en Foros del Web. en el css: Código: .contiene-coment p { padding: 10px 15px 5px 20px; font-family: candara, mirian, "maiandra gd", calibri, "sans serif"; font-size:1.2em; line-height:1.4em; color:#3a3a3a; } .contiene-coment ...
  #1 (permalink)  
Antiguo 05/08/2008, 15:00
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 5 meses
Puntos: 539
p:first-letter - Posicionamiento distinto según navegador

en el css:

Código:
.contiene-coment p {
padding: 10px 15px 5px 20px;
font-family: candara, mirian, "maiandra gd", calibri, "sans serif";
font-size:1.2em;
line-height:1.4em;
color:#3a3a3a;
}
.contiene-coment p:first-letter {
font-size: 3.2em;
font-weight: bold;
font-family: algerian, castelar, decorativa;
text-transform:uppercase;
color:#a00000;
line-height: 2.4em;
float: left;
}
en el html:
Código HTML:
<div class="contiene-coment">
<p>lorem ipsum dolor sit amet consectetuer pede Donec justo orci tincidunt. Metus lorem fringilla malesuada Curabitur sed egestas eget pretium Nullam at. Curabitur Morbi a eros parturient fringilla nibh accumsan porttitor nibh enim. Lacinia montes elit...</p>
</div> 
El problema:
En FF la primera letra de <p> la 'L' se ve de una altura de 2 líneas y con la base (el trazo horizontal) alineado con la segunda línea del párrafo. La tercera línea y posteriores se colocan debajo de esa letra, ajustadas al margen izquierdo.

En Opera y FF7 esta primera letra crea todo un margen izquierdo al párrafo, que no deseo.
No detallo las pruebas y modificaciones porque han sido infroctuosas.

1º= ¿Por qué ocurre?
2º= ¿Cómo corregirlo?

Podéis verlo aquí donde casi al final de la página, bajo el epígrafe "tribuna pública".

Y el css completo es éste
Me quedan bastante cosas que pulir, pero cualquier sugerencia a mayores también será bien recibidas.
Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #2 (permalink)  
Antiguo 05/08/2008, 15:41
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 18 años, 1 mes
Puntos: 280
Respuesta: p:first-letter - Posicionamiento distinto según navegador

Se debe al line-height: 2.4em; que hace que la letra ocupe en realidad un bloque de alto más grande de lo que buscas.

Cámbialo por un line-height: 0.8em; y creo que se acomodará como quieres.
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 05/08/2008, 15:57
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 5 meses
Puntos: 539
Respuesta: p:first-letter - Posicionamiento distinto según navegador


Para tí:


Porque te la mereces. Definitivamente dejaré cierta imagen y enlace en el pie de página dentro de los agradecimientos/créditos
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #4 (permalink)  
Antiguo 05/08/2008, 16:32
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 18 años, 1 mes
Puntos: 280
Respuesta: p:first-letter - Posicionamiento distinto según navegador

¡La copa de la Champions! No está mal
(lástima que no fuera de verdad)

Me alegro de que te haya servido

__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 08/08/2008, 14:43
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 16 años, 9 meses
Puntos: 3
Respuesta: p:first-letter - Posicionamiento distinto según navegador

Perdón, edité porque respondí en un tema equivocado.
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 22:15.