HTML mal interpretado por FireFox

[Delphius] · #1 04-09-2007

Hola a todos, pude darme un tiempito y estoy haciendo unos toques a mi pagina web.
Debido a mi escasa, prácticamente nula, experiencia en web... me he llevado un problema que yo me lo esperaba: FF interpreta erroneamente, mientras que IE lo hace bien.
Como pueden ver... esta es la manera correcta:
[img=http://img482.imageshack.us/img482/9866/imgieku7.th.png]

y esta otra la manera en que se ve en FF:
[img=http://img250.imageshack.us/img250/3184/imgffrn2.th.png]

Yo me manejo con FrontPage 2003 ya que de PHP no he podido aprender nada.
Bueno, tengo un CSS con sólo esto:

Código:

.Titulo  { font: Arial Black; font-size: 24pt; color: #C4C4D8; font-weight: bold; float:right; }
.BarraSup    { border: 1px solid #C4C4D8; padding: 1px; background-color: #F6F2F8 }
body         { font-family: arial; font-size: 12pt }

Y el código HTML que tengo es como sigue:

Código PHP:


			
<html>

<head>
<meta http-equiv="Content-Language" content="es-ar">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>La página de Delphius</title>
<link rel="stylesheet" type="text/css" href="../CSS/CSSPral.css">
</head>

<body class="titulo">

<table border="0" width="100%" cellspacing="0" cellpadding="0" id="table1">
    <tr>
        <td width="605" height="79">
        <img border="0" src="../images/DelphiusTitulo.jpg" width="605" height="79" alt="Logo"></td>
        <td class="titulo" id="td1" align="right" valign="bottom" background="../images/TituloCont.jpg">
        Principal </td>
    </tr>
</table>

<table border="0" width="100%" id="table2">
    <tr>
        <td class="barrasup" id="td2"><font face="Arial" color="#000000">Usted 
        está aquí: <b>Principal</b> &gt;</font></td>
    </tr>
</table>

</body>

</html>

La idea es que el título quede alineado a la esquina inferior derecha de la celda.
Yo para acomodar el contenido me valgo de tablas... asi lo vine haciendo siempre, pero claro... yo antes no usaba el FF como para comprobar. No sabría decir porqué FF no interpreta correctamente el contenido, tampoco donde puede estar el problema.
Hice una prueba viendo el contenido del código fuente que generaba FF y veo que es exactamente igual al que he escrito en FrontPage...
Como dato: poseo FF versión 2.0.0.6, con los siguientes complementos:
1. Tema: Blue Ice 1.2.4
2. Extensiones: Donwload StatusBar 0.9.5.1, FreeDownload Manager Plugin 1.0, Talkback 2.0.0.6
Si alguien sabría darme una mano le estaría muy agradecido.
Muchas gracias por tomarse el tiempo.

Saludos,

dec · #2 04-09-2007

Hola,

Cita:

Empezado por Delphius

Si alguien sabría darme una mano le estaría muy agradecido.

Yo me niego rotundamente mientras uses tablas para maquetar.

En serio. A mí lo único que se me ocurre decir está basado en lo que uno lee por ahí... no sé hasta qué punto es completamente exacto, pero, tal vez sea más probable que sea Internet Explorer quien no interprete bien las cosas... y sí Firefox, aunque los resultados no sean los que esperas. ¿Probaste con Opera? Mira si en Opera ocurre como en Firefox, puesto que de ser así... serían dos contra uno...

[kayetano] · #3 04-09-2007

Hola

Yo he maquetado muchas veces con tablas y lo primero que te tengo que decir es que el uso del atributo HEIGHT en los TD, TR, TABLE y algun que otro objeto más no funciona en más de un navegador.
Tienes dos alternativas, la primera usar estilos, pero la más rápida es usar imágenes transparentes, por ejemplo:

Código PHP:


			
<table border="0" width="100%" cellspacing="0" cellpadding="0" id="table1">
    <tr>
        <TD><IMG SRC="PX.GIF" WIDTH="1" HEIGHT="79" /></TD>  
        // Esto no es totalmente necesario en tu caso ya que la imagen de bajo ya tiene definida una altura.
        <td width="605">
        <img border="0" src="../images/DelphiusTitulo.jpg" width="605" height="79" alt="Logo"></td>
        <td class="titulo" id="td1" align="right" valign="bottom" background="../images/TituloCont.jpg">
        Principal </td>
    </tr>
</table>
...

donde PX.GIF es un gif transparente de 1x1.

Otra cosa de debes hacer es eliminar el "float:right" del estilo .titulo.

También tengo que decierte que veo muchas irregularidades en tu código: no defines el DOCTYPE, usas height fuera de los estilos, defines estilos con mayúsculas y los usas en minúsculas, usas el mismo estilo para el BODY y para un TD (esto no es erroneo pero si peligroso y confuso).

El tema del DOCTYPE es muy importante ya que en ausencia de esta definición cada navegador adopta un DOCTYPE predefinido y seguramente no será el mismo en cada uno de los navegadores.

semptrion · #4 05-09-2007

Hola estimado Delphius.

Coincido con Dec. Deberías maquetar sin tablas. No sólo serías más infeliz (realmente te darías cuenta cuán miserable es el IE) sino que trabajarías el doble.

Pero no habrían sorpresas.

Y aunque reniego y protesto contra el IE y debo trabajar el doble para que funcione en el estándar y en el IE, al final, siempre me siento más orgulloso.

Recibe un cordial abrazo.

[Delphius] · #5 05-09-2007

Bueno, después de leer lo dicen ustedes y otras recomendaciones que he visto en los foros...
Tal vez sea hora de intentar cambiar mi estilo de hacer las páginas webs. Y por cierto, también cambiar de herramienta. Hacer un mayor esfuerzo en intentar aprender PHP sería lo mejor

.

Con respecto al tema de las tablas, yo me he sentido más comodo con su uso... se me hace más fácil tener las cosas ordenadas. Veía que varios sitios empleaban las tablas para estas cosas y bueno... las seguí.
No soy demasiado entendido en el mundo de la programación web, por lo que seguir sus consejos me viene bien...
Lo dificil será cambiar mi costumbre por las tablas

.

Volviendo al tema original de mi consulta... no recuerdo que había cambiado en el CSS y logré hacer que se vea bien... no tengo a mano el FrontPage como para fijarme... En cuanto pueda pongo el cambio que hice en el CSS por si a alguien le sirve y/o se topa con este problema.

Saludos,

dec · #6 05-09-2007

Hola,

Aprender PHP está muy bien, puesto que es un lenguaje muy agradecido, con el que puede uno divertirse casi tanto como con Delphi.

Pero, tal vez no esté demás recordar algo: PHP en general "imprime" HTML, CSS, JavaScript... es decir, lo que llega al navegador/cliente suele ser HTML, CSS y JavaScript.

Yo no tengo muchos conocimientos de estos tres últimos lenguajes, pero, antes de haber tocado PHP ya tuve alguna experiencia con ellos... de hecho llevé a cabo varias páginas Web (muy sencillitas, eso sí) sólo con HTML, CSS y JavaScript. Creo que este "paso" no me vino mal a la hora de encarar apuntar a PHP.

Si se me permite voy recomendar por enésima vez (pero no me canso) el sitio Web Tierra de Nómadas. Es cierto que no se actualiza desde agosto de 2003 (cómo pasa el tiempo...), y que hay muchos otros sitios, pero, a este conviene echarle un vistazo porque lo que proponía entonces tiene cierta vigencia hoy mismo.

[Delphius] · #7 05-09-2007

Muchas gracias Dec por tu ayuda y recomendación. Ya tengo guardada la página y la tengo a la vista para ir leyendola a medida que avance mi compresión del asunto. Lo dicho, me propongo aprender PHP.

Bueno, como dije... la cosa se arregló cuando hice esto:

Código:

.Titulo  { font-size: 24pt; color: #C4C4D8; font-weight: bold; float: right bottom; font-style:normal; font-variant:normal; }

No me explico porque... si no le veo mucho cambio. Eso me de muestra que estoy lejos todavía de mi objetivo. Pero no desespero.
Ahora a bajar todo lo necesario, comenzando desde PHP.

Saludos,

[Io] · #8 05-10-2007

Hola.

Aunque creo que ya es muy...muy tarde, puedes leer esto, sobre el modelo de caja, y en especial del modelo de caja en IE, que va por libre.
Estoy aprendiendo a aplicar estilo (css), y con esto se puede hacer todo o casi todo sin aplicar tablas.

http://www.cristalab.com/tutoriales/...net-explorer-5

[Delphius] · #9 05-10-2007

Muchas gracias Io por aportar dicho enlace. Algo más que he aprendido hoy, no tenía idea de que se pudiera hacer algo asi en CSS.
Otra cosa más a tener en cuenta cuando siga emprendiendo mis prácticas.

Saludos,

Temas Similares
Tema	Autor	Foro	Respuestas	Último mensaje
Firefox dentro de Firefox...	Neftali [Germán.Estévez]	Noticias	13	16-04-2007 20:43:24
HTML firefox e internet explorer	halizia	HTML, Javascript y otros	10	02-03-2007 23:14:24
Firefox a la carga! El 14% de los internautas europeos usan Firefox!!!	Sasuke_Cub	Noticias	6	24-10-2006 23:29:56
Firefox Add-ons	Sasuke_Cub	La Taberna	3	15-10-2006 20:25:15
FireFox	roman	Internet	2	22-05-2004 19:25:04