Doctype und CSS

M

Milbex

0
Hi Leute,
ich habe ein ziemlich doofes Problem. Und zwar, dass ich eine Seite habe, bei der ich den XHTML 1.0 Transitional Doctype verwende. Nun ist mein Prob, dass ich eine externe CSS-Datei einbinden will. Ich kann mit meinem Doctype Farben, aber nichts anderes (font-size, font-family, position:relative/absolute etc.) darstellen. Wenn ich allerdings den Doctype wegnehme, stellt mein Mozilla Firefox die Seite richtig dar.
Ich habe auch schon andere Doxtypes versucht, ist aber immer das selbe, wie mit dem XHTML Transitional.

Hier meine index.html:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>CSS --- Doctype</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    
    <p>Hier der Text wird formatiert...</p>
    <div>Dieser Text wird anders formatiert als der Andere...</div>
    
  </body>
</html>
und mein externes Stylesheet style.css:
Code: 
p    {color:green;
    position:absolute; left:100; top:100
}

div    {color:blue
    font-size:22;
}
Ich habe es auf das Wichtigste begrenzt.
Würde mich über schnelle Antworten freuen.

mfG Milbex
 
Schlichte Antwort: Dein CSS ist kaputt.

Wenn du keinen Doctype (oder einen alten) angibst, geht der Browser in den Quirks-Modus und rendert kaputtes HTML und CSS.
Wenn du einen korrekten XHTML-Doctype verwendest ist der Browser in Standards-Compliance-Modus und ignoriert kaputte oder ungültige HTML/CSS-Kontruktionen.
Also musst du nur korrektes CSS schreiben, dann geht's auch im XHTML-Doctype.

Was genau ist bei dir kaputt?
1. nach "color:blue" ist kein Semikolon. Damit verschmilzt die Regel mit der nächsten Zeile
2. Größenangaben und Abstände müssen immer mit Einheit angegeben werden (außer der Wert 0). Also normalerweise "px" (für Pixel)

Insgesamt muss dein CSS also lauten:
Code: 
p    {
    color: green;
    position: absolute;
    left: 100px;
    top: 100px;
}

div    {
    color: blue;
    font-size: 22px;
}

mfg, metax.
 
Alles, was vorher schon gesagt wurde .. und darüber hinaus ist "<link>" ein in sich geschlossenes Element. Das heißt, dir fehlt ein Slash am Ende:
HTML: 
<link rel="stylesheet" type="text/css" href="style.css" />

Tipp: Es gibt sowohl für (X)HTML als auch für CSS vom World Wide Web Consortium sog. "Validators", welche den entsprechenden Code auf Richtigkeit überprüfen und ggf. Fehler und Warnungen ausgeben, falls dein Code nicht richtig oder standardkonform ist und meistens sogar Verbesserungen anregen.
 
Um antworten zu können musst du eingeloggt sein.
Zurück
Oben