css validation faulty?

Homy · Post by **Homy** » Thu Sep 21, 2006 3:36 pm

Hi, thank You for making a very good software.

I ran in to a problem using the inbuilt CSS (2) validator.



/* Conditional list look, each first #statement to be repeated in BODY tag of relevant page as ID. */
/* Second #statement to be implemented in to link as link=ID */
#services #services_on,
#copyright #copyright_on,
#index #index_on,
#articles #articles_on,
#information #information_on ,
#contact #contact_on
{
background-image: url(eye.gif);
padding-left: 1.6em;
}

That gives me a parsing error, despite being correct and despite running it through the online css validator with no warnings.

Any ideas as to why?

Post by **chrisjlocke** » Thu Sep 21, 2006 4:15 pm

I've just pasted that into a new CSS document, and checked it, and it returns 0 errors, and 0 warnings.

What application / version are you using?

Also, shouldn't there be an ID or class identifier before the opening curly bracket?

PS: It should be 'faulty', not 'fawlty' - have you been watching too much 'Fawlty Towers' ?!

Post by **syrupcore** » Thu Sep 21, 2006 10:56 pm

chris, that whole string of IDs are the IDs before the opening bracket. you can legally leave 100231 lines between the two if you want. it would be damn ugly code though. :D

I also get 0 errors and 0 warnings with any of the built in CSS validators. Honestly, I didn't even know that thing was there until this post so thank you Homy. I'm on 7.1.0.67.

Homy · Post by **Homy** » Fri Sep 22, 2006 8:55 am

I better paste the entire sheet...
I based it on the three-column layout template available in Webuilder.

Code: Select all

body {
background-color: transparent;
}


img {
   border-width: 0px;
   padding: 1px;

}

#frame {
  width: 750px;
  margin-top:0px;
}

/* default navigation list look */
ul.nav {
list-style-type: none;
padding: 0;
margin: 0;
}
/* default list look */
li.nav {
background-image: url(bullet_go.gif);
background-repeat: no-repeat;
background-position: 0 .5em;
padding-left: 1.2em;
padding-top: .5em;
}

/* Conditional list look, each first #statement to be repeated in BODY tag of relevant page as ID. */
/* Second #statement to be implemented in to link as link=ID */
#services #services_on,
#copyright #copyright_on,
#index #index_on,
#articles #articles_on,
#information #information_on ,
#contact #contact_on
{
background-image: url(eye.gif);
padding-left: 1.6em;
}

#maincontent {
  position: absolute;
  left: 145px;
  top: 90px;
  text-align: justify;
  width: 480px;
  background-color: #f5f5f5;
  padding-top: 1px;
  padding-left: 3px;
  padding-bottom: 3px;
  padding-right: 3px;
  border-right-color: #00CCFF;
  border-right-width: 1px;
  border-right-style: solid;

  margin: 0px;
  font-family: Verdana;
  font-size: smaller;
}

#topcontent {
  width: 750px;
  background-color: transparent;
  border-width: 0px;
  border-style: dashed;
  border-color:  #FFCC66;
  padding: 0px;
  margin: 0px;
}

#leftcontent {
  position: absolute;
  left: 5px;
  top: 90px;
  width: 130px;
  background-color: #ffffff;
  border-width: 1px;
  border-style: dashed;
  border-color: #CCCCCC;
  padding-top: 1px;
  padding-left: 3px;
  padding-bottom: 3px;
  padding-right: 3px;
  font-family: Verdana, Tahoma;
  font-size: .7em;
}

#rightcontent {
  position: absolute;
  top: 90px;
  left: 640px;
  width: 90px;
  background-color:#ffffff;
  border-width: 1px;
  border-style: solid;
  border-color: orange;
  padding-top: 1px;
  padding-left: 3px;
  padding-bottom: 3px;
  padding-right: 3px;
  margin: 0px;
  font-size: .75em;
  font-family: Verdana, Tahoma;
}
#international {
  position: absolute;
  background-color: transparent;
  border-width: 0px;
  padding: 0px;
  margin: 0px;
  left: 640px;
  top: 60px;
  width: 100px;
  font-family: Arial, Verdana, sans-serif;
  font-size: x-small;
  }
h1 {font-size:16px;font-family: sans-serif, Verdana, Tahoma;}
h2 {font-size:15px;}
h3 {font-size:14px;}
h4 {font-size:13px;}

/* End of Stylesheet  */

My boss got this for me recently and its version 7.2.0.68.
There are still a couple of warnings in it but its all very alpha for a new site. Still it bugs me that Webuilder gives this error.

You are welcome syrup...

OMG!

I just ran that through my regular CSS editor on another PC and that gave:

Thats Topstyle 3.10

...and the online W3C checker only gave a few warnings...

Post by **chrisjlocke** » Fri Sep 22, 2006 12:30 pm

This could be a bug, or an issue with the CSS parsing - will have to wait back till Karlis can cast his eye over it.

Its essentially moaning about the background image. Remove this line, and it'll be fine:
background-image: url(eye.gif);

I don't know if its because eye.gif doesn't exist, or thats invalid or what, but remove it, and you don't get that parsing error. However, it then moans about orange not being a proper colour. Change that, and you get 0 errors, and 0 warnings.

Hope that helps.

Homy · Post by **Homy** » Fri Sep 22, 2006 8:06 pm

Well of course the warning about eye.gif are there. The file is not present.
And orange as well, should be hex of course. Disregard them.

Post by **syrupcore** » Fri Sep 22, 2006 11:21 pm

I'm not sure anything is wrong here. The only error I'm getting is the border-color 'orange'. There are warnings when checking against css level 1 (which didn't really support positioning) but even there, there is only the one actual error.

I'm now using 7.3.0.69.

font-family: sans-serif, Verdana, Tahoma; will let the browser choose it's default sans-serif first. you really want: font-family: Verdana, Tahoma, sans-serif; So it will pick verdana first, if available, then tahoma then it's default. if you don't include the sans-serif at all (like in most of the other font declarations) it will choose it's default font if the one you list is not available and it's default font is usually a pretty ugly serifed font. ick.

and, you didn't ask about this and might already know but you can reduce your code a lot with some simple short hand.

Code: Select all

  border-width: 1px;
  border-style: dashed;
  border-color: #CCCCCC;
  padding-top: 1px;
  padding-left: 3px;
  padding-bottom: 3px;
  padding-right: 3px;

Becomes

  border: 1px dashed #CCCCCC;
  padding: 1px 3px 3px 3px; /*(top right bottom left... clockwise from top)*/

Will

Post by **chrisjlocke** » Sat Sep 23, 2006 12:02 am

Homy wrote:Well of course the warning about eye.gif are there. The file is not present.
And orange as well, should be hex of course. Disregard them.

You forgot 'thanks', so I'll forget the 'you're welcome'.

Syrupcore wrote:I'm not sure anything is wrong here.

If you paste the second lump of CSS, do you get an error? (see parsing error at bottom...)

Something is weird, as a simple test throws up a bizarre error:

but swop those around, and it parses fine:

Fweaky...

Homy · Post by **Homy** » Mon Sep 25, 2006 11:04 am

Hmmm, strange stuff...

...and THANKS!
I did not mean to be rude...

Well, I am still rewriting that css, sorting things out and adding stuff.

Post by **Karlis** » Mon Sep 25, 2006 11:40 pm

Will fix this in one of the next updates...

Post by **syrupcore** » Wed Sep 27, 2006 1:24 am

chris, that is fweaky. I pasted that second snippet in (all of the code from Homy's second post) and still only get an error on #rightcontent because orange is not a valid color. that's it. totally wierd. poor Karlis.

Will

Post by **Gatis** » Sat Oct 28, 2006 11:59 pm

I have tried to reproduce this bug but no luck.
It might have been fixed in one of the last updates as there were some fixes regarding this functionality.
Please, if anyone still has problems, let me know.
Thanks!

Post by **Karlis** » Mon Oct 30, 2006 2:55 pm

Me too could not reproduce this. Maybe it depends on editor settings or is already fixed.

Post by **syrupcore** » Wed Nov 08, 2006 12:43 am

I was never able to reproduce it.