Estándares para todos los navegadores??

Cada vez que hago un "intento de página web", me encuentro con que se ve diferente en cada navegador. Más concretamente veo como una página que se ve bien en firefox lo hace de manera similar en ópera, pero no así en IE, y viceversa.

He leído que eso se debe a que IE no sigue estándares en html y css. Esto es correcto? Si esto es así, cuáles son los tags y atributos que debo evitar usar para no producir incompatibilidades entre navegadores?.

Luego me encuentro con diferencias muy sutiles. Por poner un ejemplo concreto, cuando uso pequeñas imágenes que coloco en las esquinas de los contenidos para redondear (imagino que es una chapucilla, a ver si veo otra buena manera ), me encuentro con sutiles diferencias de posición de 3 o 4 px entre los distintos navegadores, lo suficiente para que no estén en su sitio correcto.

He buscado pero no encuentro información concreta al respecto, un listado o algo así, no sé.

Actualmente estoy aprendiendo a usar DreamweaverMX 2004 y trato de hacer páginas en html + css

Pues, aqui te puedo decir que la forma de corregir esos pequeños detalles es a punta de ensayo y error.
Los estándares son eos, estándares, qeu un navegador no los siga no significa que tu codigo este mal, y menos aun intentar hacks o trucos "solo para IE", solo harán que te alejes de los estándares.
lo que te puedo sugerir, es que postees los problemas especificos que hayas tenido para que los que han pasado ya por eso te aconsejen sobre ese problema en concreto, porque con solo decir "se ve diferente" ,no podemos saber que es lo que sucede.

Saludos

Oh! Ok

Por ejemplo, en mi sección http://www.tunacienciasgranada.com/Miembros.htm hago que se habra un pequeño popup para que se vayan mostrando los miembros (sí, ya se, son maaalos pero creo que aquí encaja bien )

el código es

Código :

<A HREF="javascript:PopLeroy();" class="clink" >Leroy</A>
 
[...]

function PopLeroy(URLStr)
{
  popUpWin = open("Tunos/Leroy.htm", "main","width=650 height=365");
}

Esto en IE va perfecto, pero en Firefox no se ve bien, se ve un heigth mucho más grande. Este tipo de cosas son las que no entiendo.

Otro ejemplo: Abriendo esa misma ficha, tengo dos capas que me dan problemas. El código es así:

Código :

<div id="pagecell1"> 
 aquí el contenido, con una pequeña tabla y tal...
</div>

<div id="pagecell2">
      <p>Tuna de Ciencias - Universidad de Granada<br><br></p>
</div>

Luego en la css:

#pagecell1{
   position:absolute;
   top: 15px;
   left: 2%; 
   right: 2%;
   width:95.6%;
   background-color: #ffffff;
}
#pagecell2{
   font: 70% Arial,sans-serif;
   color: #FFFFFF;
   position:absolute;
   bottom: -33px;
   left: 1px; 
   
   background-color: #3B7ABE;
}

En dreamweaver se ven las capas superpuestas. Luego en IE se ve perfecto, y en Fierfox se vuelven a ver superpuestas.

mmmm Hago mal en poner código? Es sólo para ejemplificarme mejor...

Saludosss

a ver, aquí hay varios puntos
ie no cumple estándares PERO, como dice ramm, se suelen utilizar los famosos hacks, que él (y muchos otros) no recomiendan, sin embargo yo no le veo nada malo adaptar la hoja de estilos para que los navegadores malos lo interpreten correctamente.. otro punto sería utilizar php o javascript para detectar el navegador que —en mi particular punto de vista— vendría siendo lo mismo
checa este enlace, es un poco más ilustrativo
http://www.nolimit-studio.com/yosoysosa/archives/categorias/tutoriales/tu_navegador_apesta.php

en segundo lugar, utilizar popups es la PEOR práctica en la web, te recomiendo no lo hagas. pero echémosle un ojo al código

Código :

<A HREF="javascript:PopLeroy();" class="clink" >Leroy</A>
 
[...]

function PopLeroy(URLStr)
{
  popUpWin = open("Tunos/Leroy.htm", "main","width=650 height=365");
}

primero que nada el javascript debe estar ANTES del tag body, por que si está debajo y aún no se ha cargado, al invocarlo saldrá un error diciendo que la función no ha sido definida. en este caso sería voltearlo:

Código :

function PopLeroy(URLStr)
{
  popUpWin = open("Tunos/Leroy.htm", "main","width=650 height=365");
}

[...]
<A HREF="javascript:PopLeroy();" class="clink" >Leroy</A>

ahora, tu función tiene un parámetro URLStr que cuando lo llamas en el link no está definido, probablemente ese sea el motivo por el cual firefox no lo abre (o bien, tienes el bloqueador de popups activado)

otro detalle, tanto las hojas de estilo como los javascripts es recomendable tenerlos en un archivo externo, así ahorras ancho de banda y el usuario sólo cargará una vez estos archivos

y por último, para pasar con css es recomendable "adaptar" los scripts para el peor de los casos; que no tengan activado javascript, en este caso sería

Código :

function PopLeroy(que)
{
  popUpWin = open(que.href, "main","width=650 height=365");
}

[...]
<a href="Tunos/Leroy.htm" onclick="javascript:PopLeroy(this);" class="clink">Leroy</a>

lo siento, está un poco complicado de explicar y no tengo mucho tiempo así que te recomiendo cheques el código y veas qué cambió, desactives javascript y pruebes.

ahora con css.. para maquetar se utiliza la propiedad float, checa los tutoriales, por ahí hay un par que seguro te sirvan. esto es para decirte que position:absolute podría ser lo más estándar que te puedas encontrar pero para maquetar SIMPLEMENTE no sirven.

antes de que te metas más en este mundillo mágico del xhtml+css te recomiendo que tomes el buen camino y hagas caso a mis humildes consejos

suerte. un saludo.

Ok Ok glorioso Fael, me has resuelto más problemas de los que parece

MM bueno la función java realmente sí la declaro antes, eso que puse sólo fue para indicar, pero la última función es muy interesante... te vas a reir un poco....

Esta página la hice hace algunos meses, y apenas sabía programar (ahora no demasiado tampoco , pero lo suficiente para entender el código que pusiste y saber qué es el puntero this), total que para defenerme con javascript (que no tengo ni idea) lo que hacía era observar otras páginas y copiar o modificar. En este caso había una función para cada ficha, y con el código que me has puesto veo que con una sola función puedo abrir todas las fichas. Interesantísimo. Gracias!!

Afortunadamente la semana que viene comienzo en mi facultad un seminario de Java

Leyendo por aquí también he observado que es bueno colocar las funciones java en otro sitio. Investigaré cómo hacerlo.

Investigaré sobre float y absolute. Ya he leido algo en el foro.

Por último, he leido lo referente a los popups y sé que no son una buena práctica, sin embargo en este caso lo veo práctico y no molesto. Por favor échale un ojo:

http://www.tunacienciasgranada.com/Miembros.htm


1Saludo tío!

Código :

function PopLeroy(que)
{
  popUpWin = open(que.href, "main","width=650 height=365");
}

[...]
<a href="Tunos/Leroy.htm" onclick="javascript:PopLeroy(this);" class="clink">Leroy</a>

como recomendación adicional en los nombres de archivos NUNCA uses mayusculas, siempre define las variables, usarndo var ya que navegadores como opera o safari darán error por no definirlo y por ultimo donde dice onclick="javascript:PopLeroy(this);"
no coloques la invocación a JS, esto de seguro fael se lo ha saltado por el apuro que lleva, pero el sabe que no es así y que no se dio cuenta, de seguro de haber estado menos ocupado lo habria hecho mejor.

onclick="popleroy(this.href);"
en las funciones usa siempre minusculas he invoca, con datos no solo del objeto sino tambien de el parametro
y te nquedará de la siguiente manera:

Código :

function popleroy(que)
{
  var popupwin = open(que, "main","width=650 height=365");
}

[...]
<a href="tunos/leroy.htm" onclick="popleroy(this.href);" class="clink">Leroy</a>

esas son mis recomendaciones, que junto con las recomendaciones de fael te ayudarán a hacer un trabajo mejor.

Se olvidaron del return false; después de llamar a la función.

sí, muy cierto lo que dice jhony, pues el evento onclick es exclusivo para javascript y declarlarlo de nuevo sería decir lo mismo dos veces, sin embargo no hay diferencia entre uno y otro.

también hay que agregarle al final de la función un return false como dice neo, para que el enlace no sea seguido.

y, personalmente no tengo ningún problema con utilizar mayúsculas en las funciones, de hecho así se "separan" las palabras

es preferible

Código :

function abrirNuevoPopup(){
[...]

a

Código :

function abrir_nuevo_popup(){
[...]

además las funciones predeterminadas así están hechas:

Código :

document.getElementById();

pero como dije, es cuestión de estilo.

y viendo el link que pusiste veo que defines una función para cada enlace y que básicamente hace lo mismo. sería bueno que lo corrigieras.

un saludo

jhony192, gracias por tu explicación, no sabía eso. Así que me lo apunto.

the_NEO_JP escribió:

, muy cierto esto.

fael escribió:

bueno, yo lo digo mas que todo por control, cuando comienzas a memorizar contraseñas alfanumericas de 20 cifras, diferenciados entre mayusculas y minusculas, ya no requieres tener que separar las palabnras de las funciones
a demás nunca olvidarás un número telefonico

lo mas importante al programar es mantener el control sobre el script, así no requieres comentar el código, no requieres hacer anotaciones, ni marcar con nombres facilmente recordables a las funciones.
lo mas importante es el control.
si controlas el script, puedes conseguir hacer todo un sistema completo en un mismo archivo.
incluso incluir varios lenguajes o objetos separados por condiciones
en un mismo archivo y cargarlos en archivos separados en el navegador.


PD:
Control
BWHAHAHAHAHAagcoummm .... me trague el chicle

El estandar de codificación dice

Nombres de funciones o variables
estoEsUnaFunciónLarga

Nombres de Clases
EstoEsUnaClase

Nombres de Constantes
ESTOESUNACONSTANTE

Creo que precisamente a ti te lo habia explicado antes con un ejemplo de un satelite

Ok Ok tomo nota de todo.

Yo en la universidad lo que aprendí este año es un poquito de programación en general y C++ en particular. Veo que Javascript tiene muchas similitudes, aunque es, digamos, "más abierto", más flexible.

Tengo un pequeño problema con el servidor y poco tiempo, pero en cuanto pueda pasar las correcciones os pondré un link a ver qué os parece.

Muchas gracias chic@sss

C es lenguaje madre del que se deriva el estandar ECMA, que es un tipo de sintaxis, colecciones de clases y funciuones que determinan ciertos tipos de lenguajes

Javascript y Actionscript son lenguajes basados en ECMA

Freddie® escribió:

Nel...eso me lo explico a mi Señor freddie.....

Bueno, al parecer los problemas se resolvieron... además aprendimos un poco de estándares de codificación (núnca se sabe cuándo llegará la luz a la vida de uno).

A menos que Freddie diga lo contrario. Este tema ya no da para más.