CSS - Css Not Validating
Here is the CSS code. It's based off the sliding doors techniques which you can see here.
Code: .orangebox { margin:0 auto 8px auto; color:#fff; } .orangebox .hd .c{ font-size:1px; height:13px; } .orangebox .ft .c{ font-size:1px; /* ensure minimum height */ height:16px; } .orangebox .hd { background:url(images/tl.gif) no-repeat 0px 0px; } .orangebox .hd .c { background:url(images/tr.gif) no-repeat right 0px; } .orangebox .bd { background:url(images/ml.gif) repeat-y 0px 0px; } .orangebox .bd .c { background:url(images/mr.gif) repeat-y right 0px; } .orangebox .bd .c .s { background:#f9ab2d url(images/ms.jpg) repeat-x 0px 0px; } .orangebox .ft { background:transparent url(images/bl.gif) no-repeat 0px 0px; } .orangebox .ft .c { background:transparent url(images/br.gif) no-repeat right 0px; } Here is the css validation error from W3C: Code: Line: 402 Context : .orangebox .hd .c Invalid number : background Too many values or values are not recognized : url(images/tr.gif) no-repeat right 0 Any idea what is causing this? Similar Tutorialshere is my css stylesheet. I try to validate and I get warnings. some things i was able to fix, others I am unsure of. Code: .ul {list-style-image: url("images/bullet_blue.gif"); vertical-align:middle;} body { background-color: #999999; background:url(images/bkg_black.gif); font-size:15px; color:#FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; } h4 { color: #0099FF; font-family:Verdana, Arial, Helvetica, sans-serif; } h2 { color: #FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; } th{ background-image:url("images/tbhead.gif"); } a:link {color: #FFFFFF; text-decoration: none; font-family:Verdana, Arial, Helvetica, sans-serif;} a:active {color: #FFFFFF; text-decoration: none; font-family:Verdana, Arial, Helvetica, sans-serif;} a:visited {color: #FFFFFF; text-decoration: none;font-family:Verdana, Arial, Helvetica, sans-serif;} a:hover {color: #0099FF; text-decoration: underline;font-family:Verdana, Arial, Helvetica, sans-serif;} a:link.email {color:#000000; } a:active.email {color:#000000; } a.visited.email {color:#000000; } #container { width: 87%; margin: 20px auto; background-color: #000000; color: #FFFFFF; border: 1px solid #333333; line-height: 130%; } #top { padding: .5em; background-color: #000000; border-bottom: 1px solid gray; } #nav { padding: .5em; background-color: #000000; border-bottom: 1px solid gray; } #content { padding: 2em; max-width: 36em; } #footer { clear: both; margin: 0; padding: .5em; color: #333333; background-color: #999999; border-top: 1px solid gray; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; } #index{ float:left; width:65%; border-right:2px solid #000; border-bottom:2px solid #000; margin-right:15px; padding-bottom:20px; } #indexright{ width:35%; float:right; top: 5px; } ul#navlist { padding: 3px; margin: 8px; list-style-type: none; color: #ffffff; background-color: #000000; } ul#navlist li { display: inline; } ul#navlist li a { width: 10%; color: #ffffff; background-color: #000000; padding: 0.2em 1em; text-decoration: none; border: 1px solid #ffffff; } ul#navlist li a:hover { background-color: #369999; color: #ffffff; } .lyrics { font-size:10px; } .table { font-size:12px;} Hi, I am trying to validate my CSS using the Jigsaw CSS Validator. http://jigsaw.w3.org/css-validator/validator I keep receiving the following error. Quote: Line: 1895 Context : #save attempt to find a semi-colon before the property name. add it Line: 1895 Context : #save Property progid doesn't exist : DXImageTransform Line: 1895 Context : #save Parse Error - DXImageTransform.Microsoft.AlphaImageLoader(src='../../../../includes/images/iconSave.png', sizingMethod='none'); Line: 1896 Context : #save Parse error - Unrecognized : } With regards to the following piece of text: Code: #save { height:40px; width:40px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../../../includes/images/iconSave.png', sizingMethod='none'); } #save[id] { height:40px; width:40px; background-image:url(../../../../includes/images/iconSave.png); } Is it because i'm trying to use an MS Filter in my CSS, if so where else can I place this - in the code? Doesn't that defeat the object of CSS though? Any help much appreciated. Thanks, Jay. I'm working on a site: www.wirelessguy.net I've been told that it looks fine in IE, but not mozilla. Is there something that I need to do with my CSS to get it to work with mozilla? Here is my css code so far: Code: /*Main Section*/ html, body { padding: 0; font-family: Arial; } .bodyMain { font-family: Arial; margin-left: 12%; margin-right: 12%; background: silver; } /*Site Template Section*/ .verticalText { writing-mode: tb-rl; filter: flipv fliph shadow; width: 10px; position: absolute; color: #FF9933; padding:10px; } .leftBoxText { top:20%; font:18px; left: 10%; letter-spacing:16px; } .leftBoxTextUnder { top:30%; font:14px; left:45%; letter-spacing:12px; } div#leftBox { position:absolute; top:0; left:0; height:100%; width:12%; border-right:3px solid black; background-color:#333399; } div#rightBox { position:absolute; top:0; right:0; height:100%; width:12%; border-left:3px solid black; background-color:#333399; } div#content { position: absolute; top: 17%; bottom: 11%; height: 76%; width:100%; border: 1.5px solid #333399; } #titleBar { background-color: #333399; text-align: center; width: 100%; position: absolute; top: 0; height: 11%; border-top: 1px solid Black; border-left: 1px solid Black; border-right: 1px solid Black; } #titleBar table { text-align:center; color: #FF9933; width:100% } #titleBar th { font: bold 30px; letter-spacing: 10px; } #titleBar td { font: normal 11px; letter-spacing: 6px; font-style: italic; padding: 7px; } #titleBar img { width:50px; height:50px; } #bottomBar { background-color: #333399; text-align: center; height: 3%; padding: 5px; border: 1px solid black; color: #FF9933; position: absolute; bottom: 0; width: 100%; vertical-align: middle; } #bottomBar table { height=100%; } #bottomBar td { font-size: 12px; padding-left: 30px; } #bottomBar a:link { display: inline; text-decoration: none; color:#FF9933; line-height: normal; } #bottomBar a:visited { text-decoration: none; color: #FF9933; } #bottomBar a:hover { color:white; border-top: 1px solid #FF9933; border-bottom:1px solid #FF9933; } #navBar { background-color: #FF9933; border: 1px solid Black; color: #333399; text-align: center; height: 4%; position: absolute; top:11%; width: 100%; font-weight: normal; } #navBar table { height=100%; } #navBar td { font-size: 12px; padding-left: 30px; } #navBar a:link { display: inline; text-decoration: none; color:#333399; line-height: normal; } #navBar a:visited { text-decoration: none; color: #333399; } #navBar a:hover { color:white; border-top: 1px solid #333399; border-bottom:1px solid #333399; } /*iFrame Pages Section*/ body#content { background:white; } edit:figured out |