Foros del Web
Página 1 de 2 1 2
Mostrar 50 mensajes desde este tema en una página

Foros del Web (http://www.forosdelweb.com/)
-   CSS (http://www.forosdelweb.com/f53/)
-   -   W3C CSS Validator!! (http://www.forosdelweb.com/f53/w3c-css-validator-584368/)

messer 08/05/2008 13:03
W3C CSS Validator!!
 
Buenas tardes a todos!!

Me gustaria saber por que el CSS Validator de W3C me arroja este tipo de alertas:

Cita:
Same colors for color and background-color in two contexts #autoXML1693181716931817 and #autoXML1693182616931826
lo que en Espanol traduce:
Cita:
Color de primer plano y color de fondo iguales en dos contextos #autoXML1693284316932843 y #autoXML1693285216932852
Me dice que estoy usando el mismo color en 2 contextos diferentes.. Es acaso ilegal? o hay una extremada exigencia en el asunto..

A ver que me pueden decir.. Estoy ansioso por saberlo.

Saludos!! :arriba:

Ziongem 08/05/2008 13:52
Re: W3C CSS Validator!!
 
Creo que se refiere a que no hay suficiente contraste entre el color de fondo y el color de texto.

Saludos

messer 08/05/2008 14:27
Re: W3C CSS Validator!!
 
No, no creo que sea eso, porque por ejemplo:

en una de las alertas me dice que uso color Blanco para fondo de una (capaX) y a la vez utilizo color Blanco para texto que se encuentra en otra (capaY) con color de fondo negro..

Entonces me dice que utilizo 'Color Blanco' en contextos diferentes..

DragonX 08/05/2008 14:30
Re: W3C CSS Validator!!
 
tenes que declarar color de primer plano y color de fondo en ambos casos, eso es lo que te esta advirtiendo :adios:

metacortex 08/05/2008 14:57
Re: W3C CSS Validator!!
 
... Una advertencia que por cierto siempre me ha parecido incorrecta. Si por ejemplo hay una capa con fondo azul / letras blancas, y abajo hay otra con fondo blanco / letras azules ¿por qué habría de recibir una advertencia?.

Considerando esto, creo que la palabra "advertencia" -aplicándose a esto- está mal utilizada por la W3C. En todo caso podrían ser una serie de recomendaciones o factores a tomar en cuenta, tales como los avisos del analizador de accesibilidad.

messer 08/05/2008 15:05
Re: W3C CSS Validator!!
 
A ver si entiendo bien.. DragonX dices que debo declarar obligatoriamente un color de fondo para cada capa? :patada:

Si el color de fondo que prevalece es el de la (capaY) para la misma, no veo el por que habria de hacerlo..

Coincido totalmente con metacortex la W3C esta mal utilizando sus advertencias :stress::-p

Saludos!!:adios:

Mikmoro 08/05/2008 15:20
Re: W3C CSS Validator!!
 
Cita:
Iniciado por metacortex (Mensaje 2396182)
... Una advertencia que por cierto siempre me ha parecido incorrecta. Si por ejemplo hay una capa con fondo azul / letras blancas, y abajo hay otra con fondo blanco / letras azules ¿por qué habría de recibir una advertencia?.
¿Pero eso te da una advertencia?

Me parece que esto no da advertencias:

Cita:
#uno { background-color: rgb(51, 51, 255);
color: rgb(255, 255, 255);
}
#dos { color: rgb(51, 51, 255);
background-color: rgb(255, 255, 255);
}
Mikel.

PatomaS 08/05/2008 18:48
Re: W3C CSS Validator!!
 
Hola

Como indica Mikmoro, su código no genera advertencias.

Incluso variantes como:
Código HTML:
#uno { background-color: rgb(51, 51, 255);
color: rgb(255, 255, 255);
}
#uno #dos { color: rgb(51, 51, 255);
background-color: rgb(255, 255, 255);
}
o
Código HTML:
#uno { background-color: rgb(51, 51, 255);
color: rgb(255, 255, 255);
}
#uno > #dos { color: rgb(51, 51, 255);
background-color: rgb(255, 255, 255);
}
o
Código HTML:
#uno { background-color: rgb(51, 51, 255);
color: rgb(255, 255, 255);
}
#uno + #dos { color: rgb(51, 51, 255);
background-color: rgb(255, 255, 255);
}
messer, no hemos visto tu código, así que no podemos dar una valoración real y ajustada de lo que te está ocurriendo, sin embargo, la teoría va como sigue.

El tema de los colores es importante por diversos motivos, entre ellos:
  1. Si no hay suficiente contraste, un usuario con ciertas discapacidades tendrá problemas para ver el contenido.
  2. Si especificas algunos colores, pero no otros, puedes obtener resultados no esperado en algunas circunstancias ya que la recomendación no obliga a los navegadores a usar tus colores ni a seguir las reglas del W3C, solo indica que las deben seguir, pero si alguno decide no seguirlas, tu página se verá muy diferente.
  3. Asignar colores a los elementos no es tan complicado, basta con que uses inherit cuando quieras que se herede lo que venía del padre. O puedes usar asignaciones más generales, tal vez mediante "*" o mediante un contenedor general.
  4. Recuerda que muchos elementos tienen como color inicial "transparente", el cual no es en si un color, lo que nos lleva de vuelta al punto 2, tu estilo depende de lo que el navegador haga y no de ti.
  5. Un usuario puede haber definido su propia hoja de estilos genérica y estarla usando como base en el navegador, esto agrega una tercera incógnita a la ecuación de mostrar tu estilo.
  6. La escala de valoración para interpretar colores incluye los elementos ya mencionados, más la etiqueta font y las variaciones mediante DOM, así que cuanta menos información des, más posibilidades hay de que algo salga mal, ya sea por intervención del usuario o por tus propios códigos.

Así que los puntos anteriores hacen que sea una buena práctica definir todos los colores para minimizar las posibilidades de efectos indeseados y mejorar el estilo de codificación.

Finalmente, las advertencias no son errores, son sugerencias para mejorar el código que ya es válido. Puedes revisarlo en la propia página del validador.

En cualquier caso, si quieres una opinión ajustada al caso que te ocupa, es mejor que pegues los códigos involucrados, es decir, los estilos que afecten a esas dos capas y las capas en si.

Felicidad

metacortex 09/05/2008 00:53
Re: W3C CSS Validator!!
 
Mikmoro y PatomaS: expandan su mente... Dejen que la fuerza del CSS los invada y haga que miren más allá de lo evidente :borracho:.

La advertencia ocurre cuando no se define uno de los dos: color o fondo.

Código:
#uno {
  background-color: rgb(51, 51, 255);
  color: rgb(255, 255, 255);
}

#dos {
  color: rgb(51, 51, 255);
  background-color: rgb(255, 255, 255);
}
Hay más de una razón por la cual no asignar color o fondo, por ejemplo:

Código:
* {
  background-color: rgb(255, 255, 255);
}

#uno {
  background-color: rgb(51, 51, 255);
  color: rgb(255, 255, 255);

}
#dos {
  color: rgb(51, 51, 255);
}
El primer selector ( * ) indica que todos los estilos (salvo se especifique lo contrario) tendrán un fondo blanco. Esto nos evita estar repitiendo declaraciones a diestra y siniestra. No obstante, para el actual sistema de la W3C ésto debería generar advertencias :pensando:. El término suena un poco drástico para lo que se quiere expresar, sobre todo si lo que genera la "advertencia" es en realidad producto de un correcto uso del código.

PatomaS 09/05/2008 04:00
Re: W3C CSS Validator!!
 
Hola

Antes que nada, pego el código en el que baso esta respuesta, así pueden jugar con ella:
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <style type="text/css">
                * {background-color: #000; color: #fff;}
                html {background-color: #cf112e;}
                body {background-color: #c1f12e;}
                #verde {color: #0f0;}
                .verde {color: #0f0;}
                #rojo {color: #f00; background-color: #666;}
                #azul {color: #00f;}
                #herencia {color: inherit; background-color:  inherit;}
        </style>
        <script type="text/javascript">
        </script>
        <title>Pruebilla</title>
</head>
<body>
<div id="verde">texto de color verde<p id="rojo">texto de color rojo <font color="#0000ff">texto azul definido mediante font</font> <span>texto azul en un span</span></p></div>
<div id="verde">texto de color verde<p id="rojo">texto de color rojo <font color="#0000ff">texto azul definido mediante font</font> <span id="herencia">texto con herencia</span></p></div>
<div id="azul">texto azul mediante id</div>
<div id="rojo" style="color: #00f">texto con style azul e id rojo</div>
<div id="rojo" class="verde">texto con id rojo y class verde</div>
</body>
</html>
Según el W3C, el color de fondo, no es heredable, por lo que el uso de comodines para esta propiedad es totalmente inutil. Sin embargo, el color del texto si lo es.

Como puede verse en el ejemplo que sigue, he definido el elemento html, considerado como elemento raiz en casi todos los motores de renderizado salvo trident y algunas versiones de webkit, con esto, logramos que el fondo sea un tipo de rojo fresa o parecido, al menos en firefox y opera, pero no en explorer (no tengo versión 7, así que no peudo probarlo allí).

Luego defino el objeto body, el cual es considerado raíz en trident, pero no en los demás, al menos en versiones modernas, con lo que logramos una pequeña franja verde entre el texto de color rojo y el texto de color azul; sin embargo, en explorer, toda la pantalla es verde.

Una vez visto que el color no se hereda entre esos elementos, pasemos a los más comunes como el div, span y p.

La primera frase está contenida en un solo div, el cual tiene como color el verde, sin embargo, el único fragmento que tiene el texto de ese color, es la caja anónima del inicio, las interiores tienen sus propios colores.

Ahora veamos la segunda aparición de la línea en cuestión. Al span del final, le indico que herede el color de fondo y del texto. En firefox y opera, hereda el fondo del bloque contenedor más inmediato, sin embargo, en explorer hereda el color de "*".

Los dos últimos ejemplos, son para mostrar la relevancia entre formas de establecer las propiedades, siendo la de mayor relevancia el style, luego el id, luego el class y tras otras opciones, de último, el *; al menos esa regla es más o menos respetada de forma general.

A que nos llevan estos desordenados ejemplos, al hecho de que los colores, al igual que otras propiedades, deben definirse con cuidado y deben controlarse adecuadamente.

Yo soy muy amigo del uso de "*", sin embargo, tiene sus limitaciones en varias etiquetas si queremos lograr consistencia.

Ah, y esto es sin que nos hayamos metido con los bordes, si quieren deivertirse un poco más, agreguen esto al estilo con id verde:
Código HTML:
border: 1px solid #000;
Debido a estas reglas de herencia, el hecho de no definir las propiedades no heredables (valga la redundancia), implica errores conceptuales y posibles riesgos de discrepancias en el renderizado.

Felicidad

P.D.

Andaba con un poco de prisa y algo despistado, así que mi respuesta no es que sea una joya de redacción y claridad, pero espero que sirva un poco, disculpen por eso.

Mikmoro 09/05/2008 05:29
Re: W3C CSS Validator!!
 
Bueno. Metacortex, como puedes ver yo únicamente respondí a tu afirmación:

Cita:
Si por ejemplo hay una capa con fondo azul / letras blancas, y abajo hay otra con fondo blanco / letras azules ¿por qué habría de recibir una advertencia?.
Decías claramente fondo azul / texto blanco y debajo fondo blanco / texto azul.

Por eso me extrañó que dijeras que eso daba advertencias.

Mikel.

metacortex 09/05/2008 06:42
Re: W3C CSS Validator!!
 
Cita:
Iniciado por Mikmoro
Decías claramente fondo azul / texto blanco y debajo fondo blanco / texto azul.

Por eso me extrañó que dijeras que eso daba advertencias.
Ok ahí me ganaste jeje. Es verdad, la respuesta a lo que dije sólo podría ser así :arriba:

Ahora bien, considerando el caso que expuse ¿Es válida o no la teoría?.


PatomaS demostró que el "*" podría no ser tan infalible en ciertos casos específicos, pero al menos yo no he tenido problemas con el comodín, ni aún en casos complicados. No todo depende de los recursos CSS, el código debe estar bien construido y optimizado, para empezar.

Lo que se muestra en ese ejemplo del pana constituye una situación bastante particular, dentro de la cual no me imagino trabajando, bien sea con etiquetas <font> o asignando ID a párrafos que se sitúan dentro de capas ya identificadas con clases. En contraposición a dicha situación yo diría que en tal caso puede lograrse exactamente lo que se desea pero con un código más acorde a lo que se busca. Entiendo que el propósito fue mostrar los posibles errores de rendering entre los distintos navegadores, pero en realidad el punto inicial es otro. No se trata de que si algunas declaraciones son hereditarias o no, o si ciertas etiquetas le prestan atención al "*". El punto es que ciertamente se está definiendo un color y un fondo, ante lo cual el servicio de validación devuelve advertencias que no se justifican.

Sólo por evitar las advertencias no podemos repetir background: #ccc; o color: #333; en cada selector. Hay un comodín para eso, cuyo propósito es precisamente evitarnos caer en la redundancia (ya el CSS es bastante estático y se infla en un santiamén). En mi opinión el motor de validación debería tomar en cuenta la presencia de estos elementos antes de devolver los resultados.

Mikmoro 09/05/2008 07:26
Re: W3C CSS Validator!!
 
Luego leeré todo con más calma, pero yo creo que algunas de las advertencias son como las de los analizadores automáticos de accesibilidad; sólo te hacen fijar la atención sobre algunos puntos para que te asegures de que todo es correcto. Yo no les doy importanciaa las de css si sé que todo es correcto.

Por ejemplo como decía messer, no tiene mucho sentido tener que dar color y fondo a cada elemento para evitar las advertencias, pero yo creo que está plantado al estilo de: "¿esto está de tal manera. ¿Está usted seguro de que es correcto? Asegúrese". Yo me tomo así las advertencias, y si pudiera le contestaría al validador: "sí, es correcto, muchas gracias" :-)

Mikel.

metacortex 09/05/2008 07:49
Re: W3C CSS Validator!!
 
Cita:
Iniciado por Mikmoro
"¿esto está de tal manera. ¿Está usted seguro de que es correcto? Asegúrese"
Así está en los de accesibilidad y me parece bien. Directamente da a entender que el robot no puede ir más allá y por eso existen elementos que deben ser revisados manualmente. En el W3C no. Sólo dice "Advertencia" y el cómo se tome depende de cada quien. Por ejemplo, este tópico fue abierto debido a ese motivo. Si el sistema de validación llega hasta cierto punto, se debería aclarar mejor ese aspecto al usuario, en lugar de dejarlo naufragando con la palabra.

Sí, puede que haya una documentación respaldando lo que W3C quiere decir, pero nada cuesta colocar una línea más directamente en la pantalla de resultados.

Mikmoro 09/05/2008 08:12
Re: W3C CSS Validator!!
 
Posiblemente es eso, que no se han molestado en especificarlo, pero para mi que tiene el mismo sentido. Lo cierto es que no dice "no válido", es sólo una advertencia, eso ya en sí tiene una connotación lingüística.

Mikel.

Mikmoro 09/05/2008 08:18
Re: W3C CSS Validator!!
 
Cita:
Iniciado por PatomaS (Mensaje 2396828)
Según el W3C, el color de fondo, no es heredable, por lo que el uso de comodines para esta propiedad es totalmente inutil. Sin embargo, el color del texto si lo es.
¿Me equivoco o hay un error en esta frase? El comodín no hace que otros elementos hereden nada, porque no son descendientes. Del html o body sí nos debemos plantear la herencia, pero el comodín dice "todos", de manera que eso no es un asunto de herencia.

Mikel.

PatomaS 11/05/2008 06:16
Re: W3C CSS Validator!!
 
Hola

Aplicar una propiedad al "*" hace que todos los elementos tengan dicha propiedad asignada, sin embargo, el asterisco es el elemento de menor precedencia en la escala, por lo que si algún elemento en el árbol tiene asignada una propiedad, esta toma precedencia, luego, las propiedades heredables del padre tienen precendencia en los hijos antes que el asterisco.

Y volviendo al tema asunto del tema, la pregunta era "Es acaso ilegal? o hay una extremada exigencia en el asunto". Primero recalcaré que el autor del tema no ha vuelto a pasar por aquí y no hemos visto los códigos involucrados, por lo que estamos hablando de teoría solo.

Pero aparte de eso, la respuesta está en mi primer mensaje, allí, en un vínculo al propio 23c, se explica la diferencia entre warnings y errores. Léanlo antes de que el tema siga divagando.

Las advertencias no son errores, solo advierten de que has hecho algo que puede resultar en algo que no es lo que deseas.

Felicidad

Mikmoro 11/05/2008 11:12
Re: W3C CSS Validator!!
 
Cita:
Iniciado por PatomaS (Mensaje 2399251)
Aplicar una propiedad al "*" hace que todos los elementos tengan dicha propiedad asignada, sin embargo, el asterisco es el elemento de menor precedencia en la escala, por lo que si algún elemento en el árbol tiene asignada una propiedad, esta toma precedencia, luego, las propiedades heredables del padre tienen precendencia en los hijos antes que el asterisco.
Esto es cierto sólamente en caso de que se indique expresamente que se desea que un hijo herede de su padre, porque si no es así, prevalecerá el valor del comodín.

Por ejemplo, en este código:

Cita:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="es-es">
<head>
<style type="text/css">
* {font-size: 16px;}
#padre {font-size: 24px}
</style>
</head>
<body>
<div id="padre">Primer texto
<div id="hijo">Segundo</div>
</div>
</html>
El tamaño de "hijo" será de 16px, a pesar de ser hijo de "padre", es decir, no heredará sin más y el comodín prevalecerá sobre una herencia no declarada. Heredará en caso de que indiquemos:

#hijo {font-size: inherit;}

en cuyo caso efectivamente la herencia prevalecerá sobre el comodín, como es lógico.

Y en cuanto a la consulta inicial, hace ya rato que me interesea más el debate que la propia consulta en sí, de la que efectivamente no hemos vuelto a tener noticias :-D

metacortex 11/05/2008 12:03
Re: W3C CSS Validator!!
 
Cita:
Iniciado por PatomaS
Pero aparte de eso, la respuesta está en mi primer mensaje, allí, en un vínculo al propio 23c, se explica la diferencia entre warnings y errores. Léanlo antes de que el tema siga divagando.
El tema no está divagando. Están intentando explicarte que uno de los puntos que expusiste tiene un error. Yo en tu lugar tomaría el consejo.

Con respecto a la diferencia entre ambos términos (advertencia y error) no sólo está claro entre nosotros, sino que es uno de los puntos debatidos: de qué manera la palabra "advertencia" debería ser tomada, a pesar de la documentación.

También conozco el texto de la documentación. Igualmente no hace referencia a que el sistema no es capaz de evaluar algunos aspectos, por lo cual habría que revisar manualmente. En cambio, habla de "puntos que podrían ser peligrosos y conducir a un comportamiento extraño en algunos agentes de usuario". Para que el "*" llegue a la categoría de "punto peligroso", habría que escribir una sopa de códigos tan enredada que sea capaz de quebrarlo.

Cuando un desarrollador web coloca un botón de validación en su sitio, no todos quienes lo presionan saben que una advertencia no tiene por qué ser necesariamente un error, o -en su defecto- tampoco tienen la pericia, interés o tiempo suficiente como para documentarse al respecto.


Edito:

Hablando del asterisco, quizás su mayor ventaja sea precisamente su última posición en la escala de prioridades.

messer 12/05/2008 09:58
Re: W3C CSS Validator!!
 
Saludos de nuevo!!

Veo que hay mucha tela que cortar..

Este es el codigo:

Código:
body{margin:0px; background:#336699 url(../images/bg_page.jpg) fixed; font: 12px Verdana, Arial, Helvetica, sans-serif;}
h1,h2,h3,p,form,ul{margin:0px; padding:0px; font-weight:normal;}
h1{font-size:24px; padding:4px;}
h2{font-size:20px; padding:4px; letter-spacing:-1px;}
h3{font-size:18px; padding:4px;}

#MainFrame{position:relative;margin:20px auto 20px auto; text-align:center; width:900px;}
#Container{text-align:left; width:100%;}
#Content{width:100%;background:#FFF;}


#Header{
        position:relative;
        width:100%;
        height:90px;
        background:#0099CC url(../images/header_bg.jpg);
}

#NavMenu{
        position:relative;
        width:900px;
        padding-top:6px;
        padding-bottom:6px;
        background:#336699 url(../images/bg_nav.jpg);
        color:#FFFFFF;
        display:block; overflow:hidden;
}
#NavMenu ul{font: 12px Verdana, Arial, Helvetica, sans-serif;}
#NavMenu ul li{float:left; list-style:none; margin-right:1px;}
#NavMenu ul li .Suche{padding-left:120px; position:absolute; top:5px;}
#NavMenu ul li a{
        display:block;
        padding:4px 14px 4px 14px;
        text-decoration:none;
        font-weight:bold;
        color:#FFFFFF;
}
#NavMenu ul li a:hover{color:#99FFFF;}
#NavMenu ul li a.selected,#NavMenu ul li a.selected:hover{color:#FFFFCC;}

#WebContents{
        position:relative; padding:4px 2px 2px 2px;
}

#Div1{position:relative; width:200px; float:left;}
#Div2{position:relative; background:#FFF; width:540px; float:left; left:6px;}
#Div3{position:relative; width:136px; float:right; right:2px;}

#Credits,#Footer{padding:10px 20px 10px 20px; font-size:10px;}
#Footer{background:#999; border-top:1px solid #000;}
#Footer label{display:block; text-align:right;}
#Credits{background:#666666;}
#Buscador{margin-bottom:4px;}
#Buscador h3{background:#FFF;}

#Inmuebles, #Servicios{
        background:#F2E3C9 url(../images/bg_lupa.gif) bottom right no-repeat; padding:6px 2px 3px 6px; position:relative; top:0px; left:0px; border:1px solid #996600; border-top:0px;
}
.corte{clear:both;}
.seccion, .ex{margin-bottom:4px;}
.ex{background:#EFEFEF; padding:2px;}
.clasi{border-bottom:1px solid #666;}
.FormElem, .BsF, .codigo{
        border-bottom:1px solid #DFE6EC;
        border-right:1px solid #DFE6EC;
        border-left:1px solid #666;
        border-top:1px solid #666;
        padding:2px;
        font:11px Verdana, Arial, Helvetica, sans-serif;
}
.BsF{width:65px;}
.codigo{width:100px;}

.destacados, .resaltar{
        padding:4px; display:block; margin-bottom:4px;
}
#Div2 ul{margin:0px; padding:0px;}
#Div2 ul li{float:left; width:135px; list-style:none; margin:0px; padding:0px; font-size:10px;}
.precio1, .precio2{color:#FF0000;}
.precio2{font:bold 16px Verdana, Arial, Helvetica, sans-serif;}

.destacados h3 a{color:#3366CC;}
.destacados h3 a:hover{color:#00CCFF;}
.resaltar{border-top:1px dashed #887437; border-bottom:1px dashed #887437; background:#FFFFCC url(../images/bg_star.gif) bottom right no-repeat;}
.resaltar h3 a{color:#DD0000;}
.resaltar h3 a:hover{color:#FF0000;}

.txt10px{font-size:10px;}

#Buscador ul{margin:0; padding:0; padding-left:0px;}
#Buscador ul li{display:block; float:left; margin-left:0px; list-style:none;}
#Buscador ul li a{color:#FFFFFF; padding:6px 6px 6px 0px; background: #666 url(../images/gray_rgt.gif) top right no-repeat; text-decoration:none; font-weight:bold; outline:0; display:block;}
#Buscador ul li a:hover{background:#CC3300 url(../images/red_rgt.gif) top right no-repeat;}
#Buscador ul li a span{padding:6px 6px 6px 9px; background:url(../images/gray_lft.gif) top left no-repeat;}
#Buscador ul li a:hover span{background:#CC3300 url(../images/red_lft.gif) top left no-repeat;}
#Buscador ul li a.current,#Buscador ul li a:hover.current{color:#333333; background:#99CC00 url(../images/green_rgt.gif) top right no-repeat;}
#Buscador ul li a.current span,#nv_menu ul li a:hover.current span{background:#99CC00 url(../images/green_lft.gif) top left no-repeat;}

#Buscador .txt11{font:12px Arial, Helvetica, sans-serif; color:#666666;}
#Buscador label{font:bold 11px Verdana, Arial, Helvetica, sans-serif; display:block; padding:4px 0px 2px 0px; color:#887437; }
Y estas las advertencias:

Cita:
40 Same colors for color and background-color in two contexts #astminute1 and #NavMenu ul li a
40 Same colors for color and background-color in two contexts #astminute2 and #NavMenu ul li a
40 Same colors for color and background-color in two contexts #Div2 and #NavMenu ul li a
40 Same colors for color and background-color in two contexts #Buscador h3 and #NavMenu ul li a
40 Same colors for color and background-color in two contexts #astminute3 and #NavMenu ul li a
40 Same colors for color and background-color in two contexts #Content and #NavMenu ul li a
40 Same colors for color and background-color in two contexts #astminute4 and #NavMenu ul li a
44 Same colors for color and background-color in two contexts .resaltar and #NavMenu ul li a.selected:hover
44 Same colors for color and background-color in two contexts .resaltar and #NavMenu ul li a.selected:hover
112 Same colors for color and background-color in two contexts #Buscador ul li a and #Buscador .txt11
112 Same colors for color and background-color in two contexts #Credits and #Buscador .txt11
Espero sirva para entender mejor el asunto..

Saludos!! :adios:

Mikmoro 12/05/2008 10:03
Re: W3C CSS Validator!!
 
Bueno, ya has visto que hemos montado nuestro propio debate a nuestra bola :-D

Hay algo sorprendente en las advertencias: ¿dónde demonios está el selector #astminute1 en tu css? No lo encuentro.

Mikel.

Mikmoro 12/05/2008 10:08
Re: W3C CSS Validator!!
 
Creo que había una confusión con tu primer mensaje sobre las advertencias:

"Me dice que estoy usando el mismo color en 2 contextos diferentes.. Es acaso ilegal? o hay una extremada exigencia en el asunto."

Lo que te dice realmente es que el color de fondo de un selector y el color de texto de otro son iguales, y que por tanto si uno está dentro de otro o sobre otro habrá un problema grave.

Mikel.

messer 12/05/2008 10:28
Re: W3C CSS Validator!!
 
Bueno, de hecho nunca declare tal selector "#astminute1" ni el 2 ni el 3 que aparecen mas abajo en las advertencias. Asi como ese "#astminute1" en otra hoja de estilos me aparecian otros selectores que nunca declare algunos con "xml" en el nombre, por ejemplo: "#xml-tal" o "#xml-cual" supongo que son controles internos de representacion de la hoja de estilos.

Por otra parte la traduccion propia del sistema de validacion es la siguiente:
Cita:
40 Color de primer plano y color de fondo iguales en dos contextos #Content y #NavMenu ul li a
40 Color de primer plano y color de fondo iguales en dos contextos #Div2 y #NavMenu ul li a
40 Color de primer plano y color de fondo iguales en dos contextos #astminute3 y #NavMenu ul li a
40 Color de primer plano y color de fondo iguales en dos contextos #astminute2 y #NavMenu ul li a
40 Color de primer plano y color de fondo iguales en dos contextos #Buscador h3 y #NavMenu ul li a
40 Color de primer plano y color de fondo iguales en dos contextos #astminute1 y #NavMenu ul li a
40 Color de primer plano y color de fondo iguales en dos contextos #astminute4 y #NavMenu ul li a
44 Color de primer plano y color de fondo iguales en dos contextos .resaltar y #NavMenu ul li a.selected:hover
44 Color de primer plano y color de fondo iguales en dos contextos .resaltar y #NavMenu ul li a.selected:hover
112 Color de primer plano y color de fondo iguales en dos contextos #Credits y #Buscador .txt11
112 Color de primer plano y color de fondo iguales en dos contextos #Buscador ul li a y #Buscador .txt11
Me llama mucho la atencion porque en ninguna parte me dice quedeclarar el mismo color en contextos diferentes traera algun "problema grave".

Otra nota interesante es que: si declaro background-color: #FFFFFF; y a la vez para la otra declaro color: #FFFFFF; me arroja la advertencia, pero si a cualquiera de las 2 le cambio #FFFFFF por #FFF o por white, la advertencia desaparece.

Saludos!

Mikmoro 12/05/2008 11:38
Re: W3C CSS Validator!!
 
Cita:
Iniciado por messer (Mensaje 2400674)
Bueno, de hecho nunca declare tal selector "#astminute1" ni el 2 ni el 3 que aparecen mas abajo en las advertencias. Asi como ese "#astminute1" en otra hoja de estilos me aparecian otros selectores que nunca declare algunos con "xml" en el nombre, por ejemplo: "#xml-tal" o "#xml-cual" supongo que son controles internos de representacion de la hoja de estilos.
Pues bastante alucinante que lance advertencias sobre selectores que no existen :-) Ya decía yo que no los encontraba.

Cita:
Iniciado por messer (Mensaje 2400674)
Me llama mucho la atencion porque en ninguna parte me dice quedeclarar el mismo color en contextos diferentes traera algun "problema grave".
Bueno, esa segunda parte era de mi cosecha :-D , porque es así, puede traer un problema importante. Lo que ocurre es que haces una traducción literal, pero si la interpretas, no dice que el fondo y el color sean del mismo selector, sino mirando la css, ves que son efectivamente fondo de una y color de otra.

Cita:
Iniciado por messer (Mensaje 2400674)
Otra nota interesante es que: si declaro background-color: #FFFFFF; y a la vez para la otra declaro color: #FFFFFF; me arroja la advertencia, pero si a cualquiera de las 2 le cambio #FFFFFF por #FFF o por white, la advertencia desaparece.
Pues eso es bastante sorprendente. Y hasta erróneo, diría yo. Los analizadores automáticos tienen errores, como parece evidente.

Y bueno, como ya has encontrado la manera de resolverlo, imagino que dejarás tu hojita niqueladad y sin advertencias :arriba:

Mikel.

messer 12/05/2008 13:49
Re: W3C CSS Validator!!
 
Je Je! .. Y cuantas formas tendre que buscar para expresar el color blanco o un color X si lo necesito en mas de un contexto? Ademas se puede con ciertos colores, pero no creo que todas las tonalidades se puedan manejar con mas de 2 formas..

Saludos! :adios:

Mikmoro 12/05/2008 15:10
Re: W3C CSS Validator!!
 
Bueno, no tanto.

Este es tu código sin errores ni advertencias. Comprueba que no haya cambiado algo que afecte al diseño y no pudieras corregir.

Cita:
body{margin:0px; background:#336699 url(../images/bg_page.jpg) fixed; font: 12px Verdana, Arial, Helvetica, sans-serif;}
h1,h2,h3,p,form,ul{margin:0px; padding:0px; font-weight:normal;}
h1{font-size:24px; padding:4px;}
h2{font-size:20px; padding:4px; letter-spacing:-1px;}
h3{font-size:18px; padding:4px;}

#MainFrame{position:relative;margin:20px auto 20px auto; text-align:center; width:900px;}
#Container{text-align:left; width:100%;}
#Content{width:100%;background-color:#FFF;}

#Header{
position:relative;
width:100%;
height:90px;
background:#09C url(../images/header_bg.jpg);
}

#NavMenu{
position:relative;
width:900px;
padding-top:6px;
padding-bottom:6px;
background:#369 url(../images/bg_nav.jpg);
color:#FFF;
display:block; overflow:hidden;
}
#NavMenu ul{font: 12px Verdana, Arial, Helvetica, sans-serif;}
#NavMenu ul li{float:left; list-style:none; margin-right:1px;}
#NavMenu ul li .Suche{padding-left:120px; position:absolute; top:5px;}
#NavMenu ul li a{
display:block;
padding:4px 14px 4px 14px;
text-decoration:none;
font-weight:bold;
color:#FFF;
background-color:#369;
}
#NavMenu ul li a:hover{color:#9FF;}
#NavMenu ul li a.selected,#NavMenu ul li a.selected:hover{ background-color:#369;
color:#FFC;}

#WebContents{
position:relative; padding:4px 2px 2px 2px;
}

#Div1{position:relative; width:200px; float:left;}
#Div2{position:relative; background-color:#FFF; width:540px; float:left; left:6px;}
#Div3{position:relative; width:136px; float:right; right:2px;}

#Credits,#Footer{padding:10px 20px; font-size:10px;}
#Footer{background-color:#999; border-top:1px solid #000;}
#Footer label{display:block; text-align:right;}
#Credits{background-color:#666;}
#Buscador{margin-bottom:4px;}
#Buscador h3{background-color:#FFF;}

#Inmuebles, #Servicios{
background:#F2E3C9 url(../images/bg_lupa.gif) bottom right no-repeat; padding:6px 2px 3px 6px; position:relative; top:0px; left:0px; border:1px solid #960; border-top:0px;
}
.corte{clear:both;}
.seccion, .ex{margin-bottom:4px;}
.ex{background-color:#EFEFEF; padding:2px;}
.clasi{border-bottom:1px solid #666;}
.FormElem, .BsF, .codigo{
border-bottom:1px solid #DFE6EC;
border-right:1px solid #DFE6EC;
border-left:1px solid #666;
border-top:1px solid #666;
padding:2px;
font:11px Verdana, Arial, Helvetica, sans-serif;
}
.BsF{width:65px;}
.codigo{width:100px;}

.destacados, .resaltar{
padding:4px; display:block; margin-bottom:4px;
}
#Div2 ul{margin:0px; padding:0px;}
#Div2 ul li{float:left; width:135px; list-style:none; margin:0px; padding:0px; font-size:10px;}
.precio1, .precio2{color:#F00;}
.precio2{font:bold 16px Verdana, Arial, Helvetica, sans-serif;}

.destacados h3 a{color:#36C;}
.destacados h3 a:hover{color:#0CF;}
.resaltar{border-top:1px dashed #887437; border-bottom:1px dashed #887437; background:#FFC url(../images/bg_star.gif) bottom right no-repeat;}
.resaltar h3 a{color:#D00;}
.resaltar h3 a:hover{color:#F00;}

.txt10px{font-size:10px;}

#Buscador ul{margin:0; padding:0; padding-left:0px;}
#Buscador ul li{display:block; float:left; margin-left:0px; list-style:none;}
#Buscador ul li a{color:#FFF; padding:6px 6px 6px 0px; background: #666 url(../images/gray_rgt.gif) top right no-repeat; text-decoration:none; font-weight:bold; outline:0; display:block;}
#Buscador ul li a:hover{background:#C30 url(../images/red_rgt.gif) top right no-repeat;}
#Buscador ul li a span{padding:6px 6px 9px; background:url(../images/gray_lft.gif) top left no-repeat;}
#Buscador ul li a:hover span{background:#C30 url(../images/red_lft.gif) top left no-repeat;}
#Buscador ul li a.current,#Buscador ul li a:hover.current{color:#333; background:#9C0 url(../images/green_rgt.gif) top right no-repeat;}
#Buscador ul li a.current span,#nv_menu ul li a:hover.current span{background:#9C0 url(../images/green_lft.gif) top left no-repeat;}

#Buscador .txt11{font:12px Arial, Helvetica, sans-serif; color:#667;}
#Buscador label{font:bold 11px Verdana, Arial, Helvetica, sans-serif; display:block; padding:4px 0px 2px 0px; color:#887437; }
Mikel.

messer 12/05/2008 15:58
Re: W3C CSS Validator!!
 
Lo probare y luego comento, saludos!

daPhyre 12/05/2008 21:25
Re: W3C CSS Validator!!
 
Oye Mikel (O quien sea de paso) Exactamente cual es el error que se debe corregir, que ahorita me está ocurriendo algo similar, y no se muy bien por qué...

Mikmoro 13/05/2008 00:58
Re: W3C CSS Validator!!
 
Mira, si tienes esto así:

#caja1 {background-color: #fff;}
#caja2 {color: #fff;}

Te da una advertencia, porque si caja1 estuviera sobre caja2 o viceversa, el texto no se vería. ¿Cómo resolverlo?Pues imagina que caja0 tiene un color de fondo negro:

#caja0 {background-color: #000;}

y que caja2 está sobre caja0 y no sobre caja1. Para evitar la advertencia bastaría con añadir ese color de fondo a caja 2:

#caja2 {color: #fff; background-color: #000;}, lo cual no tendría generalmente ningún efecto visual y se evita el riesgo y la advertencia.

¿Me he explicado bien?

Mikel.

daPhyre 13/05/2008 08:27
Re: W3C CSS Validator!!
 
¡Excelente! Justo lo que pensaba, aunque curiosamente creí haber especificado todos los fondos... Quizá sean las letras... ¿O si lo pongo background-color: transparent; tambien me lanzaría esa advertencia?


La zona horaria es GMT -6. Ahora son las 21:18.
Página 1 de 2 1 2
Mostrar 50 mensajes desde este tema en una página

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2026, Jelsoft Enterprises Ltd.