Validacion CSS

sergi_climent · #1 (**permalink**) 15/06/2009, 09:40

Hola, estoy validando mi CSS y me salta el siguiente error y warnings

Cita:

177 #information La propiedad opacity no existe en CSS versión 2.1 pero existe en [css3] : 0.7
177 #information Error de análisis sintáctico opacity=70)
185 #imglink La propiedad opacity no existe en CSS versión 2.1 pero existe en [css3] : 0.4
185 #imglink Error de análisis sintáctico opacity=40)

Cita:

7 Color de primer plano y color de fondo iguales en dos contextos #slideright:hover y body
7 Color de primer plano y color de fondo iguales en dos contextos #slideleft:hover y body
47 Color de primer plano y color de fondo iguales en dos contextos #slideleft:hover y #menu a:active
47 Color de primer plano y color de fondo iguales en dos contextos #slideright:hover y #menu a:visited
47 Color de primer plano y color de fondo iguales en dos contextos #slideleft:hover y #menu a:visited
47 Color de primer plano y color de fondo iguales en dos contextos #slideright:hover y #menu a:active
47 Color de primer plano y color de fondo iguales en dos contextos #slideright:hover y #menu a:link
47 Color de primer plano y color de fondo iguales en dos contextos #slideleft:hover y #menu a:link
47 Color de primer plano y color de fondo iguales en dos contextos #slideright:hover y #menu a:hover
47 Color de primer plano y color de fondo iguales en dos contextos #slideleft:hover y #menu a:hover
62 Color de primer plano y color de fondo iguales en dos contextos #slideright:hover y #menu-inf a:hover
62 Color de primer plano y color de fondo iguales en dos contextos #slideleft:hover y #menu-inf a:active
62 Color de primer plano y color de fondo iguales en dos contextos #slideleft:hover y #menu-inf a:link
62 Color de primer plano y color de fondo iguales en dos contextos #slideright:hover y #menu-inf a:active
62 Color de primer plano y color de fondo iguales en dos contextos #slideleft:hover y #menu-inf a:visited
62 Color de primer plano y color de fondo iguales en dos contextos #slideleft:hover y #menu-inf a:hover
62 Color de primer plano y color de fondo iguales en dos contextos #slideright:hover y #menu-inf a:visited
62 Color de primer plano y color de fondo iguales en dos contextos #slideright:hover y #menu-inf a:link

el css es el siguiente:

Código css:

Ver originalbody {
    background-image:url(../img/fondo.gif);
    margin:0;
    padding:0;
    font-family:Verdana, Geneva, sans-serif;
    font-size:9pt;
    color:#333333;
}
 
#contenido {
    margin:0 auto 0 auto;
    width:773px;
    background-image:url(../img/fondo2.gif);
    background-repeat:repeat-y;
}
 
#cabecera {
    margin:0px 10px 0px 10px;
    height:110px;
}
 
#cabecera img {
    border:0;
    float:left;
    margin-left:250px;
    margin-top:4px;
}
 
 
#menu {
    width:736px;
    height:31px;
    background-image:url(../img/fons-menu.jpg);
    background-repeat:no-repeat;
    margin-left:19px;
    padding-left:20px;
}
 
#menu img {
    margin:0 20px 0 20px;
    vertical-align:middle;
}
 
#menu a:link, #menu a:visited, #menu a:hover, #menu a:active {
    text-decoration:none;
    font-size:11pt;
    color:#333333;
}
 
#menu-inf {
    border-top:1px solid #333333;
    width:736px;
    margin-left:19px;
    text-align:center;
    padding:8px 0 8px 0;
    margin-top:0;
}
 
#menu-inf a:link, #menu-inf a:visited, #menu-inf a:hover, #menu-inf a:active {
    text-decoration:none;
    font-size:11pt;
    color:#333333;
} 
 
#cos {
    margin:10px 40px 40px 40px;
    min-height:400px;
} 
 
#cos #titol {
    font-family:Verdana, Geneva, sans-serif;
    color:#5A1011;;
    font-size:16pt;
    border-bottom:3px double #5A1011;
    margin-bottom:20px;
}
 
#cos #titol .primera-lletra {
    font-size:25pt;
}
 
#cos p {
    text-align:justify;
}
 
#tit-index {
    font-size:11pt;
    font-weight:bold;
    margin-top:20px;
}
 
p.principal {
    text-align:justify;
    width:600px;
    margin-left:20px;
}
 
img.principal {
    padding:1px 1px 1px 1px;
    border:1px solid #cccccc;
    margin-right:20px;
}
 
#promocions{
    margin-top:25px;
    border:1px solid #cccccc;
 
}
 
#imatges-portada{
    margin-top:50px;
    width:800px;
    border:0px solid #cccccc;
 
}
#cont-tendes {
    width:672px;
    margin:auto;
    overflow:auto;
}
 
.tenda{
    padding:0;
    width:210px;
    float:left;
    background:transparent;
    height:auto;
    margin-right:10px;
    margin-bottom:10px;
}
 
 
img.principal {
    padding:1px 1px 1px 1px;
    border:1px solid #cccccc;
    margin-right:5px;
}
 
 
#bottom {
    background-image:url(../img/bottom.gif);
    background-repeat:no-repeat;
    width:774px;
    height:9px;
    margin:0 auto 0 auto;
    padding:0;
}
 
#validator {
    margin-left:900px;
}
 
#contacte{
    width:250px;
    margin-left:30px;
    overflow:auto;
}
 
 
/**************************************************************************************************************/
 
a span {visibility:hidden;color:white;text-align:center;font:bold 14px "Trebuchet MS",arial;position:absolute;top:105px;left:325px;visibility:hidden;border:5px solid #fff;z-index:10;}
a:hover img.min {z-index:100;border:1px solid red;}
a:hover {display:inline;z-index:100;} /* Hace que funcione en IE6*/
a:hover span {visibility:visible;border:5px solid #fff;background:#000000;z-index:100;}
a:hover span img {visibility:visible;z-index:100;}      
a:focus span , a:active span  {visibility:visible;z-index:10;background:#000000;}
a img.fotos {border:1px solid white;margin:5px;}
 
 
/**************************************************************************************************************/
#slideshow {list-style:none; color:#fff}
#slideshow span {display:none}
#wrapper {width:506px; margin:50px auto; display:none}
#wrapper * {margin:0; padding:0}
#fullsize {position:relative; width:500px; height:300px; padding:2px; border:1px solid #ccc; background:#000}
#information {position:absolute; bottom:0; width:500px; height:0; background:#000; color:#fff; overflow:hidden; z-index:200; opacity:.7; filter: alpha(opacity=70)}
#information h3 {padding:4px 8px 3px; font-size:14px}
#information p {padding:0 8px 8px}
#image {width:500px}
#image img {position:absolute; z-index:25; width:auto}
.imgnav {position:absolute; width:25&#37;; height:306px; cursor:pointer; z-index:150}
#imgprev {left:0; background:url(../img/left.gif) left center no-repeat}
#imgnext {right:0; background:url(../img/right.gif) right center no-repeat}
#imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter: alpha(opacity=40);}
.linkhover {background:url(../img/link.gif) center center no-repeat}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:url(../img/scroll-left.gif) center center no-repeat; background-color:#222}
#slideleft:hover {background-color:#333}
#slideright {float:right; width:20px; height:81px; background:#222 url(../img/scroll-right.gif) center center no-repeat}
#slideright:hover {background-color:#333}
#slidearea {float:left; position:relative; width:456px; margin-left:5px; height:81px; overflow:hidden}
#slider {position:absolute; left:0; height:81px}
#slider img {cursor:pointer; border:1px solid #666; padding:2px}
 
/**************************************************************************************************************/

Como puedo superar la prueba sin que se vea afectado mi diseño?

Saludos y gracias de antemano

kseso? · #2 (**permalink**) 15/06/2009, 11:05

Hola Sergi.
El primer error (relativo a opacity) está muy claro.
Esa propiedad no existe en CSS 2.1 Es una propiedad de las propuestas para CSS 3, que de momento es eso, una propuesta.
2 posibles soluciones:
--> o la retiras de tu hoja de estilo o
--> Validas bajo css 3 y no con css 2.1
Pero si vas a validar también la accesibilidad, entonces no tendrás otra que sacar opacity de tu css.

Sobre el segundo bloque, creo que me explicaré mejor ( lo entenderás también mejor) con un ejemplo:
Tengamos un contenedor con fondo negro (#000) y dentro de él otra caja con el fondo formado por una imagen de tonos muy claros y el color de texto negro (o muy oscuro, #444)
En ese caso te marcará el error del segundo bloque.

Pero si en este mismo ejemplo, al div interior (el que tiene de fondo la imagen) le añades a sus propiedades del fondo un color (background: #fff url(tu_ruta.jpg)...;} el error desaparece.

Por qué. Porque entre el color del texto oscuro y el fondo del primer contenedor (de fondo negro) hay un elemento que el validador sí puede valorar (un fondo blanco) como apropiado para que el texto resalte.

¿Me expliqué?

Un saludo

sergi_climent · #3 (**permalink**) 16/06/2009, 00:42

Hola, si te explicaste aunque me surgen una duda.

en mi caso tengo lo siguiente:

Código css:

Ver original#menu {
    width:736px;
    height:31px;
    background-image:url(../img/fons-menu.jpg);
    background-repeat:no-repeat;
    margin-left:19px;
    padding-left:20px;
    background-color:#FFF;
}
 
#menu img {
    margin:0 20px 0 20px;
    vertical-align:middle;
}
 
#menu a:link, #menu a:visited, #menu a:hover, #menu a:active {
    text-decoration:none;
    font-size:11pt;
    color:#333;
}

que es el css de mi menu. un menu siemple con una imagen que hace el efecto de degradado, enteonces si no pongo el background debajo de color me da error, pero sino quiero background-color? como lo hago? ya q si le pongo un background me jode lel efecto.

da error en la linia: color:#333

gracias por la respuesta, y gracias de antemano por la siguiente! :D

saludos

hades87 · #4 (**permalink**) 16/06/2009, 00:46

a #menú prueba de ponerle también la propiedad color, que sirve apra especificar el color del texto,a demás de optimizar todas las propiedades bg.

background:url(../img/fons-menu.jpg) no-repeat #FFF;

sergi_climent · #5 (**permalink**) 16/06/2009, 00:56

mmmm, aunque le ponga el backgrounf en menu, me da el error en

Código css:

Ver original#menu a:link, #menu a:visited, #menu a:hover, #menu a:active {
    text-decoration:none;
    font-size:11pt;
    color:#333; // Aqui le tendria q poner el background... pero me jode la imgen de fondo
}

no ser como solucionarlo... y sino se puede lo dejo con el warning porque la pagina ya esta validada!

PD: aunque me gustaria dejar el tema zanjado

sergi_climent · #6 (**permalink**) 16/06/2009, 05:09

mmmm, alguien me saca de la duda? de como dejarlo sin q afecte a mi imagen de fondo?

hades87 · #7 (**permalink**) 16/06/2009, 05:11

y si donde esta la iamgen de fondo también le pones las propiedades de bg?

PD: Edita y no postees dos veces seguidas.

kseso? · #8 (**permalink**) 16/06/2009, 05:37

Pon un enlace a la página, seguro que habrá una forma de quitar ese aviso si tan importante es, aunque sea colocando un div oculto (display:none) que contenga un fondo sólido. Nunca lo utilicé y no se si el validador se lo tragará con papas o no.