Struggling with CSS Validation (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

scottishagate -> Struggling with CSS Validation (10/1/2005 9:25:09)

Tidying up my FP web http://www.cmy.org.uk with basic CSS stylesheet. Can someone help me, or point to a site with all the CSS statements explained?
The validator rejects the background and text-align statements, but doesn't say how to fix them. Grateful for your help. The is the code for the top bar:
#logo, #logo a {
font-size: 90%;
background: #6595D6;
background-image: url(../_includes/classic.gif);
background-repeat: repeat-x;
color: white;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
font-variant: normal;
text-transform: none;
font-weight: bold;
padding: 4px 4px 4px 4px;
border-left-width: 0px; border-right-width: 0px; border-top-width: 1px; border-bottom-width: 0px;
border-color: white;
text-align: left;
}
/* end of code */
Thanks. [;)]



Tailslide -> RE: Struggling with CSS Validation (10/1/2005 9:55:39)

Having problems getting through to your page to check.

What exactly is the validator saying about the errors?



coreybryant -> RE: Struggling with CSS Validation (10/1/2005 10:30:10)

For the background, try 
background-image: url('../_includes/classic.gif');
and for the background color: 
background-color: #6595D6;
. Also, what validator are you using?



scottishagate -> RE: Struggling with CSS Validation (10/1/2005 10:34:03)

Sorry about the link, this is the real address http://redhunter.com/cmy/
The Validator messages -

background-image
#Warning: The shorthand background property is more widely supported than background-image.
background-repeat: repeat-x
#Warning: The shorthand background property is more widely supported than background-repeat.

If I change both to "background" I get other error messages.




scottishagate -> RE: Struggling with CSS Validation (10/1/2005 11:09:08)

Hi, Corey
I'm using the Validator at http://www.htmlhelp.com/tools/csscheck/
I have changed as you suggested. Now I get different error messages, thus

# Warning: The shorthand background property is more widely supported than background-color.
# background-image: url('../_includes/classic.gif')
Warning: The shorthand background property is more widely supported than background-image.
# background-repeat: repeat-x
Warning: The shorthand background property is more widely supported than background-repeat.

Seem to be going round in circles!



spitfire -> RE: Struggling with CSS Validation (10/1/2005 11:16:52)

The validator is giving you a warning, not an error message. It suggests that the shorthand form for all the background properties is better supported by (modern) browsers.
In your case you would use this code, which validates: 
#logo, #logo a {
background: #6595d6 url(../_includes/classic.gif) repeat-x;
color: white; }

instead of 
background: #6595D6; 
background-image: url(../_includes/classic.gif); 
background-repeat: repeat-x; 
color: white;

Opinions are mixed about whether you should include image URLs within single quotes or double quotes or no quotes at all - they all validate. Personally, I've had no problems using any of them, but it is best to be consistent through the site.

I could not get to the css validator (W3C) through the live site because of some validation problems with the html document itself: http://validator.w3.org/check?verbose=1&uri=http%3A//redhunter.com/cmy/ . Best to have a look at those (only 5) and fix them up as soon as you can.



coreybryant -> RE: Struggling with CSS Validation (10/1/2005 11:35:12)

And one thing to keep in mind, if you specify the font color, you should specify the background-color



spitfire -> RE: Struggling with CSS Validation (10/1/2005 11:46:00)

Or rather, a color for the background as in the first piece of code above. It doesn't necessarily have to be background-color: #6595d6.

Failure to provide either a color for the foreground/font or a color for the background will just give you a warning. On the W3C (jigsaw) css validator, many web sites are currently receiving loads of color pairing warnings. This check has been introduced relatively recently, or rather I should say, it has been re-introduced after about 2 years absence and has caught people out[8|]



scottishagate -> RE: Struggling with CSS Validation (10/1/2005 12:33:28)

Thanks, everyone. I will fix the errors in the homepage HTML. Some of them are FP code, e.g. if you want a line break, FP inserts <br> but it should be <br />, really annoying.
Hopefully it keeps my old brain active [;)]
Will get back to this tomorrow. Thanks meantime.



spitfire -> RE: Struggling with CSS Validation (10/1/2005 12:58:09)

That'll be FP5 for you, giving you HTML4.xx code - whereas you have moved on to xhtml - congrats.
Regards
Spitfire
ps try <style type="text/css"></style> Couldn't resist taking a look.
pps now... about the problems I'm having with my family history [image]http://www.cheesebuerger.de/images/more/bigs/c020.gif[/image]



scottishagate -> RE: Struggling with CSS Validation (10/1/2005 13:40:44)

quote:

ORIGINAL: spitfire
That'll be FP5 for you, giving you HTML4.xx code - whereas you have moved on to xhtml - congrats.

Crivvens maybe that's A Bridge Too Far, I don't even know the difference, or where I got that DocType header ....
quote:

try <style type=text/css></style>

Done that, thanks.
quote:

now... about the problems I'm having with my family history

If it's Scottish - mail me. [:D]



spitfire -> RE: Struggling with CSS Validation (10/1/2005 13:46:19)

Ooooops - quick edit above - caught out. Check out the quotes around text/css.
English, I'm afraid - Cornwall and Devon mainly - a real pain getting back beyond around 1800. Ah well back to the parish records[sm=devil.gif].



scottishagate -> RE: Struggling with CSS Validation (10/1/2005 19:13:45)

quote:

ORIGINAL: spitfire
Ooooops - quick edit above - caught out. Check out the quotes around text/css.
Ooops to you too! I already had the quotes, and just left them in, seems OK? Triumph, my page validates
http://validator.w3.org/check?uri=http%3A%2F%2Fredhunter.com%2Fcmy%2F
how do you get from there to the CSS validation?
Regret my stylesheet is in a hidden folder.



spitfire -> RE: Struggling with CSS Validation (10/1/2005 19:40:52)

Here you go:
http://jigsaw.w3.org/css-validator/

That's two of us up far too late for our own good [image]http://www.cheesebuerger.de/images/smilie/muede/c030.gif[/image]



scottishagate -> RE: Struggling with CSS Validation (10/2/2005 6:21:26)

Hi, Spitfire
Sunday morning - up and running ... well ... not quite ...
Thanks for link to W3C jigsaw validator, I hadn't realised I could validate the HTML and CSS in one go.
It's more forgiving than WDG validator, my CSS validates without all the warnings about background-color, text-align, etc. http://tinyurl.com/8hyg4
I realise it's still a mess and full of redundancies. Will keep picking at it.
I wish I could test CSS changes without continually updating, and perhaps breaking, my live site. Is there anything (free or cheap) that I could use locally? I have CSE HTML Validator Lite for html.



scottishagate -> RE: Struggling with CSS Validation (10/2/2005 6:27:38)

quote:

ORIGINAL: spitfire
In your case you would use this code, which validates: 
#logo, #logo a {
background: #6595d6 url(../_includes/classic.gif) repeat-x;
color: white; }


I forgot to say. I tried this, but must have misunderstood something. My logo/topbar shrank in height, and the footer bar completely lost the image. Hastily restored my messy code till I suss it out [:o]



spitfire -> RE: Struggling with CSS Validation (10/2/2005 7:05:43)

Should have been more explicit - sorry[:)]
That piece of code condenses just the three "background" declarations into a single (shorthand) line. You'll still need all the other bits and pieces that go with the #divs.
Easy and free validation:
Get this web developer toolbar for IE: http://www.nils.org.au/ais/web/resources/toolbar/
and this one for Firefox: http://chrispederick.com/work/webdeveloper

It's always best to preview your site in at least two browsers, because there can be rendering differences.
Both toolbars allow you to validate your html and css code locally or to validate on-line. But there are oodles more features to delight - have a great Sunday afternoon, playing err... experimenting with them[:D]



scottishagate -> RE: Struggling with CSS Validation (10/2/2005 8:00:09)

quote:

ORIGINAL: spitfire
Should have been more explicit - sorry[:)]
That piece of code condenses just the three "background" declarations into a single (shorthand) line. You'll still need all the other bits and pieces that go with the #divs.

Yes, I can see the logic. I just replaced the longer declarations. But must have missed a semicolon or curly bracket somewhere, and it fell over! Will try again, now I have those toolbars - the Firefox one is amazing.
I am making a copy of my web to play with. Grateful for your expertise. [sm=bowdown.gif]




spitfire -> RE: Struggling with CSS Validation (10/2/2005 8:23:57)

You're welcome.
That'll be a few more late nights/early mornings for you then[:D]



d a v e -> RE: Struggling with CSS Validation (10/2/2005 9:20:50)

try topstyle lite - free css editor might make things a bit easier for you
http://www.bradsoft.com/download/index.asp



scottishagate -> RE: Struggling with CSS Validation (10/2/2005 15:17:31)

Thanks so much, that looks very useful. [;)]



jaybee -> RE: Struggling with CSS Validation (10/3/2005 19:07:18)

quote:

This check has been introduced relatively recently, or rather I should say, it has been re-introduced after about 2 years absence and has caught people out:)


Ha ha ha yes, thanks Spit, we'd noticed. [:D]

What I don't get with that is I've specified a background colour in body or in the div but then when I use a nested div with a font colour I get a complaint. Mind you, I've not had time to look at it very closely to see exactly what the complaint is about and whether it makes sense.



spitfire -> RE: Struggling with CSS Validation (10/4/2005 6:05:46)

Hi Jaybee
I think it's all down to inherited values and trying to (en)force them using !important. [ http://www.w3.org/TR/CSS21/cascade.html section 6.2.1 ]
The WDG (htmlhelp) validator has always checked for colour-pairing. W3C could well have dropped it because !important became something of a "crutch made of straw" - it will crumble under user stylesheets and some accessibility options. Now, it's re-introduction seems to have been rationalized on accessibility grounds and a warning (or advisory, if you will) is issued for those developers who want to make their pages (relatively) accessible.

W3C also seem to have ventured further into outer-space and issue warnings for matching background and border colours. A real pain for those using menu lists and such like - hey ho[sm=rolleyes.gif]



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125