7 replies to this topic

[Laurens]

Hello,

I am using Etomite for 2 months now and i like it a lot :-)
I am using the default template and changed some things to my own needs.


My html is now w3c valid (ours and ours of searching and trying over and over again, because i am not a programmer)

But now i want to validate the css part with the w3c css validator. W3c css-validator
After the online check this is the result:

Warnings
URI : file://localhost/style.css

* Line : 33 (Level : 1) You have no color with your background-color : .mainTable
* Line : 57 (Level : 1) You have no background-color with your color : th
* Line : 57 (Level : 1) You have no background-color with your color : th
* Line : 73 (Level : 1) You have no background-color with your color : a
* Line : 83 (Level : 1) You have no background-color with your color : a:hover
* Line : 101 (Level : 1) You have no color with your background-color : .navigation
* Line : 113 (Level : 2) Redefinition of margin-bottom : .navigation a
* Line : 113 (Level : 2) Redefinition of margin-bottom : .navigation a:hover
* Line : 115 (Level : 2) Redefinition of margin-top : .navigation a:hover
* Line : 115 (Level : 2) Redefinition of margin-top : .navigation a
* Line : 123 (Level : 1) Same colors for background-color and border-top-color : .navigation a:hover
* Line : 123 (Level : 1) Same colors for background-color and border-left-color : .navigation a:hover
* Line : 123 (Level : 1) Same colors for background-color and border-top-color : .navigation a:hover
* Line : 123 (Level : 1) Same colors for background-color and border-left-color : .navigation a:hover
* Line : 123 (Level : 1) Same colors for background-color and border-right-color : .navigation a:hover
* Line : 123 (Level : 1) Same colors for background-color and border-right-color : .navigation a:hover
* Line : 157 (Level : 1) You have no background-color with your color : .headers a:hover
* Line : 157 (Level : 1) You have no background-color with your color : .headers a:hover
* Line : 167 (Level : 1) You have no color with your background-color : .highLight
* Line : 179 (Level : 1) You have no color with your background-color : .fancyRow
* Line : 187 (Level : 1) You have no color with your background-color : .fancyRow2
* Line : 273 (Level : 1) You have no background-color with your color : .silent
* Line : 283 (Level : 1) You have no background-color with your color : .silent:hover
* Line : 299 (Level : 1) You have no color with your background-color : .logoBox
* Line : 375 (Level : 1) You have no color with your background-color : td.basic
* Line : 381 (Level : 1) Family names containing whitespace should be quoted. If quoting is omitted, any whitespace characters before and after the name are ignored and any sequence of whitespace characters inside the name is converted to a single space. : .fauxbutton
* Line : 403 (Level : 1) You have no background-color with your color : h1
* Line : 423 (Level : 1) You have no background-color with your color : .boldtitle

Valid CSS information

* body {
o text-align : center;
o background-color : #ffffff;
o color : #000000;
o font-family : Verdana, Arial, Helvetica, sans-serif;
}
* .w22 {
o width : 22%;
}
* .mainTable {
o border-top : 1px solid #003399;
o border-left : 1px solid #003399;
o border-right : 1px solid #003399;
o width : 740px;
o background : #fff url(../../manager/media/images/bg/section.jpg) no-repeat top right;
o margin : 0 auto;
o text-align : left;
}
* .mainTable tr td {
o padding : 4px;
}
* body, td, th {
o font-size : 11px;
o color : #000;
}
* a, a:hover {
o text-decoration : underline;
}
* a {
o color : #821517;
o text-decoration : none;
}
* a:hover {
o color : #821517;
o text-decoration : underline;
}
* .navigation {
o padding : 0;
o margin : 0;
o height : 100%;
o border : 1px solid #003399;
o background : #fff url(../../manager/media/images/bg/section.jpg) no-repeat top right;
}
* .navigation a, .navigation a:hover {
o padding : 4px;
o margin : 6px;
o margin-bottom : 2px;
o margin-top : 2px;
o display : block;
o color : #000000;
o border : 1px solid #ffffff;
o background : #fff url(../../manager/media/images/bg/section.jpg) no-repeat top right;
}
* .navigation a:hover {
o padding : 4px;
o text-decoration : none;
o color : #821517;
o background : #fff url(../../manager/media/images/misc/buttonbar.gif) repeat-x top;
o border : 1px solid #003399;
}
* .headers {
o font-size : 12px;
o font-weight : bold;
}
* .headers a, .headers a:hover {
o color : #000000;
o text-decoration : none;
}
* .highLight {
o background : #fff url(../../manager/media/images/misc/buttonbar.gif) repeat-x top;
o font-weight : bold;
o border : 1px solid #000000;
}
* .fancyRow {
o background : #fff url(../../manager/media/images/misc/buttonbar_gs.gif) repeat-x top;
}
* .fancyRow2 {
o background : #fff url(../../manager/media/images/misc/buttonbar.gif) repeat-x top;
}
* body {
o background : #fff url(../../manager/media/images/bg/treeback.jpg) repeat-x top;
}
* .border-top-bottom {
o border-top : 1px solid #003399;
o border-bottom : 1px solid #003399;
}
* .navigationHead {
o text-align : center;
o font-weight : bold;
o border-top : 1px solid #003399;
o border-left : 1px solid #003399;
o border-right : 1px solid #003399;
}
* .smallText {
o font-size : 9px;
}
* .text {
o width : 154px;
}
* img {
o border : 0;
}
* li {
o padding : 0;
o margin : 6px 0 0 15px;
o list-style : disc url("../../manager/media/images/misc/li.gif");
}
* ul {
o margin : 0 0 0 20px;
}
* .silent {
o color : #000000;
o text-decoration : none;
}
* .silent:hover {
o color : #000000 !important;
o text-decoration : none !important;
}
* .logoBox {
o padding : 4px;
o margin : 4px;
o border : 1px solid #003399;
o background : #fff url(../../manager/media/images/bg/section.jpg) no-repeat top right;
}
* fieldset {
o padding : 5px;
}
* legend {
o font-weight : bold;
}
* legend a, legend a:hover {
o display : block;
o text-decoration : none;
}
* .u {
o text-decoration : underline;
}
* .strike {
o text-decoration : line-through;
}
* .content {
o width : 84%;
o height : 206px;
}
* .mono {
o font-family : "Courier New", Courier, mono, sans-serif;
}
* td.basic {
o background-color : #ffffff;
o vertical-align : top;
}
* .fauxbutton {
o font : 11px Verdana, Tahoma, Arial, Trebuchet MS, Sans-Serif, Georgia, Courier, Times New Roman, Serif;
o border : 1px solid #003399;
o background-color : #f7cc76;
o padding : 2px;
o color : #000000;
}
* .boldtext {
o font-weight : bold;
}
* h1 {
o font-size : 13px;
o color : #003399;
o margin-left : 0;
o margin-top : 0;
o margin-right : 0;
o margin-bottom : 6px;
}
* .boldtitle {
o font-size : 12px;
o font-weight : bold;
o color : #003399;
o margin-left : 0;
o margin-top : 4px;
o margin-right : 0;
o margin-bottom : 4px;
}
* p.notop {
o margin-top : 0;
}
* acronym {
o cursor : pointer;
o border-bottom : 1px dashed #000000;
}
* #countdown1 {
o font-weight : bold;
o font-size : 16px;
}

Is there a css specialist out there who can help me validating the style.css ?
i am using the standard style.css provide with the default template.

I have read some post about validating css and yes i have to go to css school , but maybe someone can help me anyway.
[ my html is valid right now ] So thats my first step!

Laurens

[mikef]

My view is that if it just issues warnings, rather than errors, then the CSS is 'valid', and the warnings are there simply to help you check some things that might be mistakes (and might give differenet results with different browsers - though code with no warnings does that too!). After all, the W3C CSS valiadtor starts by saying the code is valid, before it issues the warning.

[Ralph]

As mikef has pointed out, these are merely warnings and not actual errors... This problem arises when you attempt to use CSS components which are only IE related... But the color needing to have an accompanying background-color has been addressed in the manager styesheet for the RTM, or at least I think I got it completed... You will find that the more strict your (X)HTML DOCTYPE the more strict the CSS will also become... I'm running out of time so I doubt that I'll include a perfect stylesheet in the RTM although I'm sure someone may take the time to work out the bugs and post the resulting file...

[Laurens]

Ralph (rad14701), on Jan 17 2006, 12:49 AM, said:

As mikef has pointed out, these are merely warnings and not actual errors... This problem arises when you attempt to use CSS components which are only IE related... But the color needing to have an accompanying background-color has been addressed in the manager styesheet for the RTM, or at least I think I got it completed... You will find that the more strict your (X)HTML DOCTYPE the more strict the CSS will also become... I'm running out of time so I doubt that I'll include a perfect stylesheet in the RTM although I'm sure someone may take the time to work out the bugs and post the resulting file...

I just wondered if maybe someone already did that?
Why invent the wheel if its already invented?

I know a littelbit about html and php but css is totally new for me, any css professional? Who can solve these css warnings?
I already changed 1 thing. I changed the mouse over thing from hand to pointer, so you thats why you dont find that one in the posted listing.

[mikef]

They don't need 'solving'. Unless you want to go through your CSS changing things so that inherited defaults are made explicit just to clear the warnings ... and then have lots more places to change later when you decide to change the colour schemes (for example) and have to stop and think at each one whether it needs to be changed or not.

[doze]

Don't know if it's included in the RTM release allready, but there is a tableless version of alexisproredux here. Maybe that validates better? Haven't used it my self, so this is just a thought..

[Jeroen]

Yeah, that is a nice template. That must some cool customer who made that one!! :betterwink:

It is VALIDE XHTML and CSS. But there are still warnings... BUT as mentioned:

You want those warnings!

If you don't get them, and specify every color with a backgoundcolor (and viceversa), you don't use inheritance. And you've added quite a lott of non-information. It only makes your file bigger. It only makes it more work to change something. It sure doens't help you learning how to make the most of the object oriented thing.

You realy shouldn't wory about them. You should read 'warning' more like 'Did you notice that...?'.

I've used it only once. I was doing very minor color adjustments on a computer with a bad monitor and I could hardly see the difference. Then I noticed that some classes didn't gave a warning so then I knew I had to change some more (I removed the background setting, thus keeping the error (the only thing that makes sense to do))

[hechacker1]

doze, on Jan 17 2006, 09:41 AM, said:

Don't know if it's included in the RTM release allready, but there is a tableless version of alexisproredux here. Maybe that validates better? Haven't used it my self, so this is just a thought..

heh, thread hijack.. but your sig is funny! LOL