• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Firefox - CSS (ul und li) in <head>/CSS-extern

E

edv-rs

New member
Hallo,

ich bin kurz vor dem Kollaps.

Wenn ich die CSS-Angaben in eine externe Datei verfrachte macht ul und li bei Firefox Probleme. Ich dachte schon an den Cache, habe ihn gelöscht, da dies nichts geholfen hat, eine andere Seite CSS zugewiesen - gleicher Mißerfolg. IE keine Probleme.

Ist Euch etwas bekannt?

HTML: 
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Mein "Titel"</title>
<meta name="author" content="edv-rs">
<link rel="stylesheet" href="css/form.css" type="text/css">
<style type="text/css">
/* die folgende Zeile sichert die korrekte Darstellung der vier Bereich im Firefox */
* {margin:0; padding:0;}

/* Definitionsangaben zu Bereichen */
 #logo {
  width:100px;
  line-height:100px;
  float:left;
  }

 #ueberschrift {
  line-height:100px;
  color:#FF0000;
 }

 #navigation {
  width:170px;
  height:300px;
  position:relative;
  top:0px;
  left:0px;
 }

 #inhalt {
  position:relative;
  left:170px;
  top:-300px;
 }

 body {font-family: verdana,arial,sans-serif; font-size:100.01%; color:#0082FF;}
 li {margin-left:10px;}
 ul {list-style-type:none;}
-->
</style>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<div id="logo">
 Logo
 </div>

<div id="ueberschrift"> Überschrift </div>

<div id="navigation">
<ul>
<li><a href="index.html">Startseite</a></li>
<li><a href="abc.html">ABC</a></li>
<li><a href="def.html">DEF</a>
<ul><a href="ghi.html">GHI</a>
  <li><a href="ghi_1.html">GHI-1</a></li>
  <li><a href="ghi_2.html">GHI-2</a></li>
 </ul></li>
<li><a href="jkl.html">JKL</a>
</ul>
</div>

<div id="inhalt">
A<br />A<br />A<br />A<br />A<br />A<br />A<br />A<br />A<br />A<br />A<br />A<br />A<br />A<br />A
 Inhalt

</div>
</body>
</html>

Wenn ich den Style-Bereich hier lösche und die externe Datei verwende (identischen Inhalt von <syte... bis /style>!), hat die Anordnung der Navigation nicht hin, es steht alles zu weit rechts, obwohl *{margin:0; padding:0} dies ja verhindern sollte.

Gruß und Dank Rainer
 
Code: 
 </ul></li>
<li><a href="jkl.html">JKL</a>
</ul>
</div>
Dir fehlt hier noch ein schliessendes </li>
Code: 
 </ul></li>
<li><a href="jkl.html">JKL</a>[B]</li>[/B]
</ul>
</div>
 
Hallo,

Danke für den Hinweis, habe nun das Dokument durch die W3C-Validatoren geschickt (HTML und CSS - beides in Ordnung) leider differiert das Ergebnis immer noch stark.

Woran kann es liegen?

Gruß und Dank Rainer
 
Da ich keinen IE (Gott sei's gedankt) installiert habe, kann ich leider auch keinen Vergleich anstellen.
Schicke Dein Dokument mal hier durch: http://www.validome.org/
Wähle dazu 'Erweiterte Einstellungen' -> 'Quellcode anzeigen' aus.
Vielleicht ergibt sich ja was...
 
Hallo,

auch dieser Validator brachte keinen Fehler. Der Fehler tritt im Firefox auf, beim IE ist der Speicherort der CSS-Angaben (bei meinem konkreten Problem) ohne Auswirkung.

In meinem Codeschnipsel stehen die CSS-Angaben im <head>-Bereich. Wenn ich den Inhalt des <style>-Bereiches in eine externe CSS-Datei auslagere, sieht das Ergebnis ganz anders aus.

Ich hänge es mal eine Grafik an.

Gruß und Dank Rainer
 

Anhänge

  • css_problem.png
    css_problem.png
    4,8 KB · Aufrufe: 9
Versuche mal anstelle des * {margin:0; padding:0;} dieses hier auszuprobieren:
Code: 
html, body, div, span, p, h1, h2, h3, ul, li, a, acronym, cite, table, td, th, form, label, input, img {
  margin:0px;
  padding:0px;
  border:0px;
}
Oder versuche mal Deinen *-Angaben eine konkrete Anweisung zu geben: * {margin:0px; padding:0px;}
 
Hallo,

vielen Dank für die schnelle Antwort. Leider haben beide Änderungen (zuerst die Ergänzung px, dann Deine vollständige Liste) keine Änderung herbeigeführt.

Das CSS sollte i.O. sein, denn der Validator findet auch keinen Fehler. Ich könnte mich damit zufrieden geben, wenn ich das CSS ins Dokument packe klappt es ja, möchte aber gerne wissen, wo ich eventuell doch einen Fehler mache.

Gruß und Dank Rainer
 
Hallo,

leider nein, da es sich um eine lokale (Intranet) Seite handelt.

Hier nocheinmal das komplette HTML-Dokument (wegen der Korrekturen). Wenn der style-Bereich in eine externe CSS-Datei verschoben und der link-Tag angepasst wird, sollte der im Bild dargestellte Effekt zu sehen sein. Wenn nicht, muß es an meiner Konfiguration liegen.

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Mein "Titel"</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="css/form.css" type="text/css">
<style type="text/css">
<!--
/* die folgende Zeile sichert die korrekte Darstellung der vier Bereich im Firefox */
html, body, div, span, p, h1, h2, h3, ul, li, a, acronym, cite, table, td, th, form, label, input, img {
  margin:0px;
  padding:0px;
  border:0px;
}

/* Definitionsangaben zu Bereichen */
 #logo {
  width:170px;
  line-height:100px;
  float:left;
  }

 #ueberschrift {
  line-height:100px;
  background-color:#FFFFFF;
  color:#FF0000;
  text-align:center;
  font-size:120%;
 }

 #navigation {
  width:170px;
  height:300px;
  position:relative;
  top:0px;
  left:0px;
 }

 #inhalt {
  position:relative;
  left:170px;
  top:-300px;
 }

 body {font-family: verdana,arial,sans-serif; font-size:100.01%; color:#0082FF; background-color:#FFFFFF;}
 li {margin-left:10px; vertical-align:middle;}
 ul {list-style-type:none;}
 h2.zu {text-align:center; text-decoration:underline; font-style:italic;}

-->
</style>
</head>
<body>
<div id="logo">
 Logo
 </div>

<div id="ueberschrift"> Überschrift </div>

<div id="navigation">
<ul>
<li><a href="index.html">Startseite</a></li>
<li><a href="abc.html">ABC</a></li>
<li><a href="def.html">DEF</a></li>
<li><a href="ghi.html">GHI</a><ul>
  <li><a href="ghi_1.html">GHI-1</a></li>
  <li><a href="ghi_2.html">GHI-2</a></li></ul></li>
<li><a href="jkl.html">JKL</a></li>
</ul>
</div>

<div id="inhalt">
A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A
 Inhalt

</div>
</body>
</html>

Gruß und Dank Rainer
 
Tag Reiner (und Ihr anderen),

ich weiß nicht, ob sich Dein Problem schon geklärt hat. Fakt ist, bei mir hat der Firefox die CSS-Angaben gänzlich ignoriert, wenn ich sie in eine externe Datei geschrieben und dann eingebunden habe. Nach vier Stunden habe ich dann rausgefunden, daß der Firefox - im Gegensatz zum Internet Explorer keine Kommentare in der CSS-Datei mag. *schäm* Na gut, jedenfalls habe ich das "Problem" mit dem Firefox und den externen CSS-Angaben schon oft im Netz gelesen, und in den meisten der Fälle liegt es daran, daß die Leute Kommentare in ihrer CSS haben. Darf man ja nicht, hatte ich völlig verdrängt. :whacky: Liegt's vielleicht daran?

Anyway, ich drück' Dir die Daumen, dass es bei Dir mittlerweile geklappt hat.

LG

J@nni
 
Zuletzt bearbeitet:
Huch! Seh' ich ja jetzt erst...
<!-- --> geht gar nicht.
Ein html-Kommentar hat nix in einer css zu suchen...
 
Zuletzt bearbeitet:
:confused: wieso das <!-- Styleangaben --> nicht in der internen CSS-Datei?

Zitat aus Selfhtml

"Damit ältere Web-Browser, die keine Stylesheets kennen, den Inhalt des style-Elements nicht irrtümlich als anzuzeigenden Text interpretieren, können Sie den Inhalt in einen Seite HTML-Kommentar (<!-- ... -->) einbinde n ..." und genauso hab ich es bisher auch gehalten, bei internen CSS-Styles.

*grübel*
 
Moin!

Hier geht's ja um die externen Dinger und die dürfen's nich mit HTML treiben...

Ahoi - Pit
 
:confused:
Dann hab ich das jetzt völlig falsch verstanden - oder wie.
Ich hab nur oben die Codes gesehen und die standen eindeutig im Quelltext.

Wär schon besser gewesen mit nem Link - nich wahr. :D

LG Liz
 
Liz schrieb:
:confused: wieso das <!-- Styleangaben --> nicht in der internen CSS-Datei?

Zitat aus Selfhtml

"Damit ältere Web-Browser, die keine Stylesheets kennen, den Inhalt des style-Elements nicht irrtümlich als anzuzeigenden Text interpretieren, können Sie den Inhalt in einen Seite HTML-Kommentar (<!-- ... -->) einbinde n ..." und genauso hab ich es bisher auch gehalten, bei internen CSS-Styles.

*grübel*
Zum Vergrößern anklicken....

Genau, aber NUR bei internen, also direkt in der HTML-Datei eingebundenen Style-Sheets oder Style-Sheet-Definitionen, nicht aber in der der externen CSS-Datei, um z.B. die Elemente mit 'ner "Überschrift" zu versehen. ;)
 
Hallo,

vielen Dank für den Hinweis mit den Kommentaren. Leider hat es nicht geholfen, die Liste erscheint noch immer unterschiedlich, beim Firefox ist die Einrückung so stark, obwohl ich nun schon zwischenzeitlich den Versuch mit Klassen-CSS für die li-Tags unternommen habe.

Ich werde mal versuchen am Wochenende das Ganze hochzuladen und dann hier die Adresse mitteilen.

Gruß und Dank Rainer
 
Hallo,

bei mir sieht das im IE bzw. Mozilla gleich aus bzw. mit den Dateien im Anhang habe ich das getestet.

Screenshot
 

Anhänge

  • test.zip
    1 KB · Aufrufe: 2
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben