Prevalencia HTML vs CSS

[lemmoner]

Hola a todos,

Estoy saneando una página web que mezcla atributos HTML con otros CSS.
El caso es que lo primero que he hecho es un Reset CSS básico:

Código:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

Y para mi sorpresa, el reset deja invisible una imagen de fondo que había en la celda de una tabla:

Código:

<td height="37" align="left" background="../../plantilla/franja.gif" style="background-repeat:repeat-x;">

El caso es que he visto que si la imagen la especifico utilizando CSS, vuelve a quedar visible.

Código:

<td height="37" align="left" style="background-image:url(../../plantilla/franja.gif); background-repeat:repeat-x;">

Deduzco por el resultado, que CSS es más prevalente que HTML. Es decir, que siempre que se apliquen modificadores al mismo tiempo sobre un mismo atributo en HTML y CSS, será CSS el que marque el verdadero comportamiento.

¿Es así o me estoy montando una paranoia mental?

Y 2º, no he encontrado el modificador "background" en la referencia HTML de la W3C.

¿Se trata de algún modificador no estándar pero que todos los navegadores entienden (he probado que se comporta igual en Firefox, Opera, Safari-Chrome e IE6)?

¿Podeis indicarme algún lugar para encontrar una referencia completa de todas las etiqueta HTML y los modificadores de todas las etiquetas?

[alexk]

no entendi nada jeje...

esta en el reset

Código:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

aparte que el "background: transparent;" no funciona en IE... no le veo el sentido... pero bueno...

puedes acortar lo de tu td a

Código:

td{background:url(../../plantilla/franja.gif); repeat-x;}

pues como especificaste "background-image" no sobre-escribio el "background" (supongo)

[Triby]

Que doctype estas usando?

Algunas propiedades asignadas desde html ya son obsoletas y no reconocidas, por ejemplo, en TD: height y background; es por eso que vuelve a aparecer cuando lo aplicas con CSS (en la misma etiqueta o desde una hoja de estilos).

[lemmoner]

Iniciado por alexk

no entendi nada jeje...

esta en el reset

Código:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

Lo sé, me explico como un libro cerrado...jeje

A ver, este reset está en mi hoja de estilos. Y según he leído, una vez hecho el Reset, cualquier modificación que haya a continuación de él en la hoja de estilos, o sobre el código de mi página web, sobreescribiría los valores por defecto que impongo con el reset.

Lo que no entiendo es por qué si defino el background: transparent en el reset, pero luego en la etiqueta HTML de la celda (<td>) defino un fondo para la celda con el atributo background=" ", sigue sin verse el fondo de la tabla. En teoría he sobreescrito ese "background:transparent" del reset, no?

[lemmoner]

Iniciado por Triby

Que doctype estas usando?

Algunas propiedades asignadas desde html ya son obsoletas y no reconocidas, por ejemplo, en TD: height y background; es por eso que vuelve a aparecer cuando lo aplicas con CSS (en la misma etiqueta o desde una hoja de estilos).

Utilizo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">

Existe alguna referencia al respecto de las propiedades html obsoletas, y a partir de qué navegadores o versiones están obsoletas?

[alexk]

ya pero a tu td le asignas un "background-image" y no un "background" supongo que ese es el error es semejante pero no deja de ser otra propiedad intenta y comentas como te mencione antes...

[Triby]

No tengo a la mano los links de referencia acerca de atributos obsoletos, pero tienes dos opciones:

- Usar el validador de la w3c para xHTML y CSS
- Preguntarle a san Google

[lemmoner]

Alexk, sí me funciona con background-image.

Por lo que he podido leer en la CSS Reference del W3C, background engloba todas las propiedades background-*, pero transparent es un valor válido sólo para background-image. Por eso background: transparent fija el valor transparent a background-image, y sobrescribiendo en mi código el background-image:url( ) ya recupero mi imagen de fondo.

Lo que quiero saber es por qué carajo si especifico una imagen de fondo con <td background=" "> no la veo, y si lo hago con <td style="background-image: "> SÍ que la veo.

@ Triby

He probado que utilizando <td background=" ">, si no hago el reset la imagen de fondo sí que se ve. Así que entiendo que sí está soportado por los navegadores.

[alexk]

ok tienes un "misterio" tienes la victima "tu td" tienes el cuchillo "el css" y aun buscas el asesino? (tu reset css) quitalo no veo en que te puede afectar... pero bueno como quieras chao! y suerte!...

[lemmoner]

Iniciado por Triby

No tengo a la mano los links de referencia acerca de atributos obsoletos, pero tienes dos opciones:

- Usar el validador de la w3c para xHTML y CSS
- Preguntarle a san Google

Genial, no valida el HTML por el dichoso background=" de HTML.
Parece no estar reconocido, así que mejor especifico la imagen con CSS.

@ Alexk: me temo que mantendré el reset CSS porque estoy intentando compatibilizar la página para IE6 y FF al menos, y sino se me descuadran muchas cosas....

Gracias a los 2!!!!

[alexk]

solo digo esta parte del reset background: transparent; no hay en IE6 y creo que en el IE7 tampoco pero de este ultimo no estoy seguro...

[pitufoweb]

Iniciado por alexk

solo digo esta parte del reset background: transparent; no hay en IE6 y creo que en el IE7 tampoco pero de este ultimo no estoy seguro...

Quien dijo que background: transparent; no funciona con IE. Que yo recuerde funciona correctamente.


Bye.

[alexk]

Quien dijo que background: transparent;

mmmm me citas y aun no vez quien? jeje...

en IE6 una vez lo intente y no me funciono... lo intentare de nuevo mas tarde pero estoy 99% seguro de que no anda pero bueno seria bueno que nos muestres un ejemplo de que si funciona... si no me da tiempo para demostrar lo contrario... chao suerte!

EDITO:
al parecer si funciona "transparent" (en ie6 portable) ignoro en que version lo note talvez fue error humano... chao perdon por hablar a ciegas y gracias pitufoweb por la aclaracion... igual mi punto era que no le encontraba sentido agregarlo al reset...

[pitufoweb]

Iniciado por alexk

mmmm me citas y aun no vez quien? jeje...

Esto no lo entendí. jeje

Iniciado por alexk

en IE6 una vez lo intente y no me funciono... lo intentare de nuevo mas tarde pero estoy 99% seguro de que no anda pero bueno seria bueno que nos muestres un ejemplo de que si funciona... si no me da tiempo para demostrar lo contrario... chao suerte!

Creo que no hace falta mostrar un ejemplo. Si IE no soportara background: transparent habría que especificar el color de fondo a todos los elementos que estén sobre un elemento que tenga aplicado un color de fondo especifico, pues transparent es el valor predeterminado de todos los elementos.

Me entendisteee.....Bueno, ni yo mismo me entendí. jeje


Bye.

[alexk]

mmm ya habia editado mencionando que si funciona...

[zerokilled]

Iniciado por lemmoner

Genial, no valida el HTML por el dichoso background=" de HTML.
Parece no estar reconocido, así que mejor especifico la imagen con CSS.

como ya te fijaste, el atributo background ya no existe en HTML aunque los navegadores siguen teniendo soporte. en todo caso, la razon por la que no te funcionaba es precisamente por esta linea background: transparent; en tu reset. no confundas algo, el transparent es un valor que se la aplica al color de fondo y no a la imagen de fondo. en todo caso, lo que realmente te esta afectando es que estas usando el atajo background. si no indicas todos los valores es sinonimo de poner un valor vacio o el navegador usar un valor predeterminado. ahora, si en lugar utilizaras background-color:transparent; veras que no produce problema.

despues de todo, el atributo background ya es obsoleto incluso en el DTD html transisional. una manera de determinar si un atributo o elemento es valido, ademas de validarlo en el W3C, puedes leer el documento DTD.

[lemmoner]

Iniciado por zerokilled

como ya te fijaste, el atributo background ya no existe en HTML aunque los navegadores siguen teniendo soporte. en todo caso, la razon por la que no te funcionaba es precisamente por esta linea background: transparent; en tu reset. no confundas algo, el transparent es un valor que se la aplica al color de fondo y no a la imagen de fondo. en todo caso, lo que realmente te esta afectando es que estas usando el atajo background. si no indicas todos los valores es sinonimo de poner un valor vacio o el navegador usar un valor predeterminado. ahora, si en lugar utilizaras background-color:transparent; veras que no produce problema.

despues de todo, el atributo background ya es obsoleto incluso en el DTD html transisional. una manera de determinar si un atributo o elemento es valido, ademas de validarlo en el W3C, puedes leer el documento DTD.

Gracias por la aclaración. Como suele decirse....Manolete, si no sabes torear pa qué te metes . Tendré que poner más cuidado.