XHTML válido, mal con Mozilla

Daphne · #1 (**permalink**) 14/07/2004, 18:50

Valida XHTML 1.0 Transitional, pero se ve mal con Mozilla y no tengo ni idea de cómo resolverlo.

Explorer:

Mozilla:

Código HTML:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>Farmacia Téllez</title>
	<link href="estilo.css" rel="stylesheet" media="screen" type="text/css" />
	<link rel="shortcut icon" type="image/ico" href="favicon.ico" /> 
	<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
              <meta http-equiv="Content-Language" content="es" />
	<meta name="MSSmartTagsPreventParsing" content="true" />
	<meta name="author" content="Farmacia Téllez" />
	<meta name="robots" content="all" />
	<meta name="description" content="Farmacia Téllez, su farmacia en Internet." />
	<meta name="keywords" content="farmacia, parafarmacia, Madrid, calidad, servicios, atención al cliente, medicamento, dermofarmacia" />
	<meta name="rating" content="General" />
	<meta name="revisit-after" content="30 days" />
	<meta name="copyright" content="Farmacia Téllez" />
	


 <script language="javascript" type="text/JavaScript" src="javascripts/generadordefecha.js"></script> 


 <script language="JavaScript" type="text/JavaScript" src="javascripts/rollovernoticias.js"></script> 



</head>

<body id="body"  onload="escrolea()">
<div id="outerblock">
	<div id="innerblock">

		<div id="contentheader">
			<div id="topheader"><img src="imagenes/logoprueba001.jpg" alt="Bienvenidos a Farmatellez" /></div>			
			<div id="bottomheader">

				<span class ="fechaf" style="position: relative; top: 2.48%; left:1%; z-index: 1" >
					<script language="JavaScript" type="text/javascript">MostrarFecha()</script>
				</span>

				<p class="greeting">

				<img src="imagenes/casita.gif" border="0" alt="Casa" /> <a href="index.html" onmouseover="window.status='Regrese a la portada principal de Farmatellez';return true" onmouseout="window.status=''" >Portada</a> | 
				<img src="imagenes/cesta2.gif" border="0" alt="Cesta" /> <a href="http://" onmouseover="window.status='Entre en su parafarmacia virtual';return true" onmouseout="window.status=''" >Parafarmacia</a> | 
				<img src="imagenes/sobrecito.gif" border="0" alt="Sobre" /> <a href="http://" onmouseover="window.status='Contacte con nosotros';return 				true" onmouseout="window.status=''" >Contacto</a>

				</p>
                                        </div>
		</div>
		
		<div id="contentleft"> 


			<div class="titlesection"><p class="seccionlateral">PARAFARMACIA</p></div>

				<div class="leftinside">				
					<div class="enlacesmenu">
					<p></p>
				 	<a href="http://">Entre en su parafarmacia</a><br/>
				 	<p>[Apertura en ventana nueva]</p>
					</div></div>

					



			


			<div class="titlesection"><p class="seccionlateral">ACERCA DE</p></div>

				<div class="leftinside">
					<p class="apartado"><img src="imagenes/flecha.gif" alt="Apartado 1" /> Apartado 1</p>
					<div class="enlacesmenu">

				 	<a href="quienessomos.htm">Quiénes somos</a>
				 	<a href="http://">Dónde estamos</a>
				 	<a href="http://">Nuestros objetivos</a>
					</div>

					<p class="apartado"><img src="imagenes/flecha.gif" alt="Apartado 2" /> Apartado 2</p>
					<div class="enlacesmenu">
                                                       		 <a href="http://">Contacte con nosotros</a> <br />
					</div>

				</div>

			

			<div class="titlesection" ><p class="seccionlateral">ENLACES DE UTILIDAD</p></div>	
			<div class="leftinside">
				<p class="apartado"><img src="imagenes/flecha.gif" alt="Apartado 1" /> Apartado 1</p>
				<div class="enlacesmenu">

				<a href="http://">Enlace 1</a>
				<a href="http://">Enlace 2</a>
				<a href="http://">Enlace 3</a>
				<a href="http://">Enlace 4</a>
				 <a href="http://">Enlace 5</a>
				 <a href="http://">Enlace 6</a>
				</div>

				<p class="apartado"><img src="imagenes/flecha.gif" alt="Apartado 2" /> Apartado 2</p>
				<div class="enlacesmenu">
				 <a href="http://">Enlace 1</a>
				 <a href="http://">Enlace 2</a>
				 <a href="http://">Enlace 3</a>			
				</div>

				<p class="apartado"><img src="imagenes/flecha.gif" alt="Apartado 3" /> Apartado 3</p>
				<div class="enlacesmenu">
				 <a href="http://">Enlace 1</a>
				 <a href="http://">Enlace 2</a>
				 <a href="http://">Enlace 3</a>
				 <a href="http://">Enlace 4</a>
				 <a href="http://">Enlace 5</a>
				 <a href="http://">Enlace 6</a>
				 <a href="http://">Enlace 7</a>
				 <a href="http://">Enlace 8</a> <br />

				</div>
			</div>
			
			
		</div>

		<!-- main -->


		<div id="google">
				<!-- Búsqueda Google -->
			
			<form method="get" action="http://www.google.com/search">
        <p class="google">
            <a href="http://www.google.com" target="_blank"><img src="imagenes/lgf.jpg" border="0" alt="Google" align="middle" /></a>
            <input type="text" name="q" size="31" maxlength="255" value="" style="font-size: 13px; font-family: arial, verdana, sans-serif; color:#0148B2; border:1px solid #0148B2; border-style: solid; border-top-color: #0148B2; border-left-color: #0148B2; border-bottom-color: #0148B2; border-right-color: #0148B2; background-image:url(imagenes/fnd.gif);" />
            <input type="hidden" name="hl" value="es" />
            <input type="submit" name="btnG" value="Búsqueda Google" style="font-size: 12px; font-family: arial, verdana, sans-serif; color:#0148B2; background:#FFFFFF; border:1px solid #0148B2; border-style: solid; border-top-color: #0148B2; border-left-color: #0148B2; border-bottom-color: #0148B2; border-right-color: #0148B2;" />
        </p>		
    </form>

				<!-- Búsqueda Google -->
		</div>

			
		<div id="contentmain">

			<div id="basico">
				<p class="basico"><img src="imagenes/estrella2.gif" border="0" alt="Incluya Farmatellez entre sus enlaces favoritos" /> <a href="javascript:window.external.AddFavorite('http://www.farmatellez.com','Farmatellez')" 				onmouseover="window.status='Incluya Farmatellez entre sus enlaces favoritos';return true" onmouseout="window.status=''" >Añadir a favoritos</a></p>

				<p class="basico"><img src="imagenes/casaraya.gif" border="0" alt="Estableza Farmatellez como su página de inicio" /> <a onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.farmatellez.com');" 
      				onmouseout="window.status=' '; return true"  href="http://www.farmatellez.com/" 
onmouseover="window.status='Establezca Farmatellez como su página de inicio';return true">Establecer como inicio</a></p><br/>

				<p class="apartado">&nbsp; S a l u d &nbsp; N o t i c i a s </p>
				<p><script language="JavaScript" type="text/javascript">escribe()</script></p>


			</div>




			<div>

				<h1>Bienvenidos a Farmatellez.com</h1><br />
				<h2>Próxima inauguración</h2><br/>
				<p>Esto es una prueba. Esto es una prueba. Esto es una prueba. Esto es una prueba. Esto es una prueba. Esto es una prueba. Esto es una prueba. Esto es una prueba. Esto es una prueba. Esto es una prueba. Esto es una prueba. Esto es una prueba. Esto es una prueba. Esto es una prueba. Esto es una prueba. Esto es una prueba. Esto es una prueba. Esto es una prueba. Esto es una prueba. Esto es una prueba. Esto es una prueba. Esto es una prueba. </p>
				<p>Esto es otra prueba. Esto es otra prueba. Esto es otra prueba. Esto es otra prueba. Esto es otra prueba. Esto es otra prueba. Esto es otra prueba. Esto es otra prueba. Esto es otra prueba. Esto es otra prueba. Esto es otra prueba. Esto es otra prueba. Esto es otra prueba. Esto es otra prueba. Esto es otra prueba. Esto es otra prueba. Esto es otra prueba. Esto es otra prueba. Esto es otra prueba. Esto es otra prueba. Esto es otra prueba. Esto es otra prueba. Esto es otra prueba. Esto es otra prueba. Esto es otra prueba. Esto es otra prueba. Esto es otra prueba. Esto es otra prueba. Esto es otra prueba. Esto es otra prueba. Esto es otra prueba. Esto es otra prueba. Esto es otra prueba. Esto es otra prueba. Esto es otra prueba. </p><br />

				<h1>Más pruebas</h1><br />
				<p>Esto también forma parte de la prueba. Esto también forma parte de la prueba. Esto también forma parte de la prueba. Esto también forma parte de la prueba. Esto también forma parte de la prueba. Esto también forma parte de la prueba. Esto también forma parte de la prueba. Esto también forma parte de la prueba. Esto también forma parte de la prueba. Esto también forma parte de la prueba. Esto también forma parte de la prueba. Esto también forma parte de la prueba. Esto también forma parte de la prueba. </p>
				<p>La prueba se está terminando. La prueba se está terminando. La prueba se está terminando. La prueba se está terminando. La prueba se está terminando. La prueba se está terminando. La prueba se está terminando. La prueba se está terminando. La prueba se está terminando. La prueba se está terminando. La prueba se está terminando. La prueba se está terminando. La prueba se está terminando. </p>
				<p>Fin de la prueba. Fin de la prueba.Fin de la prueba.Fin de la prueba.Fin de la prueba.Fin de la prueba.Fin de la prueba.Fin de la prueba.Fin de la prueba.Fin de la prueba.Fin de la prueba.Fin de la prueba.Fin de la prueba.</p><br /><br /><br /><br />


				
				<p class="greeting">Todo tiene solución</p><br />
		</div>

                           
	</div>		

	<br clear="all"/>
	<div id="contentfooter">
		<p class="firma">Éste es el pie de página, aquí podemos colocar lo que queramos como, por ejemplo, la resolución recomendada.</p>
		
	</div>

</div></div>
</body>
</html>

Daphne · #2 (**permalink**) 14/07/2004, 18:51

Lo que más me preocupa no es la fecha desplazada, que tengo intención de meterla en una tabla (si a alguien se le ocurre algo mejor, le agradecería su ayuda), sino el mal efecto rollover del menú y lo extraños que quedan colocados los títulos de las secciones.

Y el JS para el rollover de noticias tampoco funciona con Mozilla, en fin...

tunait · #3 (**permalink**) 15/07/2004, 02:23

Hola Daphne, oye, qué versión de mozilla estás usando?

Daphne · #4 (**permalink**) 15/07/2004, 02:37

La 1.7., me he enterado hoy en el foro de que hay una 1.8 (y ni siquiera sé si ésa es la última) y me ha sorprendido, porque el Mozilla me lo descargué, como mucho, hace dos semanas.

tunait · #5 (**permalink**) 15/07/2004, 02:44

ok, mira, ayer descubrí que un sitio web que terminé hace un par de meses se ve descolocado con mozilla 1.7, que lo tengo instalado desde hace 10 días (el tiempo que tengo mi nueva compu).

Pero resulta que lo miro con mozilla 1.5 (la que uso en mi vieja compu) y se ve fenomenal, y la miro en la compu de mi marido que tiene mozilla 1.6 y también se ve fenomenal

Estoy comenzando a pensar que a esta 1.7 le flojea alguna tuerca.

Ayer descubrí además que en esa web hay una sección que en mozilla 1.7 me carga sin contenidos visibles (a pesar de que existen en el código fuente) y con los otros mozilla se ve perfectamente.

El script del scroll de noticias lo volví a hacer usando el DOM en vez de usando document.write. viendo de usar código standard y..... si pongo un DTD de xhtml1.0 la caja y los contenidos del scroll se cargan correctamente pero no andan. Ni da error ni nada, simplemente se queda ahí detenido

pero lo había probado sólo con el 1.7. Voy a comenzar a comparar comportamientos en las otras versiones.

Echaré un ojo también a lo tuyo con mis versiones anteriores de mozilla a ver qué pasa.....

Daphne · #6 (**permalink**) 15/07/2004, 02:52

Vale, entonces a ver si me aclaro: todo se ve bien con otras versiones de Mozilla, menos el script de noticias. Si es cierto eso que he entendido, me voy a poner a pegar botes, en serio. Es que había probado también el Mozilla Firebird y también se me veía mal.

A ver si hay suerte y con otras versiones también funciona el scroll de noticias (en esa parte no te entendí bien del todo, pero creo que quisiste decir eso). Con el Firebird, no, desde luego. Vale, bueno, por lo menos con lo que sea que yo tengo instalado.

No digo nada más para no estropear este mágico momento en el que parece que las cosas pueden empezar a funcionar de verdad.

tunait · #7 (**permalink**) 15/07/2004, 03:00

jaja mira.... el scroll lo dejé después de hora de romperme los cuernos. Si le pongo un dtd de html 4.0 funciona ok, pero si se lo cambio a xhtml1.0 no funciona. Lo dejé ahí, pero tras mi descubrimiento de ayer.... voy a probarlo con otras versiones a ver qué pasa.....

Respecto a lo de la distinta visualización.... dejé ayer el planteamiento del problema en los foros de PascalC que es exclusivo y especializado en mozilla, a ver si allá me pueden orientar de qué pasa. Claro, el tema es ¿de qué versión debo fiarme? lo retoco para corregirlo en la 1.7 y se me descoloca en las anteriores? ¿o qué?

dejé unas capturas de pantalla.

Coloreé el fondo de las capas para identificarlas mejor.

Es el mismo código, osea, es la misma página cargada en 1.5 y en 1.7 (en la 1.6 se ve igual que en la 1.5)

mozilla 1.5 (bien)
http://www.tunait.com/pruebas/moz15.jpg

mozilla 1.7 (mal)
http://www.tunait.com/pruebas/moz17.jpg

Daphne · #8 (**permalink**) 15/07/2004, 03:30

Yo me voy a descargar la versión 1.8, a ver qué tal.

Por cierto, muchísimas gracias (mis modales se volatilizaron con la emoción). De no ser por ti, ni en mil años me entero de que el problema es la versión del Mozilla.

Bueno, y gracias por todo lo demás, como lo de estar detrás del script a ver qué sucedía y todo.

Daphne · #9 (**permalink**) 15/07/2004, 08:34

Ya tengo la 1.8 desde hace varias horas y, por mucho que he probado, sigo viendo mal la web, a pesar de que el instalador me advirtió que para evitar incongruencias con otras versiones podía optar por borrar unos archivos. :(

Espero que sólo sea un problema mío y no se trate de algo general. :S

PascalC · #10 (**permalink**) 15/07/2004, 15:47

seria + facil ayudarte con una URL donde ver el codigo. Por cierto, no veo el interés de hacer XHTML que no sea strict...

Daphne · #11 (**permalink**) 15/07/2004, 18:07

Te paso directamente con la URL donde se ve que valida. Los once fallos son de la publicidad de Mi@:

http://validator.w3.org/check?uri=ht...tomatically%29

Desde ahí ya puedes acceder a ese código. El que estoy manejando ahora es nuevo y con toda la historia que me ha pasado no me ha dado tiempo a comprobar si aún valida (a preocuparme, sí), así que de ése no digo nada.

El motivo por el que es Transitional se lo di a Xavivars en el hilo ¿Cómo de difícil es ser validado según el W3C? de (X)HTML: es la primera web que trato de validar y voy paso a paso. De todos modos, el Strict reconocía sólo cinco fallos en mi código Transitional, así que no creo que vaya por mal camino.

PascalC · #12 (**permalink**) 16/07/2004, 03:14

El problema es similar al problema de Tunait, tu XHTML no tiene estructura semantica. Ademas, tu problema de scroll no tiene nada que ver con html ya que es javascript.

Daphne · #13 (**permalink**) 19/07/2004, 08:04

Mi XHTML no tiene estructura semántica, problema gordo. Pero, ¿por qué valida? Luego, yo tenía entendido que todo el código que validaba era bien interpretado por navegadores como Opera y Mozilla (por mucho que no tuviera estructura semántica). Opera es muy minoritario, pero por Mozilla sí me preocupo. ¿Qué características tiene el XHMTL semántico que no tenga uno como el de esa web? Si me lo puedes comentar a grandes rasgos, luego busco más información y la estudio.

Me parece que en algún punto no me he explicado bien. Sé que el problema de scroll no tiene que ver con el HTML (no llego muy lejos, pero hasta ahí, sí), sin embargo sigue siendo otro problema que tiene la web. Lo he comentado aquí porque precisamente la programadora del script es Tunait, por si ella podía hacer algo para solventarlo (y no creí que fuera útil para el foro abrir cuatro hilos distintos, uno por duda, ya abro muchos, creo yo).

Gracias. :)

PascalC · #14 (**permalink**) 19/07/2004, 09:14

"Luego, yo tenía entendido que todo el código que validaba era bien interpretado por navegadores como Opera y Mozilla (por mucho que no tuviera estructura semántica). "

no

Eso es una leyenda urbana

El validador sólo es una herramienta que permite comprobar la sintaxis del documento XHTML, exactamente como lo haría un corrector ortográfico, pero no significa que tu web se muestra bien si el código valida. Lo que pasa es que los que suelen usar el validador son webmasters muy avanzados que ya saben de semántica web y de problemas de compatibilidad de los navegadores y el validador solo es una étapa del proceso de creación de páginas.

"Opera es muy minoritario, pero por Mozilla sí me preocupo. ¿Qué características tiene el XHMTL semántico que no tenga uno como el de esa web? Si me lo puedes comentar a grandes rasgos, luego busco más información y la estudio."

En realidad hacer HTML semático significa usar el lenguaje tal y como fue concebido y no como lo pervirtieron los webmasters en los años 90 cuando apenas teníamos CSS ;)

La primera ventaja cuando te esfuerzas en crear un documento bien estructurado y con semantica correcta es una simplificación del código fuente y por lo tanto la limitación de los problemas de interacción de las etiquetas (posicionamiento de los elementos por ejemplo). Si tomamos un trozo de código podemos ver como se puede simplificar :

<div class="titlesection"><p class="seccionlateral">PARAFARMACIA</p></div>

Bien, aquí usas una etiqueta de párafo de texto, pero no hay párrafo. Vemos que es un título pero no hay etiqueta de título, usas dos clases pero el titleseccion no sirve para nada ya que no se usa en la CSS y la verdad es que seccionlateral tampoco tiene interés. El código con semántica debería ser :

<h2>PARAFARMACIA</h2>

Mucho más sencillo, ahora tiene semántica (lo que significa por ejemplo que google le dará más importancia y establecerá una relación de dependencia con el texto que sigue (título -> texto que depende del título).

tu clase .seccionlateral{} ahora es div#contentleft h2{} lo que además te permite organizar mejor tu CSS ya que leyendo la regla sabes de que depende este código.

De la misma manera, tus enlaces en la misma columna son listas y deberían tener una sintaxis del tipo
<ul>
<li><a></a></li>
<li><a></a></li>
</ul>

Aquí encontrarás un scroller para remplazar el que usas que funciona perfectamente en todos los navegadores recientes:

http://www.hypergurl.com/verticaltext.html

Daphne · #15 (**permalink**) 19/07/2004, 17:19

Cita:

Iniciado por PascalC

"Luego, yo tenía entendido que todo el código que validaba era bien interpretado por navegadores como Opera y Mozilla (por mucho que no tuviera estructura semántica). "

no Eso es una leyenda urbana
El validador sólo es una herramienta que permite comprobar la sintaxis del documento XHTML, exactamente como lo haría un corrector ortográfico, pero no significa que tu web se muestra bien si el código valida. Lo que pasa es que los que suelen usar el validador son webmasters muy avanzados que ya saben de semántica web y de problemas de compatibilidad de los navegadores y el validador solo es una étapa del proceso de creación de páginas.

No sabes cuánto me aclaras con eso.

Ahora entiendo mejor cómo hacen las cosas los que saben.

Tengo constancia de que la manera de utilizar el código se pervirtió. Sé que hay cosas que no se deben hacer, pero hay muchas otras de las que no tengo ni idea.

También conozco las ventajas de hacerlo bien, por eso intento, en la medida de que me veo capaz (poquito a poco), ir mejorando. Los fallos del código que comentas ya tenía intención de cambiarlos (aunque los <hn> ya están asignados y tendré que utilizar otro método), pero es que tengo tan poco tiempo que prefiero preguntar lo que no sé y preocuparme más tarde de lo que sé solucionar sola. ¿Tú crees que si arreglara eso habría más posibilidades de que Mozilla interpretara bien el código?

Gracias por el enlace del scroll. Ya estaba pensando en utilizar una marquesina vertical o yo qué sé qué.