CSS - Parse Errors When Validating Css
edit:figured out
Similar TutorialsHere 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? here 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; } Hi, Can someone plz tell me how to fix these 3 errors? URI : http:// www. freeadverts . co . nz/0185cbcadbc86a9b9ffba4c9c7347964.css Error 1: 45 .subframe Parse Error opacity=95) Also what does 45 stand for? URI : http:// www. freeadverts . co . nz Error 2: 37 Value Error : width only 0 can be a length. You must put a unit after your number : 120 120 Also what does: a. 37 mean &; b. 120 120 mean? Error 3: 37 Value Error : height only 0 can be a length. You must put a unit after your number : 60 60 Also what does: a. 37 mean &; b. 60 60 mean? Thanx in advance. I have created my first css and all has worked well, but when I try to validate it I get the message: Parse error - Unrecognized : <style type="text/css"> body { margin:10px 10px 0px 10px; padding:0px; } Can someone please explain what I'm doing wrong and how do I fix it? Desperately a student, When trying to validate my CSS with W3C, I keep getting parse error on this code :- ul#menu li a.home:hover, ul#menu li a.home:active, ul#menu li a.port:hover, ul#menu li a.port:active, ul#menu li a.multi:hover, ul#menu li a.multi:active, ul#menu li a.web:hover, ul#menu li a.web:active, ul#menu li a.about:hover, ul#menu li a.about:active, { background-position: center center; } The code is part for a horizontal 3 state navigation menu using images. Im trying to do some CSS frame emulation for a curve on my site so that it follows the screen, but (and this is a surprise, i feel) it only works in IE!! Not in firefox. Im not sure why. Here is the CSS file that holds the frame emulation: Code: @media screen { body { margin: 0; padding: 1em 1em 1em 14em; color: #000; background: #fff; } div.fixedBox { position: fixed; top: 1em; left: 1em; width: 12em; border: 1px solid #000; background: #eee; } div.fixedBox p { margin: 1em; } /* Don't do this at home */ * html { overflow-y: hidden; } * html body { overflow-y: auto; height: 100%; padding: 0 1em 0 14em; font-size: 100%; } * html div.fixedBox { position: absolute; } /* All done. */ } Is there an error here? I got this off here. Not sure what is going wrong, like i said it work in IE, but not firefox, whereas the example on the above site works in both. Any ideas? Hi all, I've just put together a "template" webpage that is controlled entirely by CSS...I'm very happy with it and it works like a dream in IE6+, but when I test on Mozilla and Opera I end up with my hyperlink text not obeying the CSS rules and find all my positioned graphics don't line up correctly either. Both Mozilla and Opera are the latest versions, I haven't tested on Netscape Nav yet but I'm concerned with the problems I'm having getting my page to display consistently... Any suggestions as to how to tackle this problem? I don't want to recreate different CSS for different browsers...but if I have to, is there a resource on the web available so you can see which CSS tags/properties render correctly with different browsers? In addition, if I use Javascript to specify certain CSS styles based on the browser type...how do I "load" those differing SS using javascript? I can do browser detection, but I'm not sure on getting different SS "loaded" based on the selection. Wow...bit of a mouthful there... Hi, How do I fix this? My Stylesheet validates except for this one issue. It bugs me Here's the HTML page: Code: <div id="nav"> <img class="navrightendbutton" src="images/buttonleftend.jpg" alt="Graphic Helper" /> <a href="index.html"><img class="navbox" src="images/homelight.jpg" alt="Takes You to Home Page" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a> <a href="guardian_angel_figurines_store.html"><img class="navbox" src="images/storelight.jpg" alt="Guardian Angel Store" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a> <a href="about_figurines.html"><img class="navbox" src="images/aboutfigurineslight.jpg" alt="For More Information About Figurines" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a> <a href="about_angels.html"><img class="navbox" src="images/aboutangelslight.jpg" alt="For Angelic Understandings, Mysteries and More" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a> <a href="privacy_policy_statement.html"><img class="navbox" src="images/contactuslight.jpg" alt="To Contact Us with Your Questions, Sugestions, Ect" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a> <img class="navbox" src="images/buttonrightend.jpg" alt="Graphic Helper" /> </div> Here's the CSS code: Code: #bodycontainerbox { float:left; background: #993399; width: 900px; padding-bottom: 7px; } .navbox { float:left; width: 126px; } .navrightendbutton { float: left; width: 125px; } W3C gives me this error fives times: Parse Error opacity=0) Thank you Am putting the finishing touches to my site but in firefox 8 the top of the side menu there is a space and login part is to low as well. My site is www.carswapped.co.uk I need someone to look at my site and see why it doesnt work right in internet explorer, and looks fine in mozilla and google chrome. I am sure it has something to do with a .css file somewhere. glockpartsrus.com/products.php?cat=46 for an example. Hi, I'm getting two errors when I view my new theme but only in IE6. The first error is on long posts (Not pages) where the header and footer sections are slightly offset to the rest of the body. If I make the post shorter then the problem disappears. An example can be seen he Example The page look fine in FF 1.5.01 and Opera 8.51. The second issue is to do with the menu images on the top of every page. When I hover over the image (To select the page) the image turns black for a few moments and then returns almost immediately, whilst it doesn't effect the usability it doesn't look very good. I'm guessing it has something to do with the CSS and background images but am unclear what I should do. Any help or suggestions you can offer would be appreciated. TIA Phillip http://www.gr2b.com All my browsers load the full website perfect. However, when I try to load the website in IE 4.0 - 6+, I get an error with the navigation where it double lines the navigation rather than a single line AND it adds additional padding. Is there anyone with some experience that can aid me? UPDATE: Another major problem I am noticing with Internet Explorer below 7, is that when you pass your mouse over the "Product Title" the entire page flashes white. Please offer assistance! Hi, I am hoping that someone can help me out. My css validates but my professor still wants me to find what I am missing. I know that the colored scrollbars and pngfix won't validate but my prof said it's ok to leave that without being valid. He said what he doesn't like is elsewhere. Can anyone tell me what he may be talking about since he won't help me figure it out? I have spent hours trying to figure this out and my book is no help. I'd really appreciate it. html,body{margin: 0; padding:0;} body{font: 76% Verdana, Arial, Helvetica, sans-serif; background: Black; background-image: url(../images/back.png); background-repeat: repeat-x;} html {scrollbar-face-color: #22222F; scrollbar-shadow-color: #CC2204; scrollbar-highlight-color: #CC2204; scrollbar-3dlight-color: #CC2204; scrollbar-darkshadow-color: #22222F; scrollbar-track-color: #CC2204; scrollbar-arrow-color: #CC2204;} p{margin:0 10px 10px} a{display:block;color: Yellow;padding:10px} div#content p{line-height:1.4} #logo { display:block; width: 100%; text-align: right; height: 130px; position: relative; top: 21px; } div#left{float:left;width:260px; background: transparent url(../images/menuback.png) no-repeat; behavior: url(iepngfix.htc)} div#extra{float:left;} .menu{ float:left; text-align: center; margin: 40px 0px 0px 0px; padding-left: 28px; } .menu ul{ list-style-type: none; margin: 0; padding: 0; border-bottom: 2px ridge #8c8100; } .menu li a{ font: bolder 16px Verdana, Arial, Helvetica, sans-serif; display: block; background: transparent url(../images/menb.png) no-repeat 0 100%; width:188px; height: 41px; padding: 2px 0 4px 0px; line-height: 41px; text-decoration: none; } .menu li a:link, .menu li a:visited { color: #CCBB04; } .menu li a:hover{ color: #286736; background-position: -190px 100%; } .menu li a.selected{ color: #E7E800; background-position: 0px 100%; } div#footer p{margin:0;padding: 5px 10px 0px 100px; font-weight: bold; } div#header{height:307px;margin: 0px 0px 0px 0px; background: transparent url(../images/henk.png) no-repeat; text-align: right;} div#wrapper{float:right;width:100%;margin-left:-260px} div#content{margin-left:260px; background: url(../images/sk.png) no-repeat center; background-position: top; behavior: url(iepngfix.htc)} div#extra{float:left;clear:left;padding-left: 34px; } div#footer{clear:both;width:100%; background: transparent; text-align: center;} http://www.mydragonflygifts.com/index.php Need some major help here. Clicking the link above, you will see the problems. The whole page needs some help. Looks 100% different in FF than IE. What can I do to fix? I would pay if someone was able to fix the site 100% and possibly could use some helps on future jobs if interested. Hi all, Has anyone received a Line: 0 Parse error - Unrecognized : } with the rest of the CSS document validated under W3C validator? I can't work out why it's not happy. The beginning of my CSS is: /* This is the only CSS for the Waste RE3 website */ a:link { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; color: #008000; text-decoration: none} a:visited { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; color: #008000; text-decoration: none} a:hover { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; color: #FF9933; text-decoration: underline} Hi, I'm just diving in to CSS layout and gradually working through CSS IE bugs. I'm having so much trouble sorting this one out though! I've got a fairly standard menu using UL and LI in a left hand container. Everything displays nicely in Firefox 1.5 and looks ok - initially in IE6 until you hover over the menus. In Firefox they change background colour and font colour as I want, however in ie6 when you hover the background doesn't change colour and the menu all squishes up together! Where am I going wrong?? Here's the CSS for the elements: Code: #leftcol{ float:left; padding: 0; width: 170px; background-color: #FFFFFF; } #SectionNav { background-image:url(../assets/images/sectionNavBack.png); background-repeat: no-repeat; background-color: transparent; width:150px; height: 323px; left: 0px; top: 0px; padding-left: 0px; display: block; } #SectionNav ul{ margin-top: 0px; padding-top: 25px; background-color: transparent; list-style-type: none; font-size: 80%; list-style-image: url(../assets/images/ballBullet.png); display: block; } #SectionNav ul li a{ color: #FFFFFF; display: block; margin-top: -5px; padding-botton: 10px; margin-bottom: 10px; text-decoration: none; height: 21px; background-image: url(../assets/images/SectionBtnBack.png); font-weight: 200; font-family: Verdana, Arial, Helvetica, sans-serif; } #SectionNav ul li a:hover, #SectionNav ul li a:focus { background-color: #0000FF; color: #FFCC00; } Here's the HTML: Code: <div id="leftcol"> <div id="SectionNav"> <ul> <li><a href="index.php">Home</a></li > <li><a href="#">News</a></li > <li><a href="#">Handicaps</a></li > <li><a href="#">Leaderboard</a></li > <li><a href="#">Competions</a></li > <li><a href="#">Media</a></li > <li><a href="#">Courses</a></li > <li><a href="#">Links</a></li > </ul> </div> <!--End of SectionNav--> </div> I've played around with the various margins etc but no joy. The page can be found at: http://beta.sussexeast-gs.org.uk/index.php Excuse the colours they're there to help me with layout for now. Thanks |