Supportnet Computer
Planet of Tech

Supportnet / Forum / Webseiten/HTML

Firefox zeigt mein CSS nicht an!





Frage

Hallo Zusammen! Ich habe folgendes Problem: Meine ganze Website, also alle Seiten werden im Firefox ohne das CSS angezeigt. Im IE7 funktioniert alles tiptop aber beim FF2 (& 1.5) wird alles was ich mit CSS gemacht habe nicht angezeigt. An was könnte das liegen?? Auf den meisten meiner Seiten habe ich nicht mehr als das in CSS: [quote]<style type="text/css"> a {text-decoration:none; color="black"; font-size=x-large;} a:visited {text-decoration:none; color="black";} </style>[/quote] Meistens noch n bisschen mehr, aber nichts abartig kompliziertes... Danke schon jetzt für hilfreiche Antworten! Gruss MaLi

Antwort 1 von Supermax

1. das = ist falsch, CSS ist immer
attribut:wert;


2. Die Farbangabe sollte auch nicht in "" stehen

Antwort 2 von rfb

Zitat:
Auf den meisten meiner Seiten habe ich nicht mehr als das in CSS:

Schade eigentlich, denn mit CSS macht Gestalten erst richtig Spass!

Zitat:
<style type="text/css">
a {text-decoration:none; color="black"; font-size=x-large;}
a:visited {text-decoration:none; color="black";}
</style>

muss korrekt lauten:
<style type="text/css">
a {
text-decoration:none;
color:black;
font-size:x-large;
}
a:visited {
text-decoration:none;
color:black;
}
</style>


Antwort 3 von DonMartin

hoi,


<style type="text/css">
a {
      text-decoration:none;
      color=#000; 
      font-size=x-large;
}

a:visited {
      text-decoration:none; 
      color=#000;
}
</style>


sollte gehen.

bye, Andi

Antwort 4 von MaLi

Zitat:
1. das = ist falsch, CSS ist immer attribut:wert;

2. Die Farbangabe sollte auch nicht in "" stehen


Danke, das ist wohl mein Problem (ist das, das DonMartin und rfb noch nachkorrigiert haben)! Habe jetzt meine Seiten auf den neusten Stand gebarcht und einige CSS Angaben funktionieren jetzt, leider noch nicht alle, aber ich finde den Rest auch noch...


Was ich jedoch komisch finde, ist, wieso der IE7 das alles problemlos anzeigen kann und der FF2 so bockt...!!

Antwort 5 von MaLi

Zitat:
<style type="text/css">
a.charaktere {background-image:url(charaktere.jpg); width:150px; height:38px;}
a.charaktere:hover {background-image:url(charaktere2.jpg);}
a.inhalt {background-image:url(inhalt.jpg); width:150px; height:38px;}
a.inhalt:hover {background-image:url(inhalt2.jpg);}
</style>


Das hier zeigt mir der FF immer noch nicht an, keine Ahnung wieso...

Antwort 6 von MaLi

Ach Mist!

Habe gedacht es sei alles gut, dabei ist das nur bei 1 CSS Element so...
Jetzt muss ich alles durchsuchen gehen!

F*** FireFox!!

Antwort 7 von rfb

@DonMartin:
Zitat:
color=#000;
ist falsch (siehe Antwort 1)!

Antwort 8 von MaLi

Ich habe überall die = durch : ersetzt!!

Antwort 9 von MaLi

Da ich das Problem mit dem Firefox immer noch nicht beheben konnte, habe ich mich entschlossen mein Thema hier weiter zu führen.

Ich habe hier einige Codezeilen aus meiner Website, wäre froh wenn sich die Jemand mal ansehen könnte und ggf. verbessern. Den Codefehler sind ja meist das Problem von Firefox...

Danke schon mal!

MfG MaLi


Zitat:
<style type="text/css">
p {font-size:medium; color:black; text-align:center;}
h1 {font-size:x-large; color:black; text-align:center;}
h2 {text-align:right;}
</style>

<style type="text/css">
p {font-size:medium; color:black; text-align:center;}
h1 {font-size:x-large; color:black; text-align:center;}
a {text-decoration:none; color:black; font weight:bold;}
</style>

<style type="text/css">
a.downloads {background-image:url(downloads.jpg); width:150px; height:38px;}
a.downloads:hover {background-image:url(downloads2.jpg);}
a.impressum {background-image:url(impressum.jpg); width:150px; height:38px;}
a.impressum:hover {background-image:url(impressum2.jpg);}$
</style>


Antwort 10 von rfb

kurz umgeschrieben zu:

<style type="text/css">
p { 
font-size : medium;
color : black;
text-align : center;
} 
h1 { 
font-size : x-large;
color : black;
text-align : center;
} 
h2 { 
text-align : right;
} 
p { 
font-size : medium;
color : black;
text-align : center;
} 
h1 { 
font-size : x-large;
color : black;
text-align : center;
} 
a { 
text-decoration : none;
color : black;
font-weight : bold;
} 
a.downloads { 
background-image : url(downloads.jpg);
width : 150px;
height : 38px;
} 
a.downloads:hover { 
background-image : url(downloads2.jpg);
} 
a.impressum { 
background-image : url(impressum.jpg);
width : 150px;
height : 38px;
} 
a.impressum:hover { 
background-image : url(impressum2.jpg);
}
</style>


so mag es jetzt auch der CSS-Validator. Er meckert nur über fehlende Hintergrundfarben bei allen Elementen für die du nur Vordergrundfarben angibst. Das solltest du ändern!

1. warum hast du das auf 2 style-Bereiche verteilt?
2. ein - fehlte bei font-weight
3. das $-Zeichen ist wohl ein Tippfehler gewesen?

Sollte das den FF nicht überzeugen wäre ein Link auf deine Seite hilfreicher als das Posten von solchen Codeschnipseln hier.

Antwort 11 von MaLi

OK danke fürs anschauen!

1. Ich weiss nicht genau was du mit 2 Style Bereiche meinst, aber das sind Ausschnitte aus 3 verschiedenen Seiten...das ist nicht 1 Seite!

2. gut, danke!

3. Ja genau, sorry!

Da meine Seite noch nicht aufgeschaltet ist, kann ich leider auch noch keinen Link reinstellen...

Aber kannst du mir sagen, wie ich noch die Hintergrundfarbe definiere?? Meinst du mit background-color? Sorry, aber ich bin nicht gerade der CSS Profi!

Danke!

Antwort 12 von rfb

Zitat:
das ist nicht 1 Seite!
wäre praktischer sowas in der Frage zu erwähnen!

Zitat:
background-color
oder mit
background-image
zusammengefasst zu
background
.

Zitat:
Da meine Seite noch nicht aufgeschaltet ist, kann ich leider auch noch keinen Link reinstellen...
dann ändere das, da du offensichtlich zu wenig von der Materie verstehst um sinnvolle Codeschnipsel zu posten. Kostenlosen Webspace für solche Testzwecke gibts genug.

Antwort 13 von MaLi

1. OK sorry!

2. OK werd ich machen!

3.Ich hatte eigentlich erst vor, die Seite aufzuschalten, wenn sie komplett fertig ist und das dauert noch etwa 2 Wochen. Weil das ist ein Schul-Projekt und dann ist der Abgabetermin! ;)
Webspace und alles hätte ich schon, hab einfach keine Lust meine (bisher) 70 Dateien inkl. Bilder da raufzuladen!

www.thesouthpark.ch.vu wäre die Seite...
Wenn ich aber in nächster Zeit (morgen oder übermorgen) Zeit habe, werde ich sie raufladen und dann wäre ich froh wenn du sie dir mal anschauen könntest!

MfG MaLi

Antwort 14 von rfb

anstatt eine Pseudodomain zu verlinken solltest du besser gleich die richtige URL angeben: http://www.mypage.bluewin.ch/lima/southpark/index.html

Die Fehler und Probleme, die durch das Frameset von dem Pseudodomainanbieter erzeugt werden, sollen hier ja nicht betrachtet werden.

Antwort 15 von MaLi

Ja ok sory! Wie schon gesagt, ich bin (noch) Anfänger!!

Antwort 16 von MaLi

So, da bin ich mal wieder...

Habe den Code jetzt ein bisschen überarbeitet und einige male durch den CSS-Validator laufen lassen, welcher mir bestätigt, dass alles in Ordnung ist. Jedoch zeigt der FireFox mir wieder mal mein CSS nicht!


a.charaktere {
background : url(charaktere.jpg);
width : 150px;
height : 38px;
}
a.charaktere:hover {
background : url(charaktere2.jpg);
}
a.inhalt {
background : url(inhalt.jpg);
width : 150px;
height : 38px;
}
a.inhalt:hover {
background : url(inhalt2.jpg);
}
a.bilder {
background : url(bilder.jpg);
width : 150px;
height : 38px;
}
a.bilder:hover {
background : url(bilder2.jpg);
}
a.videos {
background : url(videos.jpg);
width : 150px;
height : 38px;
}
a.videos:hover {
background : url(videos2.jpg);
}
a.episoden {
background : url(episoden.jpg);
width : 150px;
height : 38px;
}
a.episoden:hover {
background : url(episoden2.jpg);
}
a.downloads {
background : url(downloads.jpg);
width : 150px;
height : 38px;
}
a.downloads:hover {
background : url(downloads2.jpg);
}
a.impressum {
background : url(impressum.jpg);
width : 150px;
height : 38px;
}
a.impressum:hover {
background : url(impressum2.jpg);
}


Das wäre der ganze Code meines Menüs.
Sieht da irgendjemand etwas, was dem FireFox nicht gefallen könnte?!?

MfG MaLi

Antwort 17 von rfb

und du hast es immer noch nicht geschafft die Seite mal ins Netz zu stellen?

Das mit den "Codeschnipseln" hat sich nicht geändert!

Ach ja, ein Idee hätte ich noch: wie sieht es mit den Einstellungen im Firefox aus? Darf der überhaupt das CSS deiner Seite nutzen?
Was macht Opera mit dem Code (zur Fehleranalyse sind FF und Opera wichtiger als IE, der ist schließlich selbst eher ein großer Fehler, zumindest dermaßen fehlerbehaftet, dass damit keine sinnvolle Analyse machbar ist)?

Antwort 18 von MaLi

1.&2. Ich weiss nicht was daran nicht gut sein soll, das sind keine Codeschnipsel, sondern mein ganzer Code.

3. Ok, ich werde mir Opera herunterladen und mal schauen.
An den Einstellungen vom FF kanns nicht liegen, da ich meine Page nicht nur bei 1 PC getestet habe und meine anderen Seiten mit CSS gut angezeigt werden.

Antwort 19 von rfb

Zitat:
1.&2. Ich weiss nicht was daran nicht gut sein soll, das sind keine Codeschnipsel, sondern mein ganzer Code.
in diesem Falle wären deine Seiten ziemlich inhaltsleer! Ein bisschen wird ja wohl draufstehen - wozu sonst soviel CSS?

Was ich meine und wohl schon gelegentlich andeutete: Das Problem lässt sich leichter im Zusammenhang beurteilen. Vielleicht hast du dein Stylesheet nur schlecht eingebunden oder sonstwo im HTML steckt ein Fehler der zur CSS-Ignoranz des FF führt.

Nur wenn du aus deinen Seiten so ein Geheimnis machst bleibt auch der Fehler dein Geheimnis!

Antwort 20 von MaLi

Also, der Opera "ignoriert" mein CSS auch!

Hab jetzt mal die Problem-Seite ins Netz gestellt.

http://mypage.bluewin.ch/lima/southpark/menu.html


Wundere dich nicht über die komische Anordnung, da es in einem Frame wäre, sieht es jetzt so chaotisch aus. Das Wichtige ist einfach das beim IE die Bilder mit hover angezeigt werde und bei den anderen Browsern nicht!

Antwort 21 von MaLi

Komischer weise funktioniert der Link nicht, wenn man einfach draufklickt, musst ihn wohl raus kopieren...

Anscheinend hat der Bluewin-Server wo ich die Seite raufgeladen habe, einige Probleme! D.h. er ist sehr langsam!

Antwort 22 von rfb

na bitte, so gehts doch. Und schon offenbaren sich die Fehler.

2 Probleme musst du lösen:

1. width und height wirken nur auf Blockelemente (+ ein paar Inline-Elemente, aber das spielt hier keien rolle) <a> ist aber ein Inlineelement.

Der Browser ignoriert diese Angaben daher! Und das zu Recht (scheinbar außer IE, aberd as hatten wir schon)

Du musst die Links daher erst einmal zu Blockelementen "upgraden"
Dies geschieht mittels display:block im CSS.

2. Deine Links sind leer! Wenigstens ein festes Leerzeichen sollte darin stehen um Browserprobleme zu vermeiden, sinnvoll ist aber eigentlich nur ein Linktext!

Antwort 23 von MaLi

1 Hey danke viel Mal, jetzt hats endlich geklappt!!

Da ich keine Ahnung habe, was Block- und Inlineelemnete sind, wäre ich nie auf so etwas gekommen!


2. Sorry aber kapiere gerade nicht, welche Links du meinst!


3. Wieso soll eigentlich der IE ein schlechter Browser sein?? Anscheinend kann er ja HTML bzw. CSS Fehler korrigieren, ist doch was nützliches...

Antwort 24 von rfb

Zitat:
2. Sorry aber kapiere gerade nicht, welche Links du meinst!
so viele gibts doch gar nicht auf der Seite. ZB diesen:

<a href="inhalt.html" class="inhalt" target="inhalt"></a>

Zitat:
3. Wieso soll eigentlich der IE ein schlechter Browser sein?? Anscheinend kann er ja HTML bzw. CSS Fehler korrigieren, ist doch was nützliches...
weil er ziemlich rückständig ist (selbst IE7 unterstützt das aktuelle CSS2 nicht ausreichend), und das von dir festgestellte Verhalten einfach falsch ist. Der IE korrigiert deine Fehler ja nicht weil er sie als Fehler erkannt hat, sondern weil er schlampig programmiert ist und sich daher nicht an die Vorgaben hält. Dass Inlineelemente (außer die angedeuteten Ausnahmen, zB. img) keine Breite und Höhe haben ist eigentlich logisch, denn sie stehen mit dem Text einfach in einer Zeile und richten sich daher nach genau diesem Text.

Antwort 25 von MaLi

1. Ja, aber wo soll ich bei den Links noch ein Leerzeichen einfügen?

2. OK, stimmt eigentlich schon!!

3. Hab noch ein Problem und wäre froh wenn du dir auch das mal anschauen könntest:

http://mypage.bluewin.ch/lima/southpark/episoden.html

Mein Problem ist dort vor allem wieder mal, dass jeder Browser die Tabelle anders interpretiert (ich hätte es gern so wie es der IE anzeigt)! Ausserdem wird noch ein Stück leere Seite angezeigt, obwohl der Inhalt bzw. die Tabelle schon längst zu Ende ist!
Ich weiss nicht ob es ein HTML oder ein CSS Fehler ist...

Antwort 26 von rfb

zu 1:
du weißt aber wie ein Link aufgebaut ist?

zu 3:
die Seite wird nicht geladen.

Antwort 27 von MaLi

1. Ja eigentlich schon, also ich weiss nicht was ich da noch einfügen muss!

2. Die Seite wird schon geladen, geht nur seeehr lange! Wie schon gesagt, der Server hat heute anscheinend Probleme...

Antwort 28 von MaLi

Aha, jetzt ist der Funken gesprungen, du meinst wohl:

<a href="inhalt.html" class="inhalt" target="inhalt"><></a>

Antwort 29 von rfb

<> ist nicht zulässig.
wie wäre es mit einem Text?

Antwort 30 von harrrharrr

Zitat:
<a href="inhalt.html" class="inhalt" target="inhalt"><></a>

oder mit Leerzeichen:
<a href="inhalt.html" class="inhalt" target="inhalt"></a>

Gruß
harrr

Antwort 31 von harrrharrr

"&dasnbsp;" wird offensichtlich als html interpertiert beim hochladen, seltsam, deshalb das das nach dem &

Antwort 32 von MaLi

@rfb
<a href="inhalt.html" class="inhalt" target="inhalt"><
Zitat:
Hier habe ich vorhin eigentlich ein &nbsp ; gehabt, komischer weise löschts das aber automatisch raus!!
></a>

Mir ist auch aufgefallen, das beim raufladen einer HTML-Datei dies auch automatisch entfernt wird! (Ist glaub ich das, was harrrharrr gemeint hat)

Antwort 33 von MaLi

Ach ja, kann sich noch Jemand mal meine andere Seite anschauen?? Der Link sollte jetzt gut erreichbar sein!!

http://mypage.bluewin.ch/lima/southpark/episoden.html

Antwort 34 von harrrharrr

habs mir angesehen, du hast zwar jede Menge
<tr> (table row) drin aber kein
<td> (table data)
deshalb wird wohl alles nacheinander geschrieben.

Antwort 35 von rfb

<tr> muss mindestens ein <td> enthalten.
Der Code ist damit nicht valide.

Wie es dann angezeigt wird ist Glückssache.

Bitte mach erst einmal dein HTML valide, bevor du dich mit CSS beschäftigst.

Antwort 36 von MaLi

Danke, schon wieder ein Problem gelöst, muss überall ein <td></td> (wird wieder viel Arbeit!) rein tun, dann gehts wohl...



Was deinen letzten Satz angeht, rfb:
Auf Grund des Schulstoffes in meiner Informatiklehre, hab ich praktisch keine Wahl, ausser mir beides gleichzeitig beibringen zu versuchen! Und da fast der ganze Teil HTML/CSS auf Selbststudium basiert, d.h. im Unterricht wird uns nichts über das codieren beigebracht, muss ich mir halt auch ziemlich Hilfe in Form von einem Forum, in dem Fall hier, suchen. Und da ich jetzt für ein HTML Projekt "nur" ca. 1 Monat Zeit hatte, hab ich halt immer das nächstbeste genommen, was ich gefunden habe an Techniken und alles auf den IE angepasst. Da die Homepage aber natürlich mit allen Browsern kompitabel sein muss, hab ich jetzt den Salat!

Deswegen bin ich auch für jede Hilfe dankbar!!

Antwort 37 von harrrharrr

Zitat:
wird wieder viel Arbeit!

warum machste das nicht mit:: suchen und ersetzen?

suchen:: <tr> ersetzen mit:: <tr><td>
suchen:: </tr> ersetzen mit:: <td></tr>

oder was du halt brauchst...

Antwort 38 von MoRe99

Zitat:
und alles auf den IE angepasst. Da die Homepage aber natürlich mit allen Browsern kompitabel sein muss, hab ich jetzt den Salat!

Richtig, den Salat hast du wegen dieser Vorgehensweise. ;-)

Besser: sauberes (= valides) HTML schreiben (nicht coden; HTML ist ja schließlich keine Programmiersprache), das CSS-File sauber (= valide) schreiben und dabei das Ganze zunächst im Firefox oder im Opera anschauen. Wenn es da passt, dann schauen, wie du es im IE hinbekommst.

Wenn es um das Überprüfen geht, ob deine Dateien valide sind, solltest du hier mal nachschauen:

HTML-Validator des W3C - auf Englisch; verwendbar bei Online- oder Offline-Dateien
Offline-Dateien validieren - auf Deutsch
Online-Dateien validieren - auf Deutsch
CSS validieren

Antwort 39 von MoRe99

Zitat:
wird wieder viel Arbeit!


Tipp: nutze einen Editor, der zum einen Syntax-Highlighting beherrscht und der zum anderen in einem Schritt in mehreren Dateien Ersetzungen vornehmen kann. Ich persönlich verwende proton 3.2.

BTW: eine wirklich gute Seite ist nun mal mit Arbeit verbunden. 08/15-Seiten sind dagegen schnell erstellt. ;-)

Antwort 40 von MaLi

Hey danke für die vielen Tipps!

Ich habe aber leider ein bisschen zu spät wieder ins Forum geguckt und jetzt hab ich halt alles von Hand gemacht, war aber gar nicht so schlimm! ;)


Hab mir den HTML Editor: "CSE HTML Validator Lite v8.0" heruntergeladen. Ist zwar auf Englisch, aber einige Fehler konnte ich damit gut korrigieren...

Antwort 41 von harrrharrr

Mein bevorzugter HTML / PHP Editor::
WebCraft

Nachschlagewerk u.a.::
http://de.selfhtml.org/
aber das kennst du vielleicht schon.

Gruß
harrr

Antwort 42 von MaLi

Ja, hab eigentlich das Meiste von SelfHTML.

Habe mir WebCraft mal heruntergeladen und installiert, werde es mir morgen mal anschauen!


MfG MaLi

Antwort 43 von harrrharrr

Zitat:
Auf Grund des Schulstoffes in meiner Informatiklehre

da gibt es mehrere, welche machst du denn?

Gruß
harrr

Antwort 44 von harrrharrr

Zitat:
Ja, hab eigentlich das Meiste von SelfHTML

das kann man auch runterladen und offline anschauen..., durchsehen, lernen...

Antwort 45 von MaLi

1. Also ich mache die Lehre in der Fachrichtung System, aber im 1. & 2. Lehrjahr ist der Schulstoff noch gemischt, deshalb lerne ich auch "programmieren".
Ich hoffe du meinst das mit "welche Informatiklehre"? Vielleicht sollte ich noch hinzufügen das ich aus der Schweiz komme und es hier evtl. ein bisschen anders ist als bei euch...

2. Ja kann man machen, da dieses Modul, also HTML, in 3 Wochen vorbei ist und ich es im weiteren Verlauf meiner Lehre wahrscheinlich eh nicht mehr richtig brauchen werde, lohnt es sich fast nicht, mich so intensiv damit zu beschäftigen!

Antwort 46 von MaLi

Mir ist gerade noch etwas in den Sinn gekommen, das eigentlich nicht sehr wichtig ist, aber trotzdem noch cool wäre!

Wie kann ich ein &copy; ganz unten rechts in die Ecke bekommen?? Also das es egal welcher Browser, welche Auflösung, welche Browserfenstergrösse immer unten Rechts in der Ecke ist!
Auf SelfHTML habe ich keine passende Antwort darauf gefunden...

Antwort 47 von derpfleger

<span class="untenrechts">&copy; </span>

Im Style:
.untenrechts {
   position:absolute;
   bottom:0px;
   right:0px;
   }


Getestet mit IE6, FF2, Opera9

Gruß derpfleger

Antwort 48 von MaLi

Klappt perfekt, danke vielmals!!

MfG MaLi

Antwort 49 von MaLi

Noch ne Frage: Sollte man die Meta-Angaben in jeder HTML-Datei oder nur in index.html haben??

Ich möchte kostenlos eine Frage an die Mitglieder stellen:


Ähnliche Themen:


Suche in allen vorhandenen Beiträgen: