Jump to content

Css Validation Error


blob84
 Share

Recommended Posts

Hi, when I validate css 3.0 I get these errors:

Errors (4)URI : file://localhost/menu_dropdown1.html213 	div#borderTop 	Value Error : padding-top px is not a padding-top value : px350 	input#closeSlide 	Parse Error opacity=80)363 	input#forwSlide 	Parse Error opacity=80)375 	input#backSlide 	Parse Error opacity=80)

This is the css:

html, body {		margin: 0;		padding: 0;		background-color: #E2725B;		font-size: 85%;				font-family: Verdana, Arial, Helvetica, sans-serif;	}	img.fruits {		float:left;	}			div#ombra {					/* creazione di un'ombra per il menu sovrapponendo un elemento div(#menu) ad un altro div(#ombra) contenitore */		background-color: #000000;		float: right;		margin-right: 3%;		margin-top: -142%;			padding-right: 5px;		padding-bottom: 6px;		}	div#menu {		text-align: right;		margin-top: -5px;		margin-left: -5px;		border-left: 2px solid #FFFF00;		border-right: 2px solid #FFFF00;					}	div#menu a {		color: #000;		text-decoration: none;	}	div#menu ul {		list-style: none;		margin: 0;		padding: 0;		width:200px;	}	div#menu ul li {		height:100%;		background: #AF593E;		border-bottom: 2px solid #FFFF00;		position: relative;		float: right;		width: 100%;	}		div#menu ul li ul li{		background: #C3B091; 		white-space: nowrap;			width: 590px;			text-align: left;			height: 180px;					}	div#menu ul li ul {		/* sottomenu impostato per essere visualizzato sotto il div(#worldMap) */		z-index: -1;	}	#top_border {				  /* bordo superiore del primo elemento della lista */		border-top: 2px solid #FFFF00;	}	div#menu ul li a{		display: block;			padding: 30px 20px;		text-align: left;			font-weight: 700;				}	div#menu ul li a:hover {		color: #FAFBFB;		background: #C9C9C9;		/*font-size: 1.5em;*/			font-weight: 900;		}		div#menu ul li ul li a:hover{		background: #ffedd3;		border-left:1px solid black;	}		div#menu ul ul {		position: absolute;		top: 0;		display: none;		}	div#menu ul li:hover ul{		display: block;				right: 200px;	}/* creazione delle ombre per il sottomenu(sotto liste) che contengono le foto dei frutti (fruitN) */		li div#fruit0 {					position: absolute;				left: 5px;			top: 175px;		width: 590px;				background: #000000;			color: #000000;			z-index: -1;		}	li div#fruit1 {					position: absolute;				right: -5px;			top: 175px;		width: 590px;				background: #000000;			color: #000000;			z-index: -1;		}			li div#fruit2 {					position: absolute;				right: -8px;			top: 140px;		width: 594px;				height: 50px;				background: #000000;			color: #000000;			z-index: -1;		}			li div#fruit3 {					position: absolute;				right: -8px;			top: 70px;		width: 592px;				height: 120px;				background: #000000;			color: #000000;			z-index: -1;		}		div.sep {						margin-left: 90px;				margin-top: 10px;		padding-left: 10px;				border-left: 1px solid #FFFF00;	}		div.sep p {					/* paragrafi della descrizione dei frutti nel menu */		width: 200px;		height: 100px;		background-color: #A1A100;		border: 1px solid #FFFF00; 			font-style: italic;		font-weight: 800;		font-size: 80%;				color: #001040;				white-space: normal;		overflow: auto;	}				img#borderTop {		position: absolute;		left: 65%;		top: 6%;	}			img#borderBottom {		position: absolute;				left: 65%;		top: 69%;	}				span {		display: block;			margin-left: 58%;		margin-top: -25%	}			img.world {		border: 1px solid #FFFF00;		}		div#borderTop {						/* immagine sopra il menu impostata come sfondo di un div */		background-image: url("border_top0.png");		background-repeat: no-repeat;		float: right;				width: 220px;		height: 110px;			margin-right: 5%;		margin-top: 2%;			padding-right: 5px;		padding-bottom: 5px;		}			div#borderBottom {					/* immagine sotto il menu impostata come sfondo di un div */		background-image: url("border_bottom1.png");		background-repeat: no-repeat;		float: right;		width: 220px;		height: 110px;		margin-top: 192%;				}	h3 {		background-color: #A1A100;		color: #001040;		border: 1px solid #FFFF00;		width: 80px;		}	div.textClick {		text-align: center;		background-color: #3F621F;		margin-top: 5px;			font-weight: 700;		color: #800000;		}			div#worldMap {					display: none;		position: absolute;		top: 20%;		left: 45%;		z-index: 1;	}		input#close {				position: absolute;		top: 79%;			left: 79%;			background-color: #5F5F5F;		font-weight: 600;		color: #FFFFC2;		}				img#bigMap {		border: 0;	}		img#mapEcuador {		display: none;				border: 0;		position: absolute;			top: 1%;			right: 14%;		}			area:hover {		cursor: pointer;	}				div.importProduct {		display: none;		background-color: #806210;				color: #FFC0B6;				width: 300px;		height: 250px;		border: 1px solid #D2B06A;		position: absolute;		left: -5%;			top: -5%;			overflow: auto;			z-index: 3;		}		img.imageProduct {		display: block;		border: 1px solid #FFFF00;		float: left;	}	input.close0 {		display: block;		background-color: #5F5F5F;		color: #FFFFC2;				font-weight: 500;				position: absolute;			top: 91%;		left: 78%;		}	input.close0:hover {		cursor: pointer;		background-color: #E01F25;		}	div.shadow {		display: none;		background-color: #000000;				width: 300px;		height: 250px;		position: absolute;		left: 55%;		top: 45%;			z-index: 3;		}		div#containerSlideOmbra {		position: absolute;				top: 20%;			left: 35%;		width: 550px;		height: 300px;		background-color: #000000;		z-index: 4;		}	div#containerSlide {		position: absolute;				top: -3%;			left: -2%;		z-index: 2;	}	input#closeSlide {		position: absolute;		bottom: 1%;				left: 2px;		background-color: #5F5F5F;		font-weight: 600;		color: #412000;					border: 0;				opacity: 0.8;		filter:alpha(opacity=80)		}	input#forwSlide {		position: absolute;		bottom: 1%;				left: 50%;		background-color: #5F5F5F;		font-weight: 600;		color: #412000;					border: 0;				opacity: 0.8;		filter:alpha(opacity=80)		}	input#backSlide {		position: absolute;		bottom: 1%;				left: 35%;		background-color: #5F5F5F;		font-weight: 600;		color: #412000;					border: 0;				opacity: 0.8;		filter:alpha(opacity=80)		}			img#mapIndia {		display: none;				border: 0;		position: absolute;			top: -17%;			right: -26%;			z-index: 3;		}		p.w3c {		position: absolute;		top: -1%;	}		p.w3c img {		border: 0;		top: 0;	}}

Edited by blob84
Link to comment
Share on other sites

I don't think CSS3 is supported yet, I believe the validator validate to CSS2.1, hence opacity will not pass. (its only supported by CSS3).as far as the px error, it might be because you are using %'s. Make sure the parent element has a fixed width.

Link to comment
Share on other sites

IE9?I'm not sure what you mean by "removing this and allows opacity" as it pertains to older IE browsers. Just because its not valid in a CSS document, doesn't mean a browser doesn't have the ability to render it. As far as I know, IE6 doesn't have the ability as a browser to render transparency, but can be hacked to. Meanwhile, IE7/8 can, even though opacity is not a CSS standard.

Link to comment
Share on other sites

The opacity property is part of the CSS3 spec. By "I haven't done any research weather IE9 has remove this and allows Opacity" he probably means whether the next version of IE will just ditch the filter: property altogether in favor of standards. IE6 and 7 can only render transparency through the use of filters.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...