Kein .png in Firefox!?

wers · 31.07.2009

Hallo,

hab folgendes Problem!
Hab in meinen Code ein Hintergrundbild eingebaut, dies ist eine .png Datei! In der Vorschau bei Dreamweaver ist es korrekt eingefügt, ebenso bei Safari stellt sichs in der Vorschau richtig dar!
Aber in Firefox ist das Bild überhaupt nicht zu sehen???

Woran liegt das?

Hier der Code:
table {
background-image:url(../Grafiken/Hintergrund/backround2.png);
}

HansHansa · 31.07.2009

AW: Kein .png in Firefox!?

probiere mal:
table {
style="background-image:url(../Grafiken/Hintergrund/backround2.png)"
}

cebito · 31.07.2009

AW: Kein .png in Firefox!?

Dreamweaver fügt in der Regel die Hintergrundbilder falsch ein. Das sieht dann so aus:

Code:

background-image:url([B][COLOR=Red]/[/COLOR][/B]bild.png)

Mit dem einleitenden (rot markierten) Slash ist der Bilderpfad aber nicht korrekt. Die DW-Vorschau und auch der IE sehen darüber hinweg, der FF allerdings nicht.

Tim1901091 · 31.07.2009

AW: Kein .png in Firefox!?

HansHansa schrieb:
probiere mal:
table {
style="background-image:url(../Grafiken/Hintergrund/background2.png)"
}

Sry, aber das ist kein CSS.
Entweder du schreibst das so auf, wie dus bereits hast (das ist dann die Variante für externe Stylesheets oder Stylesheets zentral im Header) oder du machst es so:
style="background-image:url(../Grafiken/Hintergrund/background2.png)" als Attribut dann. Dann kannste aber auch direkt das HTML-Attribut nehmen. Der schöne Vorteil von zentralen Stylesheets ist damit ja hinüber.

Du hast im Beispiel backround. Wohl nur ein Schreibfehler oder?

Ich denke den entscheidenden Tipp hast du bereits von cebito bekommen. Falls nicht, poste mal bitte den genauen Quelltext (den, den Firefox dir ausgibt!). Dreamweaver ist ja bekannt dafür, dass der Code zwar durchaus zu den besten gehört, aber bei weitem nicht an "handgeschriebenen" rankommt.

wers · 31.07.2009

AW: Kein .png in Firefox!?

Aber iwie kann ich das nicht ändern, da im Cope nur "url(../Grafiken/Hintergrund/background2.png)" steht!
Wie komm ich auf die Daten zuvor bzw. mit was muss der Code (sodass er auch in Firefox zu sehen ist) beginnen?

cebito · 31.07.2009

AW: Kein .png in Firefox!?

wers schrieb:
Aber iwie kann ich das nicht ändern, da im Cope nur "url(../Grafiken/Hintergrund/background2.png)" steht!
Wie komm ich auf die Daten zuvor bzw. mit was muss der Code (sodass er auch in Firefox zu sehen ist) beginnen?

So wie es dort steht und da auch Safari die Grafik darstellt, scheint es ja ein korrekter Pfad zu sein. Schwer hier mehr zu sagen außer - hast du zufälligerweise im FF die Grafiken deaktiviert?

wers · 31.07.2009

AW: Kein .png in Firefox!?

In Safari zeigt es mir das Bild an und ich hab das so stehen wie ichs im Beitrag oben gepostet habe!

Was meinst du genau mit Grafik deaktiviert? Wo kann ich da nachsehen? :uhm:

Tim1901091 · 31.07.2009

AW: Kein .png in Firefox!?

wers schrieb:
In Safari zeigt es mir das Bild an und ich hab das so stehen wie ichs im Beitrag oben gepostet habe!

Was meinst du genau mit Grafik deaktiviert? Wo kann ich da nachsehen? :uhm:

Extras/Einstellungen/Inhalt/Grafiken laden

Ruf die Seite doch mal in Firefox auf und poste den Quelltext (geht über Rechtsklick/Seitenquelltext anzeigen oder Ansicht/Seitenquelltext anzeigen).

wers · 31.07.2009

AW: Kein .png in Firefox!?

Ich hatte das Bild nun ohne Zahl "2" gespeichert und promt ging es dann!? :hmpf:

Tim1901091 · 31.07.2009

AW: Kein .png in Firefox!?

wers schrieb:
Ich hatte das Bild nun ohne Zahl "2" gespeichert und promt ging es dann!? :hmpf:

Ähm... wieso gings dann in Safari?! Dass Safari sooo "tolerant" ist, ist mir bisher ehrlich gesagt neu

. Normalerweise geben sich ja Safari und Firefox nicht viel...

Wenn ich dir noch en Tipp geben darf: Versuch Webseiten möglichst ohne Dreamweaver und Co zu schreiben. Ein richtiger Texteditor (PSPad oder Notepad++ z.B.) ist immer noch das Beste, weil man da auch wirklich das bekommt, was man schreibt.

Na ja, hauptsache es geht.

wers · 31.07.2009

AW: Kein .png in Firefox!?

Danke nochmal für den Tipp!
Ka warum das ging, in Safari hats das die ganze Zeit angezeigt und dann halt auch in Firefox nachdem ich den Namen geändert hatt!

Ich selbst bin blutiger Anfänger in Programmierung usw. muss mich selbst erst finden! Hab erst in Frontpage versucht und jetzt bin ich zu DW gekommen, was ein absoluter Unterschied ist!

Das natürlich ganz komplett eigens geschriebene Codes am besten sind steht außer Frage - für mich aber (noch) utopisch!

Tim1901091 · 31.07.2009

AW: Kein .png in Firefox!?

Wenn du dich da bisschen reinarbeiten willst, würde ich dir "HTML mit XHTML und CSS von Kopf bis Fuß" ausm O'Reilly-Verlag empfehlen. Wenn du das Buch gelesen hast, weißt du so 80% etwa und kannst auch definitiv "von Hand" Webseiten schreiben.
Kostet etwa 50 Euro, ist aber auch das Geld echt wert... ich hab selbst damit angefangen Webdesign richtig zu lernen...

Wichtig ist, dass du versuchst neue Techniken zu verwenden! Auch wenns anfangs nicht immer klappt (vor allem in älteren Browsern nicht), nicht entmutigen lassen und auf keinen Fall auf die veralteten Techniken zurückgreifen als letzter Verzweifelungsakt oder so

Wenn dir das aber noch zu schwierig und komplex ist fürn Anfang, ist Dreamweaver wohl schon noch das "kleinste Übel" aufm Markt. Der Code zählt ja wie gesagt noch zu den Besten von so "Klickprogrammen".

oxygen · 31.07.2009

AW: Kein .png in Firefox!?

wers schrieb:
Danke nochmal für den Tipp!
Ka warum das ging, in Safari hats das die ganze Zeit angezeigt und dann halt auch in Firefox nachdem ich den Namen geändert hatt!

Ich selbst bin blutiger Anfänger in Programmierung usw. muss mich selbst erst finden! Hab erst in Frontpage versucht und jetzt bin ich zu DW gekommen, was ein absoluter Unterschied ist!

Das natürlich ganz komplett eigens geschriebene Codes am besten sind steht außer Frage - für mich aber (noch) utopisch!

dreamweaver ist das beste programm
wenn
man etwas html und css kann
mit php und js kannste das ganze abrunden

und um mit dww zu arbeiten - schau dir selfhtml.org an !!!

time2flirt · 01.08.2009

AW: Kein .png in Firefox!?

Am besten du schreibst die Seite mit dem Programm deiner Wahl wie bislang ladest dir dann firebug für den firefox und chekkst den quellcode alles was nicht "valid" also eben standart und nicht interpretiert werden kann wird dir gehighlightet sprich mit nem roten \ angezeigt.

Sprich ist bei dem css tag was falsch weil \bilder\ dann springt der an uns zeigt es dir =)

Leider ist Dreamweaver nicht valide meins zumindestens nicht - der hat nen alten standart drinen den w3c nicht mehr sinngemäss anerkennt.

Meathor · 01.08.2009

AW: Kein .png in Firefox!?

Gerade als Anfänger solltest du entweder Windows Notepad oder einen Entsprechenden PHP-Editor wie Eclipse, PSPad und co nutzen...

Diese Programme wie Dreamweaver und co sind wirklich nur gut für leute die:

1. Keine Ahnug davon haben

und

2. keine Ahnung davon haben wollen.

wenn du es wirklich lernen willst, so nehm einen PHP-Editor... es ist wirklich das beste

für css kann ich die seite:

CSS 4 You - The Finest in Stylesheets

empfehlen
mfg

wers · 01.08.2009

AW: Kein .png in Firefox!?

Danke shconmal für die ganzen Tipps von euch - besten Dank!

Habe noch ein Problem, ich hab oben den CSS Code und unten den Code für DIV!

.Stil3 {
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height:1px;
}

<div class="Stil3" style="margin-bottom:20px; padding:4pt; border-color:#000000; border-width:1px; border-style:solid; background:#666666">
<p> </p>
</div>

Wenn ich jetzt bei DIV einen Text einfüge so wird er so wie ich ihn vom zeilenabstand her will eingefügt!
Sobald ich aber selber anfang zu tippen und auf enter drücke und eine Zeile darunter zu schreiben, macht der mir einene doppelten Zeilenabstand -.-
Hab schon etliche male bei line-height u.ä. rumprobiert aber nie hat was geholfen!
Könntet ihr mir bitte helfen?

cebito · 01.08.2009

AW: Kein .png in Firefox!?

Bring mal ein wenig Ordnung in deinen Code. Da du stil3 schon in der css definierst, warum schreibst du dann noch die anderen Werte bei dem div rein? Mach es doch gleich in der css. Macht das Ganze übersichtlicher.

Die Frage versteh ich leider nicht ganz, aber wenn dein Text im p-Tag steht, dann musst du für diesen die style-Attribute ändern.

Tim1901091 · 01.08.2009

AW: Kein .png in Firefox!?

Okay, erstmal was allgemeines:
(X)HTML sollte heutzutage nur noch dazu eingesetzt werden, Inhalt semantisch auszuzeichnen. Also sowas wie: Das ist eine Überschrift, hier kommt ein Paragraph und das ist ne Liste.

Und CSS sollte dann halt diese semantischen Auszeichnungen "bisschen aufhübschen". Stil3 ist aber keine semantische Auszeichnung! Das ist eindeutig Aussehen. Versuch also lieber ne andere Klasse zu nehmen. Sowas wie class="hauptinhalt"

Und dann entferne am Besten ALLE Inline-Styles (style="margin-bottom:20px; padding:4pt; border-color:#000000; border-width:1px; border-style:solid; background:#666666"). Die brauch kein Mensch. Mach das lieber alles in einer zentralen CSS-Datei (entweder extern und dann einbinden oder in <head>...</head>).
  <-- brauch ebenfalls niemand bei (X)HTML und CSS, also raus damit.

Aber jetzt zu deiner eigentlichen Frage:
Text muss immer umschlossen werden. In der Regel in einem <p>-Element (p = paragraph = Absatz). Dann wird ein Zeilenumbruch von (X)HTML genauso wie ein Leerzeichen behandelt! Also es bringt nix, wenn du auf Enter drückst. Wenn du wirklich einen Zeilenumbruch erzwingen willst, musst du an der Stelle <br /> aufschreiben (sollte man aber nach Möglichkeit vermeiden, das ist ja wieder Aussehen und nicht mehr Semantik!).
line-height: 1px ist natürlich Schwachsinn.
Das ist nur die Größe einer Zeile! Was dir vielleicht weiter helfen könnte, wäre folgendes:

p { /* Alle <p>-Elemente auswählen */
margin:0; /* Alle Außenabstände auf 0 setzen! */
padding:0; /* Alle Innenabstände auf 0 setzen! */
}

Guck dir mal das Box-Modell von CSS genauer an. Das ist das mit padding und margin! Das ist wohl das wichtigste bei CSS - ohne das gehts einfach nicht.

wers · 01.08.2009

AW: Kein .png in Firefox!?

cebito schrieb:
Bring mal ein wenig Ordnung in deinen Code. Da du stil3 schon in der css definierst, warum schreibst du dann noch die anderen Werte bei dem div rein? Mach es doch gleich in der css. Macht das Ganze übersichtlicher.

Die Frage versteh ich leider nicht ganz, aber wenn dein Text im p-Tag steht, dann musst du für diesen die style-Attribute ändern.

Wenn ich in der Vorschau im Textrumtippe dann kommt sobald ich auf Enter Klicke das p-Tag und dann gehts nicht! Wenn ich im Code immer die DIV Zeile kopiere und einfüge dann gehts so wie ich mir das vorstelle, aber das nimmt ja ziemlich viel Zeit in Anspruch! Kann man nicht in der Vorlage das direkt iwie schneller machen?

Tim1901091 · 01.08.2009

AW: Kein .png in Firefox!?

wers schrieb:
Wenn ich in der Vorschau im Textrumtippe dann kommt sobald ich auf Enter Klicke das p-Tag und dann gehts nicht! Wenn ich im Code immer die DIV Zeile kopiere und einfüge dann gehts so wie ich mir das vorstelle, aber das nimmt ja ziemlich viel Zeit in Anspruch! Kann man nicht in der Vorlage das direkt iwie schneller machen?

Genau das ist der Nachteil von Programmen wie Dreamweaver und Co!

Probiers mal ohne Dreamweaver...Wenn du unbedingt einen Zeilenumbruch brauchst, dann füg <br /> im Code ein! Ansonsten schreibs einfach auf, ohne auf Enter zu drücken. Die Browser fügen die nötigen Zeilenumbrüche sowieso ein, wenn der Text zu lang ist.