|
CSS - Validation Error: Parse Error / Textarea - Need Help
I am getting a CSS validation error
It is: 251 * Parse Error / textarea { border: 1px solid silver; width: 80%; } If I comment the CSS in question out, it gives me another CSS error a little bit farther down in the stylesheet... not sure why it is doing that or how to just fix this validation error, as the ones that come up after it are similar. My end goal is to make the page look normal in FF2. Currently in FF2 some of the text in the purple "Sesame Street" box is blocked out. I didn't create this page, but have been asked to figure out why it looks like this in FF2. I am no CSS expert, but would love to hear from one! Thanks for your help. Similar TutorialsI 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. 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 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} Thanks for taking the time to read my question. I tried validating my CSS page at http://jigsaw.w3.org/css-validator/ I got the following errors. No idea what they are talking about here. Quote: * Line : 2 (Level : 1) You have no color with your background-color : body * Line : 8 (Level : 1) You have no color with your background-color : #MainBox * Line : 19 (Level : 1) You have no color with your background-color : #FaderBar * Line : 74 (Level : 1) You have no background-color with your color : #BioFooter * Line : 86 (Level : 1) You have no color with your background-color : ul li * Line : 124 (Level : 1) You have no background-color with your color : ul li a:link * Line : 129 (Level : 1) You have no background-color with your color : ul li a:visited Here is line 8: Code: background-color: #ffffff; As far as I can tell #ffffff is white, and that's a color. Any ideas? Thanks, Brad Hi, i'm starting the testing pahse of a website and can't seem to go through the validation due to a fatal error that kills it. I get the following error: The error was: utf8 "\x96" does not map to Unicode. Supposedly it is located on line 205 of my code, but I have not been able to identify it. Any help would be greatly appreciated. I can't post links according to the forum rules because its a new account. So there's no way of linking the site, but any help on finding the line in which the error is would be very helpful. The site is built in joomla Code: <style type="text/css">
blue{color:blue}
red{ color:red;
font-weight:bold}
green{color:green}
</style>
</head>
<body>
<table border="1">
<caption>Baseball Uniforms</caption>
<tr>
<td><img src="yankees.jpg" alt="Yankees Uniform" /></td>
<td> <blue>New York Yankees Two button Placket Team Uniform</blue><br />
<red>Free Shipping!</red><br />
<green>Our Price: $20.99</green></td>
</tr>
You get the idea.... I'm trying to get each individual line in a <td> to be a separate color from the other. But, it won't validate this way. HELP!!!!! Hello Fellas: http://global.espritwebdesign.com/muros.html This webpage will display correctly on IE, Chrome and Safari But not on Firefox 11 What strikes me the most is the error is very odd. Im Clueless. Can you visite the web page see it for yourself, and maybe give me a hint what could be? Any clues? I'm getting an error on IE5 for Mac on one of my pages, and I've been unable to figure out how to fix it. Here's the page (the problem is in the MPI Status Bar area): http://medieval.shadowedrealm.com/mpi/index.php If you have Firefox or IE6 on your computer, I'm sure it works fine. The problem seems to only be on IE5 for mac, where the browser stretches each of the <li>s all the way across the page, making the page extremely wide. Basically, I tried to set my CSS so that there are 6 rows of three columns each. I'm pretty sure that this has to do with the strictness of the IE5 mac browser, and I've read articles about trying to fix similar problems to this one on various sites, but I still can't figure out how to fix this specific problem. Here's my CSS code for the status bar: Code: .statusbar {width: 532px;
margin-left: 10px;
opacity: .60;
filter: alpha(opacity=60);
-moz-opacity: .60;
display: block;
text-align: left;
background: #000000;
border: 4px ridge #2B5E17;
}
.titleback{height: 20px;
width: 528px;
background: #00032F;
border-top: 1px solid #16570B;
border-bottom: 1px solid #16570B;
border-left: 1px solid #114E6F;
border-right: 1px solid #114E6F;
}
.titleback ul{padding: 0;
margin: 0;
list-style-type: none;
width: 526px;
}
.titleback li {width: 240px;
float: left;
margin-left: 2px;
margin-top: 2px;
text-align: center;
font-weight: bold;
font-size: 12px;
}
.title{color: #FF0000;
height: 20px;
width: 520px;
padding: 2px;
font-weight: bold;
margin-left: 2px;
text-align: left;
font-size: 13px;
}
.text{width: 520px;
height: 96px;
font-weight: bold;
font-size: 9px;
margin-left: 1px;
}
.text ul{padding: 0;
margin: 0;
list-style-type: none;
width: 520px;
margin-left: 2px;
}
.text li {width: 168px;
height: 16px;
display: inline-block;
float: left;
margin-left: 1px;
border-left: 1px solid #808080;
border-right: 1px solid #808080;
}
.category {width: 168px;
margin-left: 2px;
margin-top: 1px;
}
.mostrecent{width: 528px;
height: 15px;
padding: 1px;
background: #1F1F1F;
border-top: 1px solid #16570B;
border-left: 1px solid #114E6F;
border-right: 1px solid #114E6F;
text-align: center;
font-weight: bold;
font-size: 9px;
}
Here's the HTML for the status bar, minus the php code: Code: <div class="statusbar">
<div class="titleback">
<div class="title">
MPI Status Bar
</div>
</div>
<div class="text">
<ul>
<li>
<div class="category">
<a href="http://medieval.shadowedrealm.com/mpi/category.php?Category=Agriculture">
Agriculture</a>
<?php
//PHP code
?>
</div>
</li>
This code repeats for two more similar <li>s before I close off the <ul> tag, and then I repeat with similar <ul>s five more times before I close off the title <div>. Hopefully this makes sense. Does anyone know how I can correct for this error within my CSS code? hello..i have just started to learn css over the web..& was testing out my page in IE & FireFox..& came across same error , my styles are gone in Firefox.. how can i fix it? Site link is provided below. Thanks -------- testing ------ http://midnite-pandaz.com/visionmag/ Hi, I dont get this, I have this code: Code: @media screen and (min-width: 1023px){
#menu {float:left; width:756px; margin:0; padding:0 5px 0 5px;}
#menu ul {list-style:none; margin:0; padding:0; width:150.2px; float:left;}
#menu ul ul .level3{width:355px;}
#menu ul ul .level4{width:200px;}
#menu ul ul .level5{width:240px;}
#menu ul ul .level6{width:150px;}
#menu p {display:block; border-width:1px; border-style:solid; border-color:#ccc #888 #555 #bbb; margin:0;
padding:2px 3px; color:#000099; text-align:center;background:url("background5.gif");
font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px; font-weight:bold;}
#menu ul ul .level2{display:block; border-width:1px; border-style:solid; border-color:#ccc #888 #555 #bbb;
margin:0; color:#000099; background:#FFFFFF; text-align:left; font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px; font-weight:bold; padding-left:1px; padding-top:3px; padding-bottom:3px; text-decoration:none; width:200px;}
#menu a.links{display:block; border-width:1px; border-style:solid; border-color:#ccc #888 #555 #bbb; margin:0;
color:#000099; background:#FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold;
padding-left:1px; padding-top:3px; padding-bottom:3px; text-decoration:none;}
#menu ul ul .level2:hover {color:#000099; background:#FFFF66;}
#menu a.links:hover {color:#000099; background:#FFFF99;}
#menu a.topmenu{text-decoration:none;}
#menu a.topmenu:hover {color:#000099; text-decoration:none;}
#menu li:hover {position:relative; z-index:500;}
#menu ul ul {position:absolute;}
#menu ul ul ul {top:-1px; left: 100%;}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;} }
And w3.org checker gives me this error: Feature width doesn't exist for media screen Does not get it, cant I use width inside @ media? Dont see how I can do it without out. Thanks Helen No matter what i will always get http://img217.imageshack.us/img217/5108/23765004.png the bit highlighted Yellow wont go away i want the blue to hit the top of the image so there is no black space there.. no matter what i try different bits of padding it just wont work.. CSS code Code: #nav {
mergin: 0;
padding: 6px;
background-color: #0970de;
}
#nav li {
display: inline;
list-style: none;
padding: 0 15px 0 0;
}
#logo {
padding: 9%;
background-image:url(images/logo.jpg);
}
Hi, I am trying to center my page wrapper. It centers in FF, but not IE. I just cannot see what is wrong. This is my CSS: PHP Code: body{ margin: 0 auto; } #wrapper{ width: 900px; margin: 0 auto; } Any ideas? I'm working on a project right now using multiple panels on a site. The idea I am moving forward with has a panel of a solid color with a small 15x15 image in 3 of the corners. I have the basic concept down of staticly moving an image to the three corners, but when I then assign a background color to the container it does not fill the space between the images, only the center. Any ideas/direction would be great! Code: <div id ="filterDIV" style = "background-color: #666666;"> <div style="position:absolute; top:0;right:0; width:15px; height:15px; background-image:url(tr.gif); float:left"></div> <div style="position:absolute; bottom:0;left:0; width:15px; height:15px; background-image:url(bl.gif); float:left"></div> <div style="position:absolute; bottom:0;right:0; width:15px; height:15px; background-image:url(br.gif); float:left"></div> test </div> hey guys i have wrote this up so i can display 2 background images on my page but nothing shows up at all any idea why? Code: <style type="text/css">
<!--
html {
background-image: #FFFFFF url((URL address blocked: See forum rules));
background-repeat: repeat-y;
background-position:0px 155px;}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
body {
background-image: transparent url((URL address blocked: See forum rules));
background-repeat: repeat-y;
background-position:15px 0px;
}
-->
</style>
I've been developing a template and there is a visual inconsistency in IE6 and 7 that I have been unable to repair. My initial thought was that it was just a whitespace bug, but removing the space between all the tags has been ineffective. The problem is a small gap (1-3px) that appears between the styled list items on "Solutions" and "Whitepapers" siderails in the left column. This only happens in IE. I'm also having issues with the Suckerfish dropdowns not positioning properly in IE7 only. I'm about ready to give up and write IE it's own sheet, but I hate that. Any help would be really welcomed. CSS File: http://www.aidenbordner.com/test/template/css/style.css Template: http://www.aidenbordner.com/test/template/index.html Hi all, great forums! Yall have helped me so much, never registered though so thanks Anyways I can't seem to find the cure for this problem. So far it works perfectly in firefox, IE 6 not so great. Each box should be spaced equally from the edges and each other. In IE6 there is a large gap on the left side. I've tried several combinations of margins, padding, and changing the size of the content box itself, nothing works, screws everything up in one or the other browsers. Here is the code: ( for the content box, it was supposed to be 676px wide but I had to have 2 subtracted for the border. In the end it needs to be a total of 676px wide in order to fit with the header.) CSS: Code:
html, body {
background: #131414 url(images/bgslice.jpg) repeat-x top center;
font-family: arial,verdana,sans-serif;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
color: #333333;
text-align: center;
}
#content {
margin-left: auto;
margin-right: auto;
padding: 0;
background: #EDEDED;
height: 400px;
width: 674px;
max-width: 674px;
border: 1px solid #2C383C;
text-align: left;
}
.bluebox {
border: 2px solid #2C383C;
margin: 8px 0 0 8px ;
padding: 0;
float: left;
}
HTML: Code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)">
<head>
<title>The Party Quest - Are you coming out tonight?</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css" media="all">@import "css.css";</style>
</head>
<body>
<div id="content">
<div class="bluebox" style="width: 242px; height: 145px;">
test
</div>
<div class="bluebox" style="width: 242px; height: 145px;">
test
</div>
<div class="bluebox" style="width: 146px; height: 145px;">
test
</div>
</div>
</body>
</html>
Thank you so much for any help you guys can supply! I'm not sure what settings I changed, but now my page doesn't display properly on IE 5.0 Win. My right column is getting pushed to the bottom and I get that error on page message on IE 5.0. IF anyone has that browser installed, can you take a look and see if you notice any glaring problems?? It looks fine in IE 6, Mozilla, Firefox, and Opera. But, I'd like it to work in IE 5.0 as well, or at least well enough. But, the right column dropping down doesn't look good. Thanks in advance. The site is http://www.marginalspace.com and I am using Wordpress for the index.php page. I don't think it's a php error. At least I don't think so. Thanks! Amit Use relative rather than absolute units in CSS property values. WCAG1 AA 3.4 , Absolute units are cm, mm, in, pt and pc, as well as absolute size keywords like x-small. Partially sighted users often use the "large fonts" mode of Windows, which makes each pixel larger than usual. This usually causes problems with pixel based layouts, which also perform badly on handheld and widescreen displays. Percentage values "stretch" according to screen size and work on a large range of display sizes. hello again folks, Man I am lost on this warning any help? Below is my print.css file body { color : #000000; background : #ffffff; font-family : "Times New Roman", Times, serif; font-size : 12pt; width: auto; background-position: center center; } a { text-decoration : underline; color : #0000ff; } Thanks once again for all your help! whonoes |
|||||||