...

View Full Version : Suggested CSS does not validate



lorie
06-03-2007, 06:24 PM
I have a question about a snippet of CSS that has been recommended on several posts on this forum:




* {
border:0;
margin:0;
padding:0;
}



This accomplishes the desirable object of having getting rid of various browsers' proprietary margins and padding on elements. I put that snippet in a stylesheet; but when I sent the page for validation, it came back as a parse error:

Parse Error - ���* { border:0; margin:0; padding:0; }

(Using the Firefox Web Developer toolbar feature to Validate Local CSS; the three empty boxes are actually three black diamonds with white question marks, if that means anything to anyone...)

The only other errors in the CSS had to do with my use of opacity, which I know is not part of the standard so I expect and tolerate those errors.

Can someone please explain what that snippet of CSS is and why it is necessary/recommended but not valid? And is there a valid way to accomplish the same thing? Or is that another error to expect and tolerate...

thanks, lorie

koyama
06-03-2007, 06:36 PM
Hmm... It could be something before that snippet. Can you post a link or your entire CSS?

kewlceo
06-03-2007, 06:44 PM
Can someone please explain what that snippet of CSS is and why it is necessary/recommended but not valid? And is there a valid way to accomplish the same thing? Or is that another error to expect and tolerate...

That snippet is fine, as you can see by pasting just that portion into the direct input validator here:

http://jigsaw.w3.org/css-validator/#validate-by-input

lorie
06-03-2007, 07:44 PM
Here is the code:





* {
border:0;
margin:0;
padding:0;
}



body {
background:#FFF;
color:#000;
font-family:'Century Gothic', Tahoma, 'Trebuchet MS', Verdana, sans-serif;
font-size:15px;
margin:2% 5% 5%;
}

a {
text-decoration:none;
}


img {
border-style: none;
}


H1 {
font-family: Harrington;
font-size: 30pt;
font-weight: normal;
text-align: center;
height: 70px;


}
.pic1 {
background-image: url("images/scrolledline.gif");
background-position: center;
background-repeat: no-repeat;
height: 60px;
}

.pic {
margin-top: 36px;
background-image: url("images/irisscroll.gif");
background-position: center;
background-repeat: no-repeat;
height: 75px;
}
.line {
margin-top: 25px;
margin-bottom: 25px;
background-image: url("images/scroll-end3.gif");
background-position : center;
background-repeat : no-repeat;
height : 40px;
}

p
{
padding-bottom: 12px;
}

.alignLeft {
text-align: left;
}
.alignCenter {
text-align: center;
}
.alignRight {
text-align: right;
}
.alignJust {
text-align: justify;
}




.artmain {
text-align:center;
}




.artmain h1 {
font-family:Harrington, Georgia, serif;
font-size:30pt;
font-weight:400;
text-align:center;
}


.artmain h2
{
font-family:'Century Gothic', Tahoma, 'Trebuchet MS', Verdana, sans-serif;
font-size: 18px;
font-weight: 700;

}
.artmain h3
{
font-size: 11pt;


}
.artmain h4
{
font-size: 15px;
font-weight: 400;
margin-bottom: 12pt;
}


.imageLt
{
float: left;
padding-right: 15px;
padding-bottom: 15px;
text-align: center;
font-family: georgia;
font-style: italic;
}



.imageLt h2
{
font-size: 10pt;
font-weight: bold;
margin-top: 4pt;
margin-bottom: 0pt;

}

.imageLt h3
{

font-size: 10pt;
font-weight: normal;
margin-top: 0pt;
margin-bottom: 0pt;

}

.imageRt
{
float: right;
padding-left: 15px;
padding-bottom: 15px;
text-align: center;
font-family: georgia;
font-style: italic;
}



.imageRt h2
{

font-size: 10pt;
font-weight: bold;
margin-top: 4pt;
margin-bottom: 0pt;

}

.imageRt h3
{

font-size: 10pt;
font-weight: normal;
margin-top: 0pt;
margin-bottom: 0pt;

}

H1.artist {
text-align: left;
background-image : url("images/scrolledlineright.gif");
background-position : left top;
background-repeat : no-repeat;
margin-bottom: -10px;
}

h2.artistLife
{
text-align: left;
margin-top: -15px;
margin-bottom: 25px;
}


HR {
width: 60%;
height: 6px;
background-color: #9999ff;
border-bottom-color : #CA6FB6;
border-bottom-style : double;
margin: 0 auto;
}
a:link {
color: #CA6FB6;
}


a:visited {
color: #9999FF;
}

a:hover {
background-color: #ADADD6;
color: white;
text-transform : uppercase;
font-size: .95em;
}


a.main {
color: black;
}

a:visited.main {
color: #353535;
}

a:hover.main {
background-color: #ADADD6;
color: white;
text-transform : uppercase;
}


.details
{
float: right;
padding-left: 25px;
}

.details h3
{
text-align: left;
padding-bottom: 15px;
}

.details UL
{
margin-left: 30px;
font-size: .9em;
}



.smallList {
font-size: .9em;
}
.goto {
text-align: center;
margin-top: 0pt;
margin-bottom: 0pt;
padding-bottom: 0pt;
font-size: 14pt;
font-weight : bold;
}
.backRem
{
margin-top:0pt;
text-align: center;
}

span.browsNote {
cursor: help;
border-bottom: 1px dotted #9999ff;
}

.indentDbl {
margin-left: 50px;
margin-right : 50px;
}
.infoSmall
{
font-family: "Century Gothic";
font-style: normal;
font-weight: normal;
font-size: 10pt;
}
.sourceNote {
font-size: 12px;
}

.quoted {
font-family: Georgia;
font-size: 15px;
font-style: italic;
}

.seealso {
padding: 10px;
background-color: #E4EFC0;
border: 1px solid #91B63D;
width: 500px;
font-family: "Trebuchet MS", Tahoma, Verdana, sans-serif;
font-size: 9pt;
line-height: 1.2;
display: none;
top: 0px;
left: 0px;
z-index: 17;
position: absolute;
visibility: visible;
filter: alpha(opacity=85);
-moz-opacity: .85;
opacity: .85;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#ca6fb6', Direction=135, Strength=4);
}
.seealsoWord {
cursor: help;
color: black;
position: relative;
font-variant: small-caps;
border-bottom: 1px dashed #91b63d;
}
#LPtooltip {
padding: 3px;
padding-left: 10px;
margin-right: 35px;
max-width: 450px;
background: #Ca6fb6;
border: 1px solid #91357c;
text-align: left;
font-size: smaller;
filter: alpha(opacity=85);
-moz-opacity: .85;
opacity: .85;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#9999ff,direction=135);
}
span.LPtip {
border-bottom: 1px solid #e8d0e8;
cursor: url("images/jasilhreal-1.cur"), help;
}







I know it is still cludgy, but I am working on it...

And here is the other stylesheet the page references; it is for the thickbox.js functionality (thickbox.css); obviously, I did not write this (it is courtesy of ThickBox3 (http://jquery.com/demo/thickbox/)) but it has a similar piece of CSS at the very beginning:




/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> global settings needed for thickbox <<<-----------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
*{padding: 0; margin: 0;}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_window {
font: 11px Tahoma, "Trebuchet MS", Verdana, sans-serif;
color: #333333;
}

#TB_secondLine {
font: 10px Tahoma, "Trebuchet MS", Verdana, sans-serif;
color:#666666;
}

#TB_window a:link {color: #666666;}
#TB_window a:visited {color: #666666;}
#TB_window a:hover {color: #000;}
#TB_window a:active {color: #666666;}
#TB_window a:focus{color: #666666;}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_overlay {
position: fixed;
z-index:1000;
top: 0px;
left: 0px;
background-color:#000;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
height:100%;
width:100%;
}


#TB_window {
position: fixed;
background: #ffffff;
z-index: 1002;
color:#000000;
display:none;
border: 4px solid #525252;
text-align:left;
top:50%;
left:50%;
}


#TB_window img#TB_Image {
display:block;
margin: 15px 0 0 15px;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-top: 1px solid #666;
border-left: 1px solid #666;
}

#TB_caption{
height:25px;
padding:7px 30px 10px 25px;
float:left;
}

#TB_closeWindow{
height:25px;
padding:11px 25px 10px 0;
float:right;
}

#TB_closeAjaxWindow{
padding:7px 10px 5px 0;
margin-bottom:1px;
text-align:right;
float:right;
}

#TB_ajaxWindowTitle{
float:left;
padding:7px 0 5px 10px;
margin-bottom:1px;
}

#TB_title{
background-color:#e8e8e8;
height:27px;
}

#TB_ajaxContent{
clear:both;
padding:2px 15px 15px 15px;
overflow:auto;
text-align:left;
line-height:1.4em;
}

#TB_ajaxContent.TB_modal{
padding:15px;
}

#TB_ajaxContent p{
padding:5px 0px 5px 0px;
}

#TB_load{
position: fixed;
display:none;
height:13px;
width:208px;
z-index:1003;
top: 50%;
left: 50%;
margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */
}


#TB_HideSelect{
z-index:999;
position:fixed;
top: 0;
left: 0;
background-color:#fff;
border:none;
filter:alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
height:100%;
width:100%;
}


#TB_iframeContent{
clear:both;
border:none;
margin-bottom:-1px;
margin-top:1px;
margin-bottom:1px;
}




Pasting those two pieces of CSS into the validator you linked I get the expected errors about the opacity and filters, and a couple of warnings (which did not show up on my page... odd). But not the two parse errors my page received.

I will continue to pare down my page to try to find why the same CSS alone gives a different result than when it is referenced on my page.

Thanks for the link to the validate from textarea site; I will use it frequently.

lorie

_Aerospace_Eng_
06-03-2007, 07:48 PM
Remove the whitespace before that snippet in your stylesheet. Then revalidate. Also what editor are you using?

Arbitrator
06-03-2007, 07:54 PM
Parse Error - ���* { border:0; margin:0; padding:0; }

(Using the Firefox Web Developer toolbar feature to Validate Local CSS; the three empty boxes are actually three black diamonds with white question marks, if that means anything to anyone...)I believe that the black diamond character is the Unicode Replacement Character (http://www.fileformat.info/info/unicode/char/fffd/index.htm) (U+FFFD). You see it when a character is unrecognized in a document encoded as UTF‐8 (like the CSS validator pages are). I often see the character when a document is displayed under the wrong encoding.

Make sure that you’ve saved and served the document using the correct encoding. For example, if the CSS/HTML/XHTML document encoding is ISO-8859-1, make sure that you specify ISO-8859-1 and not UTF‐8. The encoding can be specified by HTTP headers, an @charset at‐rule in the CSS file, or by use of a byte order mark (BOM) in UTF encodings.

Also make sure that you don’t have any invisible characters in your document. You might try copying your entire CSS file to a new file or deleting that rule and then manually retyping it to see if you can get rid of such characters if they are there. If using an editor like Notepad++, you can click the paragraph icon to show invisible control characters.

lorie
06-03-2007, 07:54 PM
Actually, there was no whitespace in the real .css; I must have added it when I pasted it here.

I am using the trial version of Expression Web, but I do most of my work in the code interface as I find I can be more precise that way.

lorie

lorie
06-03-2007, 08:13 PM
Arbitrator--

I am not sure I understand where I am to specify the document encoding. Here is the head section of the page; my charset appears to be windows-1252, right?:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Jacques-Louis David</title>
<link rel="stylesheet" type="text/css" href="art01.css" />
<link rel="stylesheet" type="text/css" media="screen" href="thickbox.css" />
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript" src="thickbox.js"></script>
<script type="text/javascript" src="ajaxPage.js"></script>
</head>





This is on a local machine using the ASP.net 2.0 web developer server for the time being (real server (Windows Server 2003) for local intranet is under reconstruction at the moment). So when you say it should be saved and served with correct encoding, what else am I to do?

Thank you for all of your help; this forum is the best site I've found in ages to help novices learn from the experience of others.

lorie

Arbitrator
06-03-2007, 08:38 PM
I am not sure I understand where I am to specify the document encoding. Here is the head section of the page; my charset appears to be windows-1252, right?:Well, the document declares itself as such anyway. You can’t really tell the encoding without looking at the file itself though. Basically, you save it (encode it) then declare it.

I’m not really sure of a general method to tell what the encoding of your documents is except to always save them with the same encoding. In Notepad++, it says the encoding in the status bar for ANSI and UTF‐8; maybe your editor, “Expressions Web”, can do that too.

You can save the document encoded as this or that in various ways, depending upon editor. In Microsoft Notepad, you go to Save or Save As and select your encoding from the drop‐down box. In Notepad++, you select it from the Format menu. I would always recommend UTF‐8; you can then enter characters from any language (plus symbols) directly into your document instead of encoding them via character references (e.g., ➤, directly, instead of &x#27a4;, indirectly).

Anyway, if your style sheet is not embedded in that XHTML document, then you’re looking in the wrong place since it was the CSS file that, apparently, had the error. You can declare the encoding of a CSS document by using, for example, @charset "UTF-8";; it has to be the first thing in the document.

lorie
06-04-2007, 12:23 AM
Arbitrator,

I copied and pasted the CSS in Notepad and saved it with UTF-8 encoding as you suggested. When I viewed the page again in FF, a little set of odd characters showed up at the top of the page:



Just as you suspected, HIDDEN SYMBOLS... I have no idea what this is or where it came from; I do remember there was another post last week on this forum that had something similar.

The weird thing is I could not see it in the code in MS Expressions Web or in Notepad. It showed in the View Source of Firefox, but I could not change it from there. I finally opened the page in HTML-Kit and was able to delete the cryptic symbols. Saved the page again and now everything validates just fine.

Does anyone have any idea where that thing came from? (I'm kind of looking around for that guy from 'The Net' at this point...)

thanx!
lorie

koyama
06-04-2007, 12:40 AM
Does anyone have any idea where that thing came from? (I'm kind of looking around for that guy from 'The Net' at this point...)
That is the byte-order-mark (BOM) for the UTF-8 encoded file. It is optional to have such a BOM. Read more about it here: http://en.wikipedia.org/wiki/Byte_Order_Mark

Notepad always includes one and it cannot be disabled. Good text editors can save files as UTF-8 without the BOM. You should really never save your UTF-8 files with the BOM in web development. This can lead to other more serious problems in PHP.

This is not a really a problem for style sheets because you rarely need any non-ASCII characters. In such cases you can just save the file as ANSI/ASCII in Notepad. It will then be identical to a file saved in UTF-8 without the BOM.

lorie
06-04-2007, 01:24 AM
So, koyama, can you recommend a good plain-text editor that won't give me the BOM? Or will it suffice to just make sure that in Notepad I always use the ANSI rather than UTF-8 (I don't remember where I read it, but quite a while ago I did read something that suggested always saving CSS and JS as UTF-8... Confusion reigns!)

thanx
lorie

koyama
06-04-2007, 01:49 AM
So, koyama, can you recommend a good plain-text editor that won't give me the BOM? Or will it suffice to just make sure that in Notepad I always use the ANSI rather than UTF-8 (I don't remember where I read it, but quite a while ago I did read something that suggested always saving CSS and JS as UTF-8... Confusion reigns!)
Style sheets never require special characters. So if you save a style sheet in Notepad as ANSI, then the file is identical to the one you would get if you could save it as UTF-8 without a BOM. There is absolutely no difference. Notepad suffices for this purpose. So I think your sources have mislead you. If you can dig up that source maybe someone here could clarify some things.

Here is a good introduction to encoding in general: http://www.joelonsoftware.com/articles/Unicode.html

Notepad does not suffice if you need to save a file containing e.g. Japanese kanji when it needs to be saved as UTF-8 without a BOM. For this purpose you need another editor. Adobe GoLive is always mentioned as an example of an editor with such capabilities, but it is not the only one.

kewlceo
06-04-2007, 02:39 AM
My favorite free text editor is Notepad++ 4.1.2 (http://notepad-plus.sourceforge.net/uk/site.htm).

Arbitrator
06-04-2007, 04:15 PM
That is the byte-order-mark (BOM) for the UTF-8 encoded file. It is optional to have such a BOM. Read more about it here: http://en.wikipedia.org/wiki/Byte_Order_MarkYeah, in case you didn’t read koyama’s resource, look at the last sentence of the fourth paragraph for the immediate explanation. Basically, the document is UTF‐8, but being misrepresented as ISO-8859-1. This could be errors in your code, your server settings, or your browser settings.

If you want to experiment, you can see and change the current character encoding by going to “View > Character Encoding” in Firefox. Internet Explorer more conveniently allows you to do this by simply right‐clicking the page.


Notepad always includes one and it cannot be disabled. Good text editors can save files as UTF-8 without the BOM. You should really never save your UTF-8 files with the BOM in web development. This can lead to other more serious problems in PHP.PHP seems to be the main problem with the BOM; it fails entirely when a document has one. I hear that PHP 6 is supposed to fix this when support for Unicode is added.


This is not a really a problem for style sheets because you rarely need any non-ASCII characters.Personally, I save them as UTF‐8 anyway since I may use special characters (A) for thecontent and quotes properties (B) within CSS comments. I may also use UTF‐8 for (C) a consistent encoding of all documents. An example of a property that might use special characters:


a:before { content: "➤ "; }

Of course, Internet Explorer doesn’t support either of those CSS properties.


Style sheets never require special characters. So if you save a style sheet in Notepad as ANSI, then the file is identical to the one you would get if you could save it as UTF-8 without a BOM. There is absolutely no difference.Generally speaking, you’re right, although I’ve just shown how you might get a non‐ANSI character into a style sheet. The characters are not “required” though, just as they are not required in HTML, since both languages have their own character escaping mechanisms.


Notepad does not suffice if you need to save a file containing e.g. Japanese kanji when it needs to be saved as UTF-8 without a BOM. For this purpose you need another editor. Adobe GoLive is always mentioned as an example of an editor with such capabilities, but it is not the only one.Yeah, I have GoLive. It saves as UTF‐8 without the BOM. It’s not free though, I never found a way to change the encoding (not that I tried hard), and I mostly didn’t use it because it took so long to load. Like all of Adobe’s programs, it seems to be a behemoth.


My favorite free text editor is Notepad++ 4.1.2 (http://notepad-plus.sourceforge.net/uk/site.htm).My favorite editor is Notepad++ as well. The two reasons that I started using it were for encoding and being able to control the width of the tab character (some people may have noticed that I use tabs now when previously I used two spaces per indent).

I also find that it’s better for other reasons though: you get tabbed documents (like in a browser), it remembers what files you had open when you close it, you can use it to open the file in Firefox and Internet Explorer, you can show hidden characters, code is color‐coded, the program is light weight, word wrap is easy to turn on and off, you can alter the indentation of multiple lines simultaneously, etc.

About the only things that have annoyed me so far as that it doesn’t seem to support glyph substitution (so, if you use a character not in the current font, you see the Replacement Character) and it’s a bit tedious to first set up the color‐coding to suit one’s tastes.

Anyway, with regard to the current issue, Notepad++ lets you just remove the BOM via a menu. It specifically has a menu item labeled “UTF‐8 without BOM”.

koyama
06-04-2007, 09:04 PM
Basically, the document is UTF‐8, but being misrepresented as ISO-8859-1. This could be errors in your code, your server settings, or your browser settings.
To see the HTTP response header, I recommend that you get the LiveHTTPheaders plugin (http://livehttpheaders.mozdev.org/) for Firefox, but the Web Deveoper extension allows that as well. By pointing your browser to the CSS file you will be able to see if there are some wrong headers being set.


PHP seems to be the main problem with the BOM; it fails entirely when a document has one. I hear that PHP 6 is supposed to fix this when support for Unicode is added.
Yeah, I think it is going to be fixed in PHP 6. Actually, PHP doesn't always fail when the BOM is included. As mentioned in the Byte Order Mark Wikipedia article, PHP may fail when one uses header functions. In the default configuration, header functions may only be called before the output stream has started. But PHP which does not know about byte-order-marks just sends it as if it they were ordinary characters. And since the BOM appears at the beginning of the file, this immediately starts the output stream. In turn, this means that header functions cannot be called, and one gets a warning if one attempts to do so.

If one doesn't use header functions there is usually no problem. But header() is just one example of a header-function. Another one is setcookie() which sets an HTTP cookie.

Here is a simple example of a PHP file that must not be saved with a BOM because it uses a header function.

Live example UTF-8 with a BOM (http://koyama.dk/demos/CF115505/bom.php). (Header cannot be set by PHP. Warning message)
Live example UTF-8 without a BOM (http://koyama.dk/demos/CF115505/nobom.php). (OK)



<?php
ini_set('display_errors', 1);
header('Content-Type: text/html; charset=UTF-8');
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>CF 115505</title>
<style type="text/css">
body {
background: white;
color: black;
font-family: sans-serif;
}
#wrap {
width: 800px;
margin: 0 auto;
border: 5px solid green;
padding: 1em;
}
</style>
</head>
<body>
<div id="wrap">
<h1>BOM or no BOM?</h1>
<p>What happens when this UTF-8 file has a BOM?</p>
<p>このUTF-8ファイルにBOMがあると何が起こるか。</p>
</div>
</body>
</html>


An example of a property that might use special characters:

a:before { content: "➤ "; }
I hadn't thought about that. I was only thinking that one might want special characters in some comments perhaps /**/, but indeed you are right.


My favorite editor is Notepad++ as well.

Thank you to both kewlceo and Arbitrator. I downloaded that editor and I liked it immediately. The files in the live example were edited it Notepad++. I will check out the tabbing features that you are mentioning too.

Arbitrator
06-05-2007, 03:45 PM
Yeah, I think it is going to be fixed in PHP 6. Actually, PHP doesn't always fail when the BOM is included.Ah, I guess that I should have read the entirety of that Wikipedia article.

I was under the impression that PHP always failed in the presence of a BOM. Perhaps my initial problematic documents utilized the headers() method and I had forgotten or perhaps the documents had had other code errors. I performed a simple test and it seems that you’re right; PHP does not always fail when a BOM is present.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum