Parse Error ;*font-size:small;

CSS Validation Issue

[max_cool]

Hi everyone, this is my first post and so I'm sorry if I've posted in the wrong section. I have validated all my HTML and managed to sort all the errors I had; however now I've come to the CSS and have 6 issues I've tried very hard to sort but can't. Please help if you can.

My CSS is as follows and is called "reset.css":

html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;font-variant:normal;}sup {vertical-align:text-top;}sub {vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}legend{color:#000;}

body {font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}table {font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}

The CSS Validation states the following:

3 body Parse Error ;*font-size:small;
3 * Parse Error *font:x-small;
3 * Parse Error ;}
3 table Value Error : font Parse Error [empty string]
3 pre, code, kbd, samp, tt Parse Error ;*font-size:108%;
3 Parse Error [:100%;} ]

Any help at all would be appreciated more than you know.

All the best to everyone and thanks.

[birdbrain]

Hi there max_cool,

and a warm welcome to these forums. ;)

1. body Parse Error ;*font-size:small;

cure - remove the "*"

2. Parse Error *font:x-small;

cure - remove the "*" and add a font-family .... font:x-small arial,verdana,helvetica,sans-serif;

3. table Value Error : font Parse Error [empty string]

cure - add a font-family.... font:100% 'times new roman',serif;

4. pre, code, kbd, samp, tt Parse Error ;*font-size:108%;

cure - remove the "*"

birdbrain

[max_cool]

Hey birdbrain,

Thank you so very much, I have now only one issue remaining and am unsure as to what it is, the following is the new CSS with the edits you suggested although I've missed one:

html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;font-variant:normal;}sup {vertical-align:text-top;}sub {vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}legend{color:#000;}

body {font:13px/1.231 arial,helvetica,clean,sans-serif;font-size:small;font:x-small;}table {font-size:inherit;font:100%times new roman,serif;}pre,code,kbd,samp,tt{font-family:monospace;font-size:108%;line-height:100%;}

The validator error now is:

3 body Value Error : font Parse Error [empty string]

Thank you.

[SuzyUK]

all issues are being caused by the '*' asterisks - they are parse hacks and not valid css, though they possibly still work

this is actually the Yahoo reset/fonts/grids css [yui.yahooapis.com] - are you using a Yahoo Grid for your layout?

I don't really trust myself to say much more ;) but lets just say I do not like reset css files, especially those that use parse hacks within them that may someday fail..

basically, for whatever reason, and I'm really not familiar with the whys of this, probably due to my aversion ;) - the CSS appears to be designed to "tame" font sizes so the user can go onto to use consistent percentages throughout their templates and have the font sizes as consistent as possible,

only IE reads the rules with the asterisks in front of them and I presume that where there's 2 rules with asterisks the second rule picks on a specific IE version

on order to validate your CSS you would need to remove the rules with asterisks - find out which version which asterisk is targetting and then you could re-input the rules (without asterisks) into their respective conditionally commented IE only css files

see more on IE Conditional Comments [google.co.uk]

---
[added] after seeing your replies, don't just remove the asterisks and leave the rules as there is then 3 rules doin the same thing!

[SuzyUK]

actually further added re: the font rule for the body.. which is causing your last error

body {
font:13px/1.231 arial,helvetica,clean,sans-serif;
font-size:small;
font:x-small;
}

that last "font" rule is now overriding the previous two and it doesn't have enough information in it..

see: [w3.org...]

[edited by: SuzyUK at 11:23 am (utc) on Nov 17, 2010]

[birdbrain]

Hi there max_cool,

instead of using...

body { 
 font:13px/1.231 arial,helvetica,clean,sans-serif; 
 font-size:small; 
 font:x-small; 
 } 

...why don't you use...

body { 
 font:x-small/1.231 arial,helvetica,clean,sans-serif; 
 } 

birdbrain

[max_cool]

Thank you SuzyUK and a big thank you to birdbrain you guys rock! No more errors ppl :-)

[edited by: max_cool at 11:31 am (utc) on Nov 17, 2010]

[SuzyUK]

birdbrain that is right (and what I really wanted to say ;)), but it will remove the intended IE "reset"

max_cool - Welcome to WebmasterWorld! - have you checked your pages (in various IE versions) to see what effects this has had on them - if you're actually using a Yahoo grid based template then complete removal of the asterisked rules may be causing further side effects - it might not or you may not be bothered about pixel perfection across fonts or IE5.x/6 support..

[birdbrain]

The only reset.css that I use is...

* { 
 padding:0; 
 margin:0; 
 }

birdbrain