• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

kein CSS bei <!DOCTYPE... ?

T

TomArte

Neues Mitglied
Hallo, bin langsam am verzweifeln... sobald ich die ersten zwei Zeilen im folgenden HTML Code (Doctype...) einfüge, werden alle CSS Styles ignoriert. Ich verstehe das nicht. Lasse ich die Doctype-Angabe einfach weg, werden zwar die CSS Styles nicht mehr ignoriert, dafür funktioniert im IE das Lightbox Skript nicht richtig (die Bilder kleben dann am oberen Browserrand statt mit etwas Abstand zur oberen Kante). Ergänzend sollte ich noch erwähnen, daß der folgende Quelltext von einen PHP Script aus mit include geladen wird. Kann es daran liegen? Ich hoffe ich bin hier richtig, könnte natürlich auch ein html oder php Problem sein. Weiss jemand Rat??

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
 <script src="js/prototype.js" type="text/javascript"></script>
 <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
 <script src="js/lightbox.js" type="text/javascript"></script>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<base target="_self">
<style type="text/css">
 <!--
  input, select, textarea
    { font-size:12px; font-family:Arial, Helvetica, Futura, Verdana, sans-serif; font-weight:standard; }
  td
    { font-size:14px; font-family:Arial, Helvetica, Futura, Verdana, sans-serif; font-weight:standard; }
  input, select, textarea
    { color:#000000; }
  .Bereich
     { background-color:#e1e1e1; width:336px; border:1px solid #000000; }
  .Feld
    { background-color:#cccccc;  border:1px solid #000000; }
  .Auswahl
    { background-color:#E6E4B3;  border:1px solid #000000; font-size:12px }
  .Button
    { font-weight:bold; background-color:#e1e1e1; color:#000000; width:150px; height:23px; border:1px solid #000000; }
  .Button1
    { font-weight:bold; background-color:#333333; color:#c0c0c0; width:30px; height:19px; border:1px solid #000000; }
  .Button2
    { font-weight:standard; background-color:#666666; color:#000000; width:90px; height:19px; border:1px solid #333333; }
  .Fontklein1
    { font-size:10px; font-family:Arial, Helvetica, Futura, Verdana, sans-serif; color:#000000; font-weight:standard;}
  .Fontklein0
    { font-size:11px; font-family:Arial, Helvetica, Futura, Verdana, sans-serif; color:#cccccc; font-weight:standard;}
  .Fontklein4
    { font-size:11px; font-family:Arial, Helvetica, Futura, Verdana, sans-serif; color:#000000; font-weight:standard;}
  .Fontpreis1
    { font-size:12px; font-family:Arial, Helvetica, Futura, Verdana, sans-serif; color:#cccccc; font-weight:bold;}
  .Fontpreis0
    { font-size:12px; font-family:Arial, Helvetica, Futura, Verdana, sans-serif; color:#cccccc; font-weight:standard;}
  .Fontgross1
    { font-size:14px; font-family:Arial, Helvetica, Futura, Verdana, sans-serif; color:#000000; font-weight:bold;}
  .Fontangebot
    { font-size:14px; font-family:Arial, Helvetica, Futura, Verdana, sans-serif; color:#000000; font-weight:bold;}
 h1 { font-size:28px; font-family:Arial, Helvetica, Futura, Verdana, sans-serif; color:#cccccc; font-weight:standard;}
 h2 { font-size:16px; font-family:Arial, Helvetica, Futura, Verdana, sans-serif; color:#cccccc; font-weight:standard;}
 h3 { font-size:15px; font-family:Arial, Helvetica, Futura, Verdana, sans-serif; color:#cccccc; font-weight:standard;}
 p  { font-size:13px; font-family:Arial, Helvetica, Futura, Verdana, sans-serif; color:#cccccc; font-weight:standard;}
 .bordered { border:0px solid #aaa; }
 a:link { font-weight:standard; color:#000000; text-decoration:none; }
 a:visited { font-weight:standard; color:#000000; text-decoration:none; }
 a:focus { font-weight:standard; color:#000000; text-decoration:none; }
 a:hover { font-weight:bold; color:#ff0000; text-decoration:none; }
 a:active { font-weight:standard; color:#000000; text-decoration:none; }
 BODY {scrollbar-face-color: #000000;
          scrollbar-shadow-color: #cccccc;
          scrollbar-highlight-color: #cccccc;
          scrollbar-3dlight-color: #000000;
          scrollbar-darkshadow-color: #000000;
          scrollbar-track-color: #000000;
          scrollbar-arrow-color: #cccccc;
          bgproperties: fixed; } -->
</style>
<style fprolloverstyle="" type="text/css">
  <!--
  A:hover {color: #FF0000}
  -->
</style>
<script language="JavaScript1.2" fptype="dynamicanimation" src="../animate.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
 <!--
 function MM_openBrWindow(theURL,winName,features) { //v2.0
 window.open(theURL,winName,features);
 }
 -->
</script>
<style fprolloverstyle="" type="text/css">
 A:hover {font-weight: bold}
</style>
</head>
 
versuch mal das
<base target="_self">

rauszunehmen oder am Ende mit / zu schliessen:
<base target="_self" />

aber besser raus ;)
klappts dann?
 
Habs probiert. Liegt aber nicht daran. Ich habe das mal extrem verschlankt (siehe Quelltext), selbst dann tritt dieses Problem auf.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="XHTML namespace" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

<style type="text/css">
<!--
p { font-size:13px; font-family:Arial, Helvetica, Futura, Verdana, sans-serif; color:#cccccc; font-weight:standard;}
-->

</style>
</head>
 
Moin,

in XHTML müsen inhaltsleere tags mit einem Slash geschlossen werden, also nicht
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="XHTML namespace" xml:lang="en" lang="en">
sondern
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" />
<html xmlns="XHTML namespace" xml:lang="en" lang="en" />
Ich vermute mal, dass es daran liegt.
 
So, vielen Dank für eure Hilfe. Ich habs aber mittlerweile selbst rausgefunden. Mit der Doctype-Anweisung verweise ich ja auf xhtml statt wie vorher auf html. Im Unterschied zu html unterscheidet xhtml zwischen Groß- und Kleinschreibung. Ich hatte die Classen bei Definition alle am Anfang groß geschrieben. Im eigentlichen Script aber dann klein. Deshalb hat xhtml alle Formatierungen ignoriert. Außerdem kennt xhtml einige Anweisungen nicht die ich verwendet habe (wie z.B. height in Tabellen). Bisher habe ich mich nie mit xhtml befassen müssen, deshalb waren mir die Unterschiede nicht klar.
 
TomArte schrieb:
Im Unterschied zu html unterscheidet xhtml zwischen Groß- und Kleinschreibung.
Zum Vergrößern anklicken....
Wenn ich bislang richtig aufgepasst habe, hat das nichts mit html oder xhtml zu tun, sondern mit dem Server. Windows ist die Groß- oder Kleinschreibung völlig "Wurscht", Linux hingegen ist da äusserst empfindlich.
Vielleicht hast Du ja den Hoster gewechselt, der alte Hoster hatte ein WIN-System, der neue Linux. Oder Du hast das Webpack gewechselt, das neue läuft auf Linux, das alte auf einem WIN-System.
 
@low: Über Post #4 denken wir aber noch mal nach. ;)

Sorry, ich habe gerade nicht mehr die Energie, längere Texte zu formulieren, aber hier liegt meiner Meinung nach noch einiges im Argen, was diverse Aussagen und Annahmen betrifft.
 
TomArte schrieb:
Mit der Doctype-Anweisung verweise ich ja auf xhtml statt wie vorher auf html. Im Unterschied zu html unterscheidet xhtml zwischen Groß- und Kleinschreibung. Ich hatte die Classen bei Definition alle am Anfang groß geschrieben. Im eigentlichen Script aber dann klein.
Zum Vergrößern anklicken....

Das Finden des Fehlers ist richtig, die Begründung falsch. Ohne DOCTYPE wird die Seite im quirks mode gerendert, mit DOCTYPE im standards mode. Ersterer lässt dir die abweichende Groß-/Kleinschreibung offenbar durchgehen, letzterer nicht (auch in HTML 4.01 nicht).

- DOCTYPE-Switch und seine Auswirkungen

Tags in XHTML müssen aber laut Standard in der XML-konformen Variante von HTML geschrieben werden, das heißt klein. Das passt. Ob das tatsächlich Auswirkungen auf das Rendering-Verhalten von Browsern hat, weiß ich nicht, bezweifle es aber.

Deshalb hat xhtml alle Formatierungen ignoriert. Außerdem kennt xhtml einige Anweisungen nicht die ich verwendet habe (wie z.B. height in Tabellen). Bisher habe ich mich nie mit xhtml befassen müssen, deshalb waren mir die Unterschiede nicht klar.
Zum Vergrößern anklicken....

Auch das ist ziemlich sicher ein Unterschied zwischen quirks mode und standards mode, hat jedenfalls nichts mit XHTML zu tun. Wenn ich gerade richtig geguckt habe, existiert das height-Attribut für table-Elemente in HTML spätestens ab Version 4 überhaupt nicht.

lowsaxonian schrieb:
Wenn ich bislang richtig aufgepasst habe, hat das nichts mit html oder xhtml zu tun, …
Zum Vergrößern anklicken....

Jip.

… sondern mit dem Server. Windows ist die Groß- oder Kleinschreibung völlig "Wurscht", Linux hingegen ist da äusserst empfindlich.
Zum Vergrößern anklicken....

Das gilt für Pfadnamen (Verzeichnisse und Dateien). Das Betriebssystem hat keinerlei Auswirkungen auf den HTML-Code selbst. (Edit: Ich meine wohl eigentlich: Auf die Interpretation von CSS.)
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben