Foros de daboweb
MULTIMEDIA, Video digital, Grabación, Diseño gráfico, Diseño web, Programación => Webmasters - Diseño Web - Programación - Diseño gráfico => Mensaje iniciado por: Flugtelero en 07 de Mayo de 2007, 07:05:28 pm
-
Después de aparcar las pruebas de diseño con bloques DIV en favor de las tablas, volví a hacer algunas prácticas con el primero de los elementos mencionados. Sin embargo, de buenas a primeras me encuentro con que una cabecera que en IE aparece en su sitio, en Firefox se ve algo desplazada hacia abajo dentro del bloque DIV, quedando así sobre ella una delgada franja del color de fondo de dicho bloque (blanca en este caso) en vez de lindar directamente en su parte superior con el cuerpo de la página (el body, con un fondo gris).
Por si la descripción anterior parece embrollada, y para plantear el asunto con más detalle, transcribo ahora el código de la prueba:
<html>
<head>
<title>Ensayo</title>
<style type="text/css">
body {background: gray}
DIV {background: white; width: 700px; position: absolute; left: 320px; top: 130px;}
H1 {background: lime; font-size: 14pt; font-weight: bold; font-family: Arial; color: red; text-align: center}
H2 {font-size: 12pt; font-weight: bold; font-family: Courier; color: black; text-align: justify; text-indent: 1cm}
</style>
</head>
<body>
<DIV>
<p><H1>Esto es la cabecera</H1></p>
<p><H2>Y ahora viene el texto, algunas frasecillas sueltas de mero relleno para ocupar algo de espacio... Bueno, para esta prueba creo que ya vale.</H2></p>
</DIV>
</body>
</html>
¿Hay algo incorrecto o es cosa del Firefox? :???:
-
En mi calidad de neófito no puedo aportarte una solución, pero sí corroborar tu problema: yo efectué hace muy poco un ensayo con un código parecido y me sucedió lo mismo. Las incompatibilidades entre navegadores están suponiéndome un quebradero de cabeza desalentador. Por ejemplo, otra cosa que me ocurre es que si determino un tamaño de fuente -por lo general en puntos-, Firefox muestra esas letras con un tamaño claramente superior al de las que aparecen con Internet Explorer; obviamente uno de los dos tamaños es incorrecto. Esto en lo que se refiere a ejercicios aplicando estulos con DIVs, pero la maquetación con tablas tampoco se libra de irregularidades. Me ha pasado poner un texto justificado en una tabla y verlo perfecto con Firefox, mientras que Explorer justificaba el margen izquierdo pero no el derecho. Además, si intento usar una pequeña tabla o una celda como cabecera, Firefox centra bien el texto, pero Internet Explorer lo desplaza siempre hacia arriba. En fin, toda una cadena de incongruencias muy enojosas.
Un saludo y suerte con tus prácticas (yo, desde luego, voy a necesitarla...).
-
Prueba cambiando "absolute" por "relative".
-
Se me olvidaba.
Rododentro, para la tipografía en pantalla utiliza mejor pixels; los puntos déjalos para páginas optimizadas para impresión. Y a la hora de escribir el tipo hazlo pegado al número, ya que si dejas un espacio, algunos navegadores ignoran el efecto (ej: 12px, 12pt y no 12 px o 12 pt).
-
De acuerdo, Gepetto, probaré a sustituir la posición absoluta por la relativa y ya haré saber aquí el resultado. ;-)
-
Ha sido remedio tan eficaz como instantáneo, Gepetto :-), muchas gracias. Aprovecho también para comentar que una vez sí me ocurrió ese efecto de desigualdad de tamaño de fuente que menciona Rododendro; yo lo atribuí sin más a una de tantas jugarretas esporádicas que padece uno cuando maneja ordenadores. Sin embargo, ya que aconsejas usar píxeles en vez de puntos, ¿cuál vendría a ser la equivalencia entre unos y otros, habida cuenta de que para un texto normal se recomienda un tamaño (en puntos) de 10 o 12?
Un saludo ;-)
-
Ahí está la cosa. Las equivalencias varían dependiendo de si usas Pc o Mac.
Por ejemplo:
Pc -> 12pt = 14px (más o menos)
Mac -> 12pt = 12px ""
O sea, que un texto a 12pt se verá más grande en Pc y más pequeño en Mac. En cambio, si lo pones como 12px se verá igual en ambos sistemas.
-
Entiendo... Será cuestión de ensayar hasta elegir el tamaño al gusto o la conveniencia.
Saludo y gracias ;-)
-
Bien, damos el tema por solucionado :)
-
De nada Flugtelero. Para mi, un tamaño de 14px es bastate razonable.
Hasta la próxima.