Hello duds i have a question

Get Started
1

Hi for school i have made a website, but the problem is i have errors in my css style.
Can someone help me.
I have juse the validator.w3.org, but i dont understand it.
My code is:
/----- Start “Main definitions” -----/

  • { padding: 0; margin: 0; outline: 0; }

body {
font-size: 12px;
line-height: 1.5;
font-family: Arial, “Trebuchet MS”, Tahoma sans-serif;
color: #4a4a4a;
background: #f6f6f6 url(images/body-bg.gif) repeat-x 0 0;
text-align: left;
}

a img { border: 0; }
a { color: #037bb9; text-decoration: underline; }
a:hover { text-decoration: none; }

.cl, .clear { display: block; height: 0; font-size: 0; line-height: 0; text-indent: -4000px; clear: both; }
/----- End “Main definitions” -----/

#page { width: 952px; margin: 0 auto; padding: 0 10px; }

h1, h2, h3, h4, h5, h6 {
font-family: “Trebuchet MS”, Tahoma, Arial, Sans-Serif;
color: #2b2b2b;
font-weight: normal;
}
h1 { font-size: 23px; }
h2 { font-size: 20px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
h5 { font-size: 15px; }
h6 { font-size: 14px; }

ul { padding-left: 15px; }

#header { padding: 20px 12px 15px 3px; }
#header .description { font-family: “Trebuchet MS”, Tahoma, Arial, Sans-Serif; font-size: 11px; color: #9c9c9c; text-transform: uppercase; line-height: 1; }
#header h1 { line-height: 1.1; }
#header h1 a { color: #2b2b2b; text-decoration: none; }

#navigation { float: right; display: inline; font-size: 11px; line-height: 1.5; text-transform: uppercase; padding-top: 10px; }
#navigation ul li { float: left; display: inline; list-style-type: none; padding-right: 18px; margin-right: 14px; background: url(images/nav-sep.gif) repeat-y right 0; }
#navigation ul li.last { margin-right: 0; padding-right: 0; background: none; }
#navigation ul li a { color: #7f7f7f; text-decoration: none; }
#navigation ul li a:hover { text-decoration: underline; }
#navigation ul li.active a { color: #000; }

#slideshow { height: 454px; width: 962px; position: relative; left: -5px; }
#slideshow .bg { height: 454px; width: 962px; background: url(images/slider.png) no-repeat 0 0; }
#slideshow .cnt { padding: 42px 36px 0 36px; }
#slideshow .big-image { margin-bottom: 12px; }
#slideshow .big-image img { padding: 2px; border: solid 1px #d5d5d5; }

#slider { width: 890px; position: relative; }
#slider .buttons span { display: block; width: 38px; height: 37px; font-size: 0; line-height: 0; text-indent: -4000px; cursor: pointer; }
#slider .buttons span { position: absolute; top: 21px; }
#slider .buttons .prev { left: 0; background: url(images/button-prev.gif) no-repeat 0 0; }
#slider .buttons .next { right: 0; background: url(images/button-next.gif) no-repeat 0 0; }
#slider .holder { width: 790px; height: 78px; margin: 0 auto; position: relative; overflow: hidden; }
#slider .content { position: absolute; top: 0; left: 0; width: 100000px; }
#slider .content ul { float: left; display: inline; padding-left: 0; }
#slider .fragment { float: left; display: inline; list-style-type: none; }
#slider .fragment a { float: left; display: inline; width: 133px; height: 72px; padding: 3px; background: url(images/slider-fragment.gif); margin: 0 10px; }

Content { padding: 0 5px 10px 5px; }
Content p { padding-bottom: 18px; }
Content .separator { padding-right: 18px; background: url(images/col-sep.gif) no-repeat right 10px; }
Content .left-col { float: left; display: inline; width: 395px; }
Content .right-col { float: right; display: inline; width: 505px; }

.linklist { padding-left: 0; }
.linklist li { padding-left: 7px; background: url(images/linklist-ico.gif) no-repeat 0 7px; list-style-type: none; }

#footer { background: url(images/footer-line.gif) no-repeat center 0; padding: 20px 18px; }

thans a lot

2

body {
font-size: 12px;
line-height: 1.5;
font-family: Arial, “Trebuchet MS”, Tahoma sans-serif;
color: #4a4a4a;
background: #f6f6f6 url(images/body-bg.gif) repeat-x 0 0;
text-align: left;
}
should be a comma between Tahoma and sans-serif

And below, I think, but not totally sure, that sans-serif is all lower case (although that shouldn’t be flagged as an error.)

h1, h2, h3, h4, h5, h6 {
font-family: “Trebuchet MS”, Tahoma, Arial, Sans-Serif;
color: #2b2b2b;
font-weight: normal;
}

Without a live site and the actual error messages, can’t be sure what else is wrong.

PS We’re not duds, we’re dudes…

3

Pasting your code into the validator, it came out all fine; although Dr John’s comments should be considered anyway.

Speak for yourself. :wink: :lol:

4

The CSS Error you will have received is as follows:

This has been previously explained you need to separate the font names by a coma, and if the font name has a space within it , e.g. Times New Roman it would be written; “Times New Roman” within the CSS.

However, it is likely you’ll have also advisory warning messages:

Which basically means; make sure there isn’t an “inherited/cascade issue” with background colours overlapping or conflicting in the absence of other background images, or colours defined earlier in the CSS, etc.

5

Yes, I meant Com[m]a-separated; I think ‘coma’ would be a little excessive. :wink:

CSS style sheets are case-insensitive except for parts that are not under the control of CSS. Hmm, sans-serif is actually a ‘keyword’ so really it should be lowercase but in practice the browser will probably accept it.

I’ll just reiterate if you chose let’s say for example; a font colour of white it would be good to give it a different background to white, etc. It’s just warning you to make sure your background has been set elsewhere.

6

thanks dudes (my englisch is not verry well) haha.
But i don’t have errors any more.