✔ Validation meiner CSS fehlerhaft? Versteh ich nicht

josDesign · 6. August 2006

Hallo!

Ich bekomm beim Validator meiner CSS folgenden Fehler:

Code:

Fehler
URI : file://localhost/TextArea

    * Zeile: 10

      Parse error - Unrecognized : <style type="text/css"> <!-- body { font-family:Verdana; font-size:12px; background-color:white; text-align:center; }

Was stimmt da nicht?

Hier die gesamte CSS:

HTML:

<style type="text/css">
<!--

body 
{
 font-family:Verdana;
 font-size:12px;
 background-color:white;
 text-align:center;
}

h1 {font-size:18px;color:#000000;margin:0px;}
h2 {font-size:14px;color:#000000;margin:30px 0px 0px 0px;}
h3 {font-size:13px;color:#000000;margin:25px 0px 0px 0px;}
h4 {font-size:14px;color:#000000;}
p {margin-top:0px;}

/* Für Quellcode-Beispiele im Text */
code
{
 font-size:14px;
 color:#0000cc;
}

/* Der Kasten mit dem Quellcode */
pre
{
 font-size:14px;
 color:#0000cc;
 padding:5px;
 border:1px dotted #999999;
 background-color: #fdfdfd;
 width:500px;
 margin:20px 0px 20px 20px;
 
}

p a:link, p a:visited, p a:active, p a:hover
{ 
  text-decoration:underline;
  font-weight:bold;
  color:#333333;
  font-size:12px;
}
p a:hover {
  color:#fcc300;

}
p a:active
{ 
  color:#fcc300;
}

/* Die Hyperlinks im Menü */
a.menu:link, a.menu:visited
{ 
  color:#cecfc6;
  text-decoration:none;
  font-weight:bold;
  font-size:12px;
}
a.menu:active 
{ 
  color:#eeeeee;
}
a.menu:hover{
  color:#fcc300;
}
/* Die Titelzeile */
#title {
height:75px;
padding:5px;
text-align:center;
background-color:black;
background-image:url(logo.gif);
background-position:right;
background-repeat:no-repeat;
}

/* Das Menü */
#menu {
color:#ffffff;
background-color:#868789;
text-align:right;
padding:2px 0px;
}

/* Der Inhalt */
#content {
border-top:1px solid #000000;
background-color:#f8f8f8;
padding:10px 20px;
color:#000000;
}
#footer {
color:#999999;
background-color:#f8f8f8;
font-size:9px;
text-align:right;
padding:2px 0px 0px 0px;
border-top:dotted 1px #999999;
background-image:url(Typo3_little.gif);
background-position:left;
background-repeat:no-repeat;
height:20px;
margin-top:50px;
}

/* DIVbox für Brotkrümelnavigation */
#breadcrumb {
font-size:9px;
color:#868789;
}
/*  Brotkrümelklasse  */
a.breadcrumbmenu {
text-decoration:none;
font-size:9px;
text-transform:uppercase;
color:#868789;
font-weight:normal;
}
a.breadcrumbmenu:hover {
color:#fcc300;
}
#breadcrumbBarriere {
display:none;
}
#menuBarriere {
display:none;
}
#untermenuBarriere {
display:none;
}
#footerBarriere {
display:none;
}
#infoBarriere {
display:none;
}
-->
</style>

Wäre für jede Hilfe dankbar!

ripkens · 6. August 2006

Wenn das ein CSS file ist, dann bitte

Code:

<style type="text/css">
<!--

und

-

Code:

->
</style>

entfernen, das kommt nur rein wenn es innerhalb HTML vorkommt.

Marcus

cngs · 6. August 2006

Ich nehme mal an dass du das aus einer Html-Seite hinauskopiert hast, denn bei der Fehlermeldung steht Zeile 10. Kannst du bitte den Header der HTML-Datei auch posten?

Gumbo · 6. August 2006

Ein CSS-Validator kann selbstverständlich nur CSS-Code prüfen. Doch die von Ripkens schon erwähnten Abschnitte sind eindeutig kein CSS sondern eher HTML. Daher die Fehlermeldung.

josDesign · 6. August 2006

OK, hmmm
Hier mal der gesamte Code:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Author" content="Josef Florian Glatz" />
<meta name="description" content="josDesign.at - Josef Florian Glatz. Hobbyfotograf und Hobby-Web- und Grafikdesigner" />
<meta name="keywords" content="Fotografie, Webdesign, Austria, Krumbach, 2851, Glatz, Josef Glatz, Tabellenloses Layout, ohne Tabellen, Gestaltung ohne Tabellen, tabellenloses Design, div zentrieren" />
<title>josDesign.at</title>
<!--  ###DOCUMENT_HEAD### start  -->
<style type="text/css">
<!--

body {
 font-family:Verdana;
 font-size:12px;
 background-color:white;
 text-align:center;
}

h1 {font-size:18px;color:#000000;margin:0px;}
h2 {font-size:14px;color:#000000;margin:30px 0px 0px 0px;}
h3 {font-size:13px;color:#000000;margin:25px 0px 0px 0px;}
h4 {font-size:14px;color:#000000;}
p {margin-top:0px;}

/* Für Quellcode-Beispiele im Text */
code {
 font-size:14px;
 color:#0000cc;
}

/* Der Kasten mit dem Quellcode */
pre 
{
 font-size:14px;
 color:#0000cc;
 padding:5px;
 border:1px dotted #999999;
 background-color: #fdfdfd;
 width:500px;
 margin:20px 0px 20px 20px;
 
}

p a:link, p a:visited, p a:active, p a:hover
{ 
  text-decoration:underline;
  font-weight:bold;
  color:#333333;
  font-size:12px;
}
p a:hover {
  color:#fcc300;

}
p a:active
{ 
  color:#fcc300;
}

/* Die Hyperlinks im Menü */
a.menu:link, a.menu:visited
{ 
  color:#cecfc6;
  text-decoration:none;
  font-weight:bold;
  font-size:12px;
}
a.menu:active 
{ 
  color:#eeeeee;
}
a.menu:hover{
  color:#fcc300;
}
/* Die Titelzeile */
#title {
height:75px;
padding:5px;
text-align:center;
background-color:black;
background-image:url(logo.gif);
background-position:right;
background-repeat:no-repeat;
}

/* Das Menü */
#menu {
color:#ffffff;
background-color:#868789;
text-align:right;
padding:2px 0px;
}

/* Der Inhalt */
#content {
border-top:1px solid #000000;
background-color:#f8f8f8;
padding:10px 20px;
color:#000000;
}
#footer {
color:#999999;
background-color:#f8f8f8;
font-size:9px;
text-align:right;
padding:2px 0px 0px 0px;
border-top:dotted 1px #999999;
background-image:url(Typo3_little.gif);
background-position:left;
background-repeat:no-repeat;
height:20px;
margin-top:50px;
}

/* DIVbox für Brotkrümelnavigation */
#breadcrumb {
font-size:9px;
color:#868789;
}
/*  Brotkrümelklasse  */
a.breadcrumbmenu {
text-decoration:none;
font-size:9px;
text-transform:uppercase;
color:#868789;
font-weight:normal;
}
a.breadcrumbmenu:hover {
color:#fcc300;
}
#breadcrumbBarriere {
display:none;
}
#menuBarriere {
display:none;
}
#untermenuBarriere {
display:none;
}
#footerBarriere {
display:none;
}
#infoBarriere {
display:none;
}
-->
</style>
<!--  ###DOCUMENT_HEAD### stop  -->
</head>
<body><!--  ###DOCUMENT_BODY### start  -->
<div id="infoBarriere"><b>Dies ist die barrierefreie Textversion meiner Homepage:</b></div>
<!--  Gesamter Inhalt  -->
<div style="width:760px;margin:0px auto;text-align:left;padding:10px">

<!--  Titelzeile  -->
<h1 id="title"><!--  ###UBERSCHRIFT### start  -->josDesign.at - Hobbiefotografie: Über<!--  ###UBERSCHRIFT### stop  --></h1>

<!--  Menüüberschrift Barriere -->
<div id="menuBarriere"><b>Hauptmen&uuml;:</b></div>
<!--  Menü  -->
<div id="menu"><!--  ###MENU1### start -->
<a class="menu" href="#">&Uuml;ber</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a class="menu" href="#">Feinstes</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a class="menu" href="#">Augenblicke</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a class="menu" href="#">Specials</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a class="menu" href="#">Tutorials</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a class="menu" href="#">Hotlinks</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a class="menu" href="#">Events</a>&nbsp;&nbsp;&nbsp;&nbsp;<!--  ###MENU1### start --></div>
<!--  Untermenü Barriere  -->
<div id="untermenuBarriere"><p><b>Untermen&uuml;:</b><br /><!--  ###MENU1_1B### start  --><a href="#">&Uuml;ber Mich</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">Mein Equipment</a>&nbsp;&nbsp;|&nbsp;&nbsp;<!--  ###MENU1_1B### stop  --></p></div>
<!-- Inhalts DIV -->
<div id="content">
<!--  Brotkruemelnavigation  -->
<div id="breadcrumbBarriere"><br /><p><b>Aufenthaltsort:</b></p></div>
<div id="breadcrumb"><!--  ###BREADCRUMB### start--><a href="#" class="breadcrumbmenu">home</a>&nbsp;>&nbsp;<a href="#" class="breadcrumbmenu">über</a><!--  ###BREADCRUMB### stop--></div><!--  ###CONTENT### start  -->Lorem Lipsum<!--  ###CONTENT### stop  --></div>
</div>
</div>
</div>
<!--  ###DOCUMENT_BODY### stop  -->
</body>
</html>

Maik · 7. August 2006

Ich empfehle dir hierzu das Kapitel SELFHTML: Unterschiede zwischen XHTML und HTML / Unterschied: Inhalt von Script- und Style-Bereichen.

Demnach muß in einem XHTML-Dokument der Style-Bereich in einem CDATA-Abschnitt ( <![CDATA[ ... ]]> ) notiert werden. Damit manche Browser dies nicht als Javascript-Code oder CSS interpretieren, werden sie von einem Kommentar umschlossen:

HTML:

<style type="text/css">
  /* <![CDATA[ */

  ...

  /* ]]> */
</style>

josDesign · 7. August 2006

OK, Danke!

Aber auf der Seite steht nicht ob man dann dennoch die Kommentare "" schreiben muss?!

Mit bsetem Dank im Vorraus
jos

Maik · 7. August 2006

Der HTML-Kommentar  wird eben durch den CDATA-Abschnitt ersetzt.

Alternativ hierzu könntest du auch vollständig auf den Kommentar verzichten, oder das Stylesheet in eine externe CSS-Datei auslagern.

josDesign · 7. August 2006

Ah, OK! Da Stylesheet werde ich erst mit Typo3 dynamisch auslagern. Danke vielmals!

Maik · 7. August 2006

Gern geschehen, und bitte vergesse nicht, das gelöste Thema als erledigt zu markieren.

✔ Validation meiner CSS fehlerhaft? Versteh ich nicht

josDesign

Erfahrenes Mitglied

ripkens

Erfahrenes Mitglied

cngs

Grünschnabel

Gumbo

Erfahrenes Mitglied

josDesign

Erfahrenes Mitglied

Maik

josDesign

Erfahrenes Mitglied

Maik

josDesign

Erfahrenes Mitglied

Maik

Neue Beiträge