PDA

View Full Version : CSS validation question

BoR|S
04-17-2003, 03:07 AM
I made a sample CSS powered page yesterday which is located here (http://boris.8bit.co.uk/css-test2.html).

When I run W3C CSS Validator (http://jigsaw.w3.org/css-validator/validator?uri=http://boris.8bit.co.uk/css-test2.html) on my page, it says that:
Congratulations!
This document validates as CSS!

But reading next down the page, I see few warnings:
Warnings
URI : http://boris.8bit.co.uk/css-test2.html

Line : 7 Level : 1 You have no color with your background-color : body
Line : 14 Level : 1 You have no color with your background-color : #slogan
Line : 16 Level : 1 You have no color with your background-color : #logo
Line : 18 Level : 1 You have no color with your background-color : #login
Line : 20 Level : 1 You have no color with your background-color : #copy
Line : 22 Level : 1 You have no color with your background-color : #left1
Line : 24 Level : 1 You have no color with your background-color : #right1
Line : 26 Level : 1 You have no color with your background-color : #left2
Line : 28 Level : 1 You have no color with your background-color : #right2


The source code of the page is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS try</title>
<style type="text/css">
body { background-color:#f9f9f9; text-align:center }
#frame { width:636px; margin-right:auto; margin-left:auto;
margin-top:0px; padding:0px; text-align:left }
#borderleft { width:18px; height:440px;
background:url("_forum_bg_left.gif"); float:left }
#content { width:600px; height:440px; padding:0px;
float:left; text-align:center }
#slogan { background-color:#eee; width:600px; height:20px;
text-align:center }
#logo { background-color:#bbb; width:600px; height:60px;
text-align:center }
#login { background-color:#eee; width:600px; height:20px;
text-align:center }
#copy { background-color:#eee; width:600px; height:20px;
text-align:center }
#left1 { background-color:#ccc; width:440px; height:160px;
padding:0px; float:left }
#right1 { background-color:#ccc; width:160px; height:160px;
padding:0px; float:left }
#left2 { background-color:#ddd; width:440px; height:160px;
padding:0px; float:left }
#right2 { background-color:#ddd; width:160px; height:160px;
padding:0px; float:left }
#borderright { width:18px; height:440px;
background:url("_forum_bg_right.gif"); float:left }
</style>
</head>
<body>
<div id="frame">
<div id="borderleft"></div>
<div id="content">
<div id="slogan"></div>
<div id="logo">
<img src="logo.gif" border="0" width="600"
height="60" alt="Logo"></div>
<div id="login"></div>
<div id="left1"></div>
<div id="right1">
<img src="image1.gif" border="0" width="160"
height="160" alt="Image1"></div>
<div id="left2"></div>
<div id="right2">
<img src="image2.gif" border="0" width="160"
height="160" alt="Image2"></div>
<div id="copy"></div>
</div>
<div id="borderright"></div>
</div>
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!">
</a>
</p>
</body>
</html>


My questions are:

How do I need to modify my page so the validator won't show those warnings?
The page is not stick to the top, it has about 20px (I think) from the top, how can I stick it to the top?


Thanks in advance, and sorry for a somehow very long post ;-)
Zero Angel
04-17-2003, 06:02 AM
Boris! Good to see you.

Maybe try using the full hex values rather then the shortened hex values. Thats all i can think of for now.

Cya,
Zero Angel
Dynasty
04-17-2003, 06:14 AM
To fix the warnings simply add a color attribute to the places where you have a background-color attribute :P
BoR|S
04-17-2003, 08:25 AM
Originally posted by Zero Angel
Boris! Good to see you.

Maybe try using the full hex values rather then the shortened hex values. Thats all i can think of for now.

Cya,
Zero Angel

Good to see you too mate! =)

Anyway, it doesn't matter if the color values are in full hex for the CSS validator...

Originally posted by Dynasty
To fix the warnings simply add a color attribute to the places where you have a background-color attribute :P

Thanks Dynasty!
It solved the problem!
Now just waiting to re-upload the page...
animgirl
04-17-2003, 08:28 AM
Or instead of screwing with all those color values you could do
color: transparent;
animgirl
BoR|S
04-17-2003, 08:33 AM
Originally posted by animgirl
Or instead of screwing with all those color values you could do
color: transparent;
animgirl

Well that's right, but basicly what solves the problem is the addition of the color atribute. :cool:

P.S. I accidently pressed the edit button instead of quote and replyed you there in your msg, but then I seen it, and now it's fixed... :shy:
DCElliott
04-17-2003, 12:27 PM
And the validator sayeth: for every CSS colour, there shalt be a CSS background. And then the validator did looketh upon the web page, and the webpage was good.
dreuby
04-21-2003, 05:47 AM
Welcome back, BoR|S, we've missed you!

And DCElliott, I knew you wouldn't really desert us!