HTML/CSS Firefox übernimmt style Angaben aus <body> nicht

Ithil · 07.08.2007

Hallöchen, tja mein Problem ist ja in der Übershcrift schon fast beschrieben.
Überarbeite gerade einen Internetauftritt und hab gerade das Problem, dass ich für Hintergrundbild und so in <body> ein paar style="...;" Angaben gemacht habe. IE führt die auch alle einwandfrei aus, nur Firefox will garkeine davon übernehmen. Weis jemand woran das liegen kann und wie ich das beheben könnte?
Danke schonmal im Voraus

OBrian · 07.08.2007

Ich vermute, das ist ein Syntaxfehler irgendwo, aber so aus der Luft kann man das nicht genauer sagen. Poste doch mal den Code (kannst ja private Details wie Links usw. rauslöschen). Evtl. steht auch was in der Fehlerkonsole (im Firefox-Menü unter Extras).

Ithil · 07.08.2007

Danke für den Tipp.
In der Fehlerkonsole stehen tatsächlich einige Fehler, die stammen aber nicht von mir. Ist halt immer etwas problematisch wenn man eine Seite von Anderen weiterführen muss.

hier mal das Body tag, den ganzen Quellcode geht echt nicht, das wäre viel zu viel und würde ohne den Inhalt auch nichts aussagen.

HTML:

<body style="width:950px;" style="margin-left:auto; margin-right:auto;" style="background-image:url(httx://.../background.jpg); background-repeat:repeat-x;">

x=p hab nur noch zu wenig Postings, da meckert er gerade wegen Link^^

PS: Wenn ich einmal dabei bin: das Hintergrundbild ist ein Farverlauf, wie krige ich das Bild dazu so lang wie die jeweilige Seite zu werden? (Seiten ändern sich dynamisch)

Beppo98 · 07.08.2007

Hallo, probier doch mal folgendes. Definiere doch das body-Format doch mal zentral. Außerdem sind mehrere styles in einem Tag nicht HTML bzw. CSS konform.

PHP:

<html>
<head>
<title>Home</title>
<style type="text/css">


body 	{ 
    width:950px;
    margin-left:auto;
    background-image:url(URL);
    background-repeat:repeat-x;
         }

</style>
</head>
<body>
</body>

Ithil · 07.08.2007

Ah Danke Beppo98, es hat funktioniert. Jetzt zeigt Firefox alles auch fein säuberlich an

Bleibt nur noch die Frage wie ich das Hintergrundbild in seiner Länge dynamisch der Seite anpassen kann.

Phil S. · 07.08.2007

Ithil schrieb:
Ah Danke Beppo98, es hat funktioniert. Jetzt zeigt Firefox alles auch fein säuberlich an
Bleibt nur noch die Frage wie ich das Hintergrundbild in seiner Länge dynamisch der Seite anpassen kann.

Mit

HTML:

background-repeat:repeat-y;

oder

HTML:

background-repeat:repeat

Ciao
Phil

Ithil · 07.08.2007

Danke Phil S. aber so einfach geht es eben nicht, weil es sich beim Hintergrundbild wie gesagt um einen Farbverlauf handelt und wenn ich den einfach wiederholen lasse fängt er ja wieder mit dem dunklen an und das sieht dann blöd aus. Der Farbverlauf soll ja von oben nach unten durchgängig sein.

BoMbY · 07.08.2007

Wie wäre es mit

Code:

height:100%;

oder so ähnlich?

[³dgamer] · 07.08.2007

Ithil schrieb:
Danke Phil S. aber so einfach geht es eben nicht, weil es sich beim Hintergrundbild wie gesagt um einen Farbverlauf handelt und wenn ich den einfach wiederholen lasse fängt er ja wieder mit dem dunklen an und das sieht dann blöd aus. Der Farbverlauf soll ja von oben nach unten durchgängig sein.

Du kannst den Hintergrund entweder einmal anzeigen lassen oder unendlich oft.
Die "Höhe" definieren geht nicht! Wenn dann müßte man tricksen. D.h. du baust einen dynmischen unsichtbaren DIV-Container mit Hintergrundbild und packst die gesamte Seite da rein. Aber ob das den Aufwand rechtfertigt.. *noahnung*

\²³/ · 07.08.2007

Ithil schrieb:

Du darfst nicht mehrmals das Attribut style vergeben. Wenn du CSS-Code direkt im HTML eingeben willlst, musst du die einzelnen Anweisungen mit einem Semikolon trennen. In deinem Fall so:

HTML:

<body style="width:950px; margin-left:auto; margin-right:auto;" style="background-image:url(httx://.../background.jpg); background-repeat:repeat-x;">

Beppo98 · 07.08.2007

\²³/ schrieb:
Du darfst nicht mehrmals das Attribut style vergeben. Wenn du CSS-Code direkt im HTML eingeben willlst, musst du die einzelnen Anweisungen mit einem Semikolon trennen. In deinem Fall so:

HTML:

<body style="width:950px; margin-left:auto; margin-right:auto;" style="background-image:url(httx://.../background.jpg); background-repeat:repeat-x;">

Jetzt hast du es aber auch mehrmals vergeben

HTML:

<body style="width:950px; margin-left:auto; margin-right:auto; background-image:url(httx://.../background.jpg); background-repeat:repeat-x;">

OBrian · 07.08.2007

Ithil schrieb:
Danke Phil S. aber so einfach geht es eben nicht, weil es sich beim Hintergrundbild wie gesagt um einen Farbverlauf handelt und wenn ich den einfach wiederholen lasse fängt er ja wieder mit dem dunklen an und das sieht dann blöd aus. Der Farbverlauf soll ja von oben nach unten durchgängig sein.

Das geht so nicht, wenn Du unterschiedlich lange Seiten unbekannter Länge hast. Aber Du könntest einen halben Farbverlauf je oben und unten machen, also statt komplett von z.B: schwarz nach weiß eben ein Hintergrundbild mit schwarz bis mittelgrau, dann die Seite in mittelgrau und unten noch ein Bild mit Verlauf von mittelgrau bis weiß.

Alternative könnte SVG sein, das ist ein XML-Bildformat, was dann auch dynamisch (z.B. per Skript) veränderbar ist wie eine normale HTML-Seite. Mußt Dich natürlich erst einarbeiten und vielleicht mußt Du auch größere Umbauarbeiten an der Website machen, aber der Farbverlauf dürfte hinzukriegen sein. Nachteil ist, daß es nicht unbedingt jeder Browser unterstützt, aber die neueren schaffen es.

http://de.wikipedia.org/wiki/Scalable_Vector_Graphics
http://svg.tutorial.aptico.de/start.php

\²³/ · 07.08.2007

Beppo98 schrieb:
Jetzt hast du es aber auch mehrmals vergeben

HTML:

<body style="width:950px; margin-left:auto; margin-right:auto; background-image:url(httx://.../background.jpg); background-repeat:repeat-x;">

Hab mich vertan. Richtig. Also korrekt wäre es natürlich nur, wenn man alle Aneweisungen zusammenfassen würde.

Ithil · 08.08.2007

Wow, Danke Leute für die Erklärungen.

@OBrian: Vielen Dank, leider kann ich bei der Seite keine dynamische programmierung verwenden, weil es für einen Ebay Powerseller ist und Ebay mit dynamischen Elementen so seine Probleme hat.
Aber du hast mich trotzdem auf die Lösung gebracht. Ich werde keinen gegenläufigen Farberlauf verwenden, sondern den Hintergrund einfach in der hellsten Farbe einfärben, sodass unten dann diese zu sehen ist, wenn der Balken doch mal zu kurz sein sollte.
.
EDIT :
.
So, neuer Tag, selbes Problem nur andersrum^^
Also, Wir haben mal ein Produkt probeweise mit dem neuen CSS Code bei Ebay reingestellt und wie befürchtet hat Ebay mir da erstmal bei einigen Elementen einen Strich durch die Rechnung gemacht. Irgendwas in <body> zu ändern kann ich vergessen, weil das nicht nur für unseren Abschnitt sondern für die gesamten Ebay Anzeigen auch gilt. Naja, musste ich meine Positionierung eben jedem einzelnen CSS Abschnitt zuweisen, umständlich, aber hat funktioniert. Leider eben aber nur im Firefox. IE weigert sich beharrlich innerhalb von Ebay die margin Anweisungen auszuführen. Weis jemand woran das liegen kann? Und wie ich das ändern könnte?
Danke schonmal im Voraus

\²³/ · 08.08.2007

Setzt du deine Auszeichnungen einfach in ein <div style="...">a</div>? Ein Beispiel wäre gut.

Beppo98 · 09.08.2007

\²³/ schrieb:
Setzt du deine Auszeichnungen einfach in ein <div style="...">a</div>? Ein Beispiel wäre gut.

Oder auch die Seite http://www.selfhtml.org/. Da ich irgendwie das Gefühl habe, dass du dich noch nicht wirklich richtig in die Materie eingearbeitet hast

Ithil · 10.08.2007

Also ich benutze eine seperate CSS Datei und spreche die einzelnen Bereiche über id an.
Bsp:

HTML:

<div id="main">

und dann in der CSS Datei

HTML:

#main{
	margin-left:auto;
         margin-right:auto;
	background-color:#FFFFFF;
	width:950px;
	overflow:auto;
	border-left:1px solid #0568A3;
	border-right:1px solid #0568A3;
	border-bottom:1px solid #0568A3;
}

Naja, ich studiere Medieninformatik, bin grad im 5. Semester, also im Praksissemester und das ist wirklich meine 1. Internetseite die ich betreue. selfhtml nutze ich ja schon die ganze Zeit^^
Naja, wie gesagt, es funktioniert mit Firefox wunderbar, aber IE nimmt in obigem Beispiel die margin Befehle nicht an, also da kann ich schreiben was ich will, er positioniert die Seite nicht mittig.

\²³/ · 10.08.2007

Probiers mal mit text-align:

Zitat von selfHTML
Der Wert auto setzt den rechten Abstand auf die gesamte noch zur Verfügung stehende Breite, wirkt sich also ohne Angabe zu margin-left nicht aus. Über margin-left:auto; margin-right:auto können Block-Elemente zentriert werden. Der Internet Explorer unterstützt dies allerdings bis zur Version 5.x noch nicht; Sie können jedoch dessen fehlerhafte Umsetzung von text-align zur Zentrierung von Block-Elementen ausnutzen.

Ithil · 10.08.2007

Einen Versuch war es wert, aber außer dem Text verändert sich da leider nichts. Schätzungsweise wirkt da Ebay in irgendeiner Weise gegen.
Außerdem verwendet die Firma IE Version 6.0, er müsste die margin Befehle also eigentlich kennen.

Chris_Bear · 10.08.2007

Der Tip mit text-align war schon gar nicht schlecht. "margin: auto;" ist der CSS-konforme Weg um Div-Container zu zentrieren. Leider hält sich da der IE wie zu erwarten nicht dran. Hier musst du ein extra "div" um die komplette Seite (bzw. deinen Bereich bei Ebay) einbauen und diesem dann die Attribute "width: 100%; text-align: center;" verpassen. In deinem jetzigen Container (der mit dem "margin: auto;") fügst du dann noch ein "text-align: left;" hinzu, da die Eigenschaft sonst vererbt wird und dir den ganzen Text zentriert.

Gruß, Chris

Ithil · 15.08.2007

So, wir haben heute wieder einen Testartikel hochgeladen diesmal mit den Änderungen die ChrisBaer vorgeschlagen hat. Endlich funktioniert alles so wie es sein solllte! Danke Chris!

Also wer zufällig auch mal wieder mit Ebay probleme hat kann sich merken: nicht das body Tag verändern, denn dann verändert sich die gesamte Ebay Seite, sondern um deinen Bereich einen div-tag legen und darin alles eintragen.

HTML/CSS Firefox übernimmt style Angaben aus <body> nicht

Cadet

Moderation MBDB, ,

Cadet

Grand Admiral Special

Cadet

Vice Admiral Special

Cadet

Grand Admiral Special

Grand Admiral Special

Grand Admiral Special

Grand Admiral Special

Moderation MBDB, ,

Grand Admiral Special

Cadet

Grand Admiral Special

Grand Admiral Special

Cadet

Grand Admiral Special

Cadet

Admiral Special

Cadet

Ähnliche Themen