CSS. Especificaciones W3, y firefox...

[ignacio_giri]

Bueno, hace tiempo que diseño y ahora estoy tratando de maquetar todos mis sitios en CSS, pero no se porque no los puedo hacer que se vean bien en Firefox...

les pongo un ejemplo: http://v2.neorosario.com

ese sitio se ve 10pts en IE6 superior, y en Firefox tienes sus problemillas, como el ajuste de celdas y esas cositas que sabran comprender...

y el otro tema que en el mismo ejemplo, quiero lo quiero validar en CSS por la w3 y tengo miles y miles de errores... pero no se como solucionarlo... tiene que haber algun truquito me han comentado para poder hacer esto con las reglas pactadas...

Saludos y gracias...

[JavierB]

Hola ignacio_giri

Al pasar el código Css por el validador, solo aparece un aviso en la línea 9, que se soluciona dejandola así:

font-family: Verdana, Arial, Helvetica, sans-serif,serif;

Saludos,

[ignacio_giri]

Hola Javi, primero que nada, gracias por responder, te comento.

Cuando le hago el validator CSS, me tira:

Código HTML:

 Target: [url]http://v2.neorosario.com[/url]

Código HTML:

Please, validate your XML document first! Line 26

Column 153

The element type "input" must be terminated by the matching end-tag "</input>". 

</H2>
si le hago el validator XHTML me tira 360 errores: http://validator.w3.org/check?uri=ht...neorosario.com

me encantaría saber adonde lo validaste vos y que me hagan entrar un poco más en el tema este que me resulta muy imporartante a la hora de hacer sitios.

otra cosa, yo metí Firefox acá por que me han comentado que si el sitio no tienen errores segun la w3 despues anda bien en firefox, eso es verdad?

bueno, y si no es verdad me encantaria buscar la solucion de las celdas ajustadas que hace el IE y no lo hace firefox... tengo que diseñar todo con DIVS... bueno es complicado e interesante...

Saludos y gracias...

[KnowDemon]

He visto el código HTML y se nota la "tradición" o la manera "antigua" de hacer las cosas. Desde el punto de vista de la sintaxis a primera vista encuentro algunos errores (para XHTML estricto, no para el XHTML transicional que usas):

Algunas etiquetas tienen el nombre en mayusculas.

La gran mayoría o todas las tablas carecen del atributo summary (que es obligatorio).

Se recomienda que el cerrar elementos de una sola etiqueta dejes un espacio entre el nombre de la etiqueta o el valor del último atributo y la diagonal de cierre.

Los problemas de "ajuste" o tamaños se pueden deber a que los navegadores usualmente usan valores por defecto diferentes para los mismos. Si las distancias y tamaños problemáticos los declaras explicitamente en tu hoja de estilos, esos problemas deben desaparecer. Espero que me haya explicado bien.

Desde el punto de vista del diseño. El diseño es bueno.. pero no se si la manera de conseguirlo sea la mejor. Viendo la página principal de tu sitio creo que puedes conseguir un diseño prácticamente idéntico mucho más sencillo usando capas y no tablas. Esto tiene la ventaja de que el día que desees cambiar la apariencia del sitio solo tengas que cambiar la hoja de estilos (con los gráficos asociados por supuesto).

Los sitos como el tuyo (de ancho y tamaños fijos) son los más fáciles de portar a CSS. Te aconsejo que hagas pruebas en tu PC e intentes maquetarlo sin usar tablas cundo estas no sean necesarias. Cuando estes satisfecho podrás aplicar el diseño a tu sitio.

Una página que valida no es necesariamente una página bien estructurada.

¡Saludos!

[JavierB]

Hola de nuevo.

No he validado la página, sino el archivo .css

Validar Css

Con respecto a los errores que te marca, me temo que la única solución es la paciencia. Vas mirando las líneas donde te marca error y los vas corrigiendo. Si tienes dudas sobre algún error seguro que por aquí habrá alguien para echarte un cable.

Saludos,

[ignacio_giri]

Iniciado por KnowDemon

La gran mayoría o todas las tablas carecen del atributo summary (que es obligatorio).

no tengo idea que es el atributo summary

Iniciado por KnowDemon

Se recomienda que el cerrar elementos de una sola etiqueta dejes un espacio entre el nombre de la etiqueta o el valor del último atributo y la diagonal de cierre.

si, lo he hecho en todo. parece que el problema esta en otro lado.

Iniciado por KnowDemon

Los problemas de "ajuste" o tamaños se pueden deber a que los navegadores usualmente usan valores por defecto diferentes para los mismos. Si las distancias y tamaños problemáticos los declaras explicitamente en tu hoja de estilos, esos problemas deben desaparecer. Espero que me haya explicado bien.

te entendi perfectamente, tamaños en CSS claro que si, lo voy a intentar.

Iniciado por KnowDemon

Desde el punto de vista del diseño. El diseño es bueno.. pero no se si la manera de conseguirlo sea la mejor. Viendo la página principal de tu sitio creo que puedes conseguir un diseño prácticamente idéntico mucho más sencillo usando capas y no tablas. Esto tiene la ventaja de que el día que desees cambiar la apariencia del sitio solo tengas que cambiar la hoja de estilos (con los gráficos asociados por supuesto).

Gracias por los halagos, y como dices, me encantaría poder pasar todo el sitio a capas, pero es algo muy nuevo para mi, muy nuevo que no se muy bien el uso de las capas... yo antes usaba las capas en dreamweaver, con las hidden, visible y esas cosas... pero ahora se complica (creo), no se que software usar o que guía poder seguir diseñando con capas...

las pestañas de musica, teatro y notas son capas... pero las saque de dynamic drive, no las hice yo...

Iniciado por KnowDemon

Los sitos como el tuyo (de ancho y tamaños fijos) son los más fáciles de portar a CSS. Te aconsejo que hagas pruebas en tu PC e intentes maquetarlo sin usar tablas cundo estas no sean necesarias. Cuando estes satisfecho podrás aplicar el diseño a tu sitio.

Bueno, si, voy a ver como pasar todo el sitio a CSS y.... capas? layers? upsssss, que problema ese.... se me complica un poco... me parece... help meeee...

Iniciado por KnowDemon

Una página que valida no es necesariamente una página bien estructurada.

Si, de eso estaba enterado... me han comentado muchos a los que les plantee este problema que ya hace años me tiene mal

Saludos.

[frijolerou]

Para comenzar debes ir corrigiendo el xhtml para que te valide... vamos por parte (claro que ha grandes rasgos porque hay muchos errores):


En el caso de este error:
Line 22, column 66: there is no attribute "onSubmit" intenta usar onsubmit en vez de onSubmit (es decir todo en minusculas), lo mismo cuando uses onMouseOver, onClick, etc etc etc.

En los input type="image" las dimensiones (width y height) no son permitidas directamente en el xhtml, tal como te lo decian en una de las respuestas, todos esos atributos dalos directamente desde la hoja de estilos.

end tag for "input" omitted, but OMITTAG NO was specified
Tienes varios de esos errores, que significan que no has cerrado bien la etiqueta input. Todas las etiquetas que sean de este tipo: <img> <input> <hr> etc... debes cerrarlas asi: <img /> <input /> <hr /> etc.

required attribute "alt" not specified
Otro error que repites mucho. En todoas las imagenes insertadas con la etiqueta <img /> debes darle un atributo alt="" (aunque este vacío, pero debes entregar ese atributo). El atributo "alt" es un texto alternativo a la imagen, que se hace visible por ejemplo cuando la imagen no cargase.

Line 47, column 80: document type does not allow element "link" here
Los elementos <link /> debes ubicarlos entre los tags <head></head> del documento. En la linea 47, lo pusiste dentro de una celda (este error lo has cometido varias veces dentro d ela pagina)

Line 105, column 40: cannot generate system identifier for general entity "idcategoria":
Si en la url de un link debes ingresar un & (para agregar variables a la url), ese caracter debes ingresarlo como &amp;
Ejemplo: pagina.html?var=56&amp;key=56


Line 149, column 64: end tag for "param" omitted, but OMITTAG NO was specified
Para ingresar una pelicula flash en un xhtml valido no te sirve el codigo que se usa normalmente (pero esto lo podemos dejar para mas adelante)

Otro error que cometes mucho es que escribes varios tags html con mayuscula: por ejemplo en <LINK />, <SCRIT>, <DIV></DIV>. En los tags html siempre debes usar minusculas.


Line 244, column 403: end tag for element "a" which is not open

Te sobra una etiqueta </a>, en el validador te aparece marcada en rojo.

Line 244, column 407: end tag for element "p" which is not open
Lo mismo que la anterior, pero ahora para una etiqueta </p>

Estos dos ultimos errores lo cometes en varias lineas.


<br div> <-- esto lo haces en varias lineas, debe ser <br /><div>


Esos son basicamente los errores de validacion del XHTML, y como los cometes varias veces dentro del cocumento por eso te tira 360 errores.

[KnowDemon]

Yo creoq ue esta página te será muy útil:
http://www.tierradenomadas.com/indice.php?tallerweb

[ignacio_giri]

Line 22, column 66: there is no attribute "onSubmit" intenta usar onsubmit en vez de onSubmit (es decir todo en minusculas), lo mismo cuando uses onMouseOver, onClick, etc etc etc.

bueno, yo pense que onSubmit estaba bien escrito, y te comento que lo habia probado con minusculas y tambien me tiraba el error, pero capaz que arreglando los demas ya no me lo tiraria...

En los input type="image" las dimensiones (width y height) no son permitidas directamente en el xhtml, tal como te lo decian en una de las respuestas, todos esos atributos dalos directamente desde la hoja de estilos.

pues si, lo hare, aparte me ayuda mejor por si quiero cambiar algo y maquetarlo todo manteniendo el diseño total.

end tag for "input" omitted, but OMITTAG NO was specified
Tienes varios de esos errores, que significan que no has cerrado bien la etiqueta input. Todas las etiquetas que sean de este tipo: <img> <input> <hr> etc... debes cerrarlas asi: <img /> <input /> <hr /> etc.

pues mira, yo lo hacia con los img, no pense que con los otro tags tambien se hacia, todos los dias se aprende algo nuevo.

required attribute "alt" not specified
Otro error que repites mucho. En todoas las imagenes insertadas con la etiqueta <img /> debes darle un atributo alt="" (aunque este vacío, pero debes entregar ese atributo). El atributo "alt" es un texto alternativo a la imagen, que se hace visible por ejemplo cuando la imagen no cargase.

Si, eso fue lo unico que habia entendido del error que me tiraba, aparte el programador que me enseño siempre lo vi poniendo los alt, y ahora se porque... jeje

Line 47, column 80: document type does not allow element "link" here
Los elementos <link /> debes ubicarlos entre los tags <head></head> del documento. En la linea 47, lo pusiste dentro de una celda (este error lo has cometido varias veces dentro d ela pagina)

claro, porque uso includes... y lo puse en cualquier lado.

Line 105, column 40: cannot generate system identifier for general entity "idcategoria":
Si en la url de un link debes ingresar un & (para agregar variables a la url), ese caracter debes ingresarlo como &amp;
Ejemplo: pagina.html?var=56&amp;key=56

eso tambien lo acabo de aprender... sabia que en muchos casos hay que hacerlo como con los acentos, y demas signos... pero no pense que este caso iba a hacer lo mismo, de ahora en más lo haré.

Line 149, column 64: end tag for "param" omitted, but OMITTAG NO was specified
Para ingresar una pelicula flash en un xhtml valido no te sirve el codigo que se usa normalmente (pero esto lo podemos dejar para mas adelante)

no soy muy amigo del flash.... , siempre me he llevado mal... ya me voy a poner con eso.

Line 244, column 403: end tag for element "a" which is not open
Te sobra una etiqueta </a>, en el validador te aparece marcada en rojo.

Line 244, column 407: end tag for element "p" which is not open
Lo mismo que la anterior, pero ahora para una etiqueta </p>

Jamás se me hubiera ocurrido que ese error significaba eso... lo tendre en cuenta...

<br div> <-- esto lo haces en varias lineas, debe ser <br /><div>

lo más que seguro que eso tambien es un copiar y pegar de un script... pero lo arreglaré y lo mandaré a dynamic drive que fue de donde lo saque...



Bueno, más que decirte gracias frijolerou y KnowDemon, mis profesores por voluntad, me siento adeudado con ustedes... la verdad que fué excelente la información que recibí de ustedes...

Bueno, apenas termine con todos los arreglos les comento como me fué...

[Scour]

Buenas, respecto a lo que comentabas de que en IE se ve bien y en Firefox hay fallos, es al revés, en Firefox se ve lo que has especificado en tus CSS y en IE se ve mal. El modelo de cajas está mal implementado por Microsoft en IE, con lo que, aunque crees que IE ha interpretado bien tus CSS y Firefox mal, es al contrario.

Te recomiendo echar un vistazo al modelo de cajas, la compañera Kemie lo explica muy bien en su web, y compara el modelo de cajas correcto (Firefox entre otros) con el de IE: http://www.disenorama.com/articulos/...o_de_cajas.htm

Al principio cuesta pasarse de maquetar con tablas a hacerlo con CSS, pero cuando lo dominas es sencillo, te recomiendo mirar el código de los diseños de las galerías CSS CSSZenGarden y CamaleonCSS que para eso fueron creadas.

Yo aprendí pasandome horas mirando las CSS de los cientos de diseños del CSSZenGarden, se aprende mucho.

Un saludo.

[ignacio_giri]

Bueno, chicos les comento que estoy maquetando todo a css, y aprendiendo a usar los divs... vamos a ver como me va...

y les dejo una preguntonta:

centrando los divs en la pantalla para que se adapte a todas las resoluciones...

bueno, yo con tablas, le pongo align="center" y se adapta a todo, pero en los divs???

Saludos y gracias

[PascalC]

centrar :
div {margin-left:auto; margin-right:auto;}

[frijolerou]

complementando la respuesta de Pascal, para que funcione tambien en IE5.5 e IE5.0 al elemento padre del div debes darle text-align:center.

En este caso el div a centrar seria algo asi como el div contenedor, correcto? en ese caso agregas text-align:center al selector body

[PascalC]

personalmente ya no me preocupo realmente de IE5 y IE5.5 :)

Solo compruebo que mis diseños no resultan demasiado feos en esos navegadores de la edad media, tengo menos de 2% de navegadores IE5/5.5 en mi web y sigue bajando, no vale la pena ensuciar mi CSS cuando casi todos mis visitantes usan IE6 o Mozilla Firefox ;)