Hallo Leute,
es geht um ein Template (Vorlage für eine Internet-Seite). Das Template an sich hat die W3C Überprüfung bestanden und ist 100% valide.
Das CSS (Cascading Style Sheet) aber zeigt nach W3C Überprüfung 1 Fehler („17 Die Regel @charset darf nur zu Beginn eines Stylesheets verwendet werden. Bitte überprüfen Sie, dass keine Leerzeichen davor zu finden sind. @charset „utf-8“;“) und 22 Warnungen* an 
Mir ist wichtig, dass alles 100% xhtml & CSS valide ist…
Wie kann ich den Fehler und die Warnungen beheben?
Das ist mein validiertes Cascading Style Sheet:
* {
margin : 0;
padding : 0;
outline : 0;
}
img {
border : 0;
}
.clear {
clear : both;
}
.line {
clear : both;
padding : 15px 0 0;
margin : 0 0 25px;
border-bottom : 1px solid #ddd;
}
body {
font : 0.8em Arial, Verdana, Tahoma, Sans-Serif;
background : #f4f4f4 url(…/images/bgtile.jpg) repeat-x;
color : #555;
}
a {
text-decoration : none;
color : #333;
}
p {
margin : 0 0 17px;
line-height : 1.6em;
}
h1, h2, h3, h4, h5 {
font-weight : normal;
}
h1 {
float : left;
font-size : 2.1em;
color : #fff;
letter-spacing : -1.4px;
margin : 0 0 30px 0;
padding : 34px 0 0 10px;
}
h1 a {
color : #fff;
}
h2 {
margin : 0 0 15px;
font-size : 1.9em;
color : #000;
}
h2.inner {
border-bottom : 1px solid #ddd;
margin : 0 0 25px;
padding : 0 0 10px;
}
h3 {
margin : 0 0 7px;
font-size : 1.3em;
clear : both;
color : #000;
line-height : 1.3em;
}
h4 {
margin : 0 0 10px;
font-size : 1.2em;
color : #000;
}
h5 {
font-size : 1em;
color : #eee;
margin : 0 0 14px;
}
#bg {
background : url(…/images/bg.jpg) no-repeat center top;
}
.wrap {
margin : 0 auto;
width : 960px;
}
#mainmenu {
float : right;
padding : 39px 0 0;
}
#menu ul {
float : right;
}
#menu li {
display : inline;
float : left;
margin : 0 0 0 18px;
}
#menu li a {
display : block;
color : #999;
padding : 7px;
font-size : 1.1em;
border : 1px solid transparent;
}
#menu a:hover, #menu li.current a {
border-color : #444;
}
#menu li ul {
top : 98px;
background : url(…/images/dot.png);
padding : 3px;
font-size : 0.92em;
position : absolute;
display : none;
z-index : 100;
}
#menu li ul li {
float : none;
display : inline;
margin : 0;
padding : 0;
clear : left;
}
#menu li ul li a {
color : #fff;
margin : 4px;
white-space : nowrap;
padding : 8px;
}
#menu li ul li a:hover {
background : #2c2d2f;
border-color : #2c2d2f;
}
#pitch {
clear : both;
height : 296px;
background : url(…/images/shadow.png) no-repeat left bottom;
margin : 0 0 25px;
}
#slideshow {
position : relative;
height : 310px;
}
#slideshow img {
float : left;
}
#slideshow div {
position : absolute;
top : 0;
left : 0;
z-index : 8;
}
#slideshow div.active {
z-index : 10;
}
#slideshow div.last-active {
z-index : 9;
}
#zoom {
z-index : 11;
}
.overlay {
clear : both;
float : left;
z-index : 100;
position : relative;
margin : 100px 0 0;
}
.overlay h2 {
color : #fff;
font-size : 2em;
background : url(…/images/dot.png);
padding : 16px;
margin : 0;
float : left;
width : 300px;
}
.overlay p {
clear : both;
background : #fff;
padding : 16px;
width : 300px;
}
#slideshow:hover .arrow {
background : url(…/images/dot.png);
}
.arrow {
float : right;
position : relative;
width : 65px;
height : 63px;
margin : -180px 0 0;
z-index : 100;
}
.arrow a {
float : left;
background : url(…/images/pitcharrow.gif) no-repeat center center;
width : 15px;
height : 24px;
padding : 19px 25px;
}
#inner-pitch {
clear : both;
}
#inner-pitch .overlay {
margin : 0;
width : 920px;
}
#main {
clear : left;
float : left;
width : 680px;
border-right : 1px dotted #ddd;
padding : 0 30px 0 0;
margin : 0 0 30px;
}
#intro {
padding : 0 0 20px;
margin : 0 0 25px;
border-bottom : 1px dotted #ddd;
}
.justify {
text-align : justify;
}
.left {
float : left;
margin : 0 15px 5px 0;
}
.right {
float : right;
margin : 0 0 5px 15px;
}
.table {
border-collapse : collapse;
width : 100%;
margin : 0 0 30px;
}
.table td {
padding : 10px;
border-bottom : 1px solid #ddd;
}
.table thead td {
font-weight : bold;
border-bottom : 3px double #ddd;
border-top : 1px solid #ddd;
background : #fff;
}
.table .odd td {
background : #fff;
}
.blog-post {
border-bottom : 1px solid #ddd;
margin : 0 0 30px;
}
.blog-date {
float : left;
width : 40px;
text-align : right;
font-size : 0.9em;
padding : 4px 0 0;
}
.blog-date span {
font-size : 1.8em;
}
.blog-body {
float : right;
width : 590px;
border-left : 1px solid #ddd;
padding : 0 0 0 22px;
}
#page ul, #page ol {
margin : 0 0 25px 27px;
}
#page li {
padding : 6px 0;
list-style : square;
}
.half, .third {
float : left;
width : 292px;
background : #fff;
padding : 15px;
margin : 0 30px 30px 0;
}
.third {
width : 175px;
}
.last {
margin-right : 0;
}
#bits {
clear : both;
margin : 0 0 25px;
}
.bit {
float : left;
width : 203px;
padding : 0 35px 0 0;
}
.bit h4 {
margin : 0 0 18px;
}
.bit img {
margin : 0 0 8px;
}
.bit p {
font-size : 0.9em;
}
.bit.last {
padding-right : 0;
}
.more {
margin : 0;
}
#side {
float : right;
width : 220px;
font-size : 0.9em;
}
#side h4 {
margin : 0 0 23px;
font-size : 1.3em;
}
.news {
border-bottom : 1px dotted #ddd;
margin : 0 0 11px;
}
.news h5 {
margin : 0 0 5px;
font-size : 1.2em;
}
.news p {
margin : 0 0 11px;
}
#quote {
margin : 0 0 30px;
padding : 20px 0 0 0;
font-size : 0.94em;
}
.side-menu li {
list-style : none;
padding : 10px 4px;
border-bottom : 1px solid #ddd;
}
fieldset {
border : 0;
}
label {
display : block;
color : #444;
padding : 0 0 2px;
}
input.text, textarea.text {
width : 250px;
padding : 5px;
border : 0;
border : 1px solid #ddd;
margin : 0 0 3px;
}
textarea.text {
width : 400px;
height : 120px;
}
input.submit {
color : #fff;
padding : 7px 10px;
border : 0;
font-weight : bold;
background : #777;
}
#footer {
clear : both;
color : #999;
background : url(…/images/footertile.jpg) repeat-x;
font-size : 0.9em;
}
#footerbg {
padding : 35px 0 15px 0;
background : url(…/images/footer.jpg) no-repeat center top;
}
#footer p {
margin : 0 0 12px;
padding : 6px 0;
}
#footer_menu {
float : right;
padding : 4px 0 0;
}
#footer a {
color : #999;
margin : 0 5px 0 0;
padding : 6px 10px;
background : url(…/images/dot.png) no-repeat left center;
border : 1px solid transparent;
}
#footer a:hover {
border-color : #555;
}
#fleft {
clear : both;
padding : 25px 0 0;
font-size : 0.94em;
}
#copy {
color : #777;
font-size : 1.5em;
}
#copy span {
color : #999;
}
*Das sind meine 22 Warnungen:
62 Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten .half und h1
62 Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten .overlay p und h1
62 Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten .table .odd td und h1
62 Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten .table thead td und h1
62 Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten .third und h1
68 Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten .half und h1 a
68 Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten .overlay p und h1 a
68 Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten .table .odd td und h1 a
68 Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten .table thead td und h1 a
68 Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten .third und h1 a
149 Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten .half und #menu li ul li a
149 Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten .overlay p und #menu li ul li a
149 Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten .table .odd td und #menu li ul li a
149 Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten .table thead td und #menu li ul li a
149 Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten .third und #menu li ul li a
155 #menu li ul li a:hover Gleiche Farbe für background-color und border-top-color
199 Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten .half und .overlay h2
199 Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten .overlay p und .overlay h2
199 Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten .table .odd td und .overlay h2
199 Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten .table thead td und .overlay h2
199 Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten .third und .overlay h2
470 Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten input.submit und #copy
