Zu viel Inhalt für IE?

[Taurelin]

Hallo zusammen. Ich hoffe, ihr könnt mir bei einem merkwürdigen Problem mit meiner Seite helfen.

Das Problem sieht folgendermaßen aus. Je nachdem auf welchem Computer bzw. mit welchem Browser ich mir diese Seite anschaue, wird lediglich das Hintergrundbild angezeigt aber nicht der eigentliche Inhalt. Der Quelltext ist aber vollständig einsehbar, und auch der Scrollbalken rechts deutet darauf hin, dass die Seite eigentlich vollständig "da" ist.

Das Problem taucht auf
- bei IE6 (Windows 2000)
- bei IE8 (Windows XP)

Das Problem taucht nicht auf
- bei Firefox 3.6.3 (egal welches System)
- bei IE 8 (Windows7 / Windows Vista)

Was mich dabei wundert ist, dass alle anderen Seiten meiner Webpräsenz keinerlei Probleme verursachen, obwohl Style, Aufbau etc. völlig identisch sind.

Was ich zur Problemlösung selbst unternommen habe:

- CSS Validation (abgesehen von der Halbtransparenz per "rgba(20,25,25,0.82)" scheint da alles okay zu sein, wenn ich den Befehl entferne, besteht das Problem auch weiterhin)

- Wenn ich die Riesendatei in kleinere Happen aufteile, wird alles korrekt angezeigt. Ich kann quasi zeilenweise Text ergänzen, und irgendwann macht der IE schlapp und zeigt dann gar nix mehr an.

Ich würde mich freuen, wenn ihr mir helfen könnt, zumal ich nicht einschätzen kann, ob das evt. lediglich ein Syntaxfehler in meiner Seite ist oder ein generelles Browserproblem.

Hier noch meine CSS-Datei, falls die euch weiterhilft:

BODY {BACKGROUND: #000000 url(../../images/site/wald.jpg) fixed repeat-x;

text-align: center;}



DIV#theBox {
BACKGROUND: rgb(20, 25, 25);
BACKGROUND: rgba(20, 25, 25, 0.82);

text-align: left;

BORDER-TOP: #00F033 0px solid; MARGIN: 20px auto 0px;
BORDER-BOTTOM: #00F033 0px solid;
BORDER-LEFT: #00F033 0px solid; WIDTH: 730px;
BORDER-RIGHT: #00F033 0px solid;
}



DIV#MenueBox {
BORDER-TOP: #00F033 0px solid; MARGIN: 10px;
BORDER-BOTTOM: #00F033 0px solid;
BORDER-LEFT: #00F033 0px solid;
BORDER-RIGHT: #00F033 0px solid;
float: left; WIDTH: 7em;
padding: 15px;
font-size : 120%
}




DIV#TextBox {
BORDER-TOP: #00F033 0px solid; MARGIN: 10px;
BORDER-BOTTOM: #00F033 0px solid;
BORDER-LEFT: #00F033 0px solid;
BORDER-RIGHT: #00F033 0px solid;
MARGIN-LEFT: 11em;
padding: 15px;
}


DIV#MetaBox {
BORDER-TOP: #00F033 0px solid; MARGIN: 10px auto 0px;
BORDER-BOTTOM: #00F033 0px solid; MARGIN: 10px;
BORDER-LEFT: #00F033 0px solid; WIDTH: 680px;
BORDER-RIGHT: #00F033 0px solid;
padding: 25px;
}

DIV#MetaBox UL {LIST-STYLE-TYPE: none;}
DIV#MetaBox LI {FLOAT: left;}



DIV#welcome {text-align: center; PADDING-BOTTOM: 20px}


p, li, h1, h2, h3, h4 {font-family: Arial,Helvetia,sans-serif; font-size: 90%;

color: #FFFFFF;}


A:link { color: #00FFFF; font-weight: bold; text-decoration: none;}
A:visited { color: #00FFFF; font-weight: bold; text-decoration: none;}
A:hover { color: #FFFFFF; font-weight: bold; text-decoration: none;}
A:active {color: #FFFFFF; font-weight: bold; text-decoration: none;}
.act {color: #FFFFFF; font-weight: bold;}


h1 {font-weight: bold; font-style: italic; font-size : 120%;}
h2 {font-weight: bold; font-style: italic; font-size : 100%;}
h3 {font-weight: bold;}
h4 {font-style: italic; margin-bottom: -10px;}
.zitat {font-style: italic;}
.zitatrechts { font-style: italic; text-align: right; margin-right: 5px;

margin-bottom: -10px;}
.zitatrechtsquelle { text-align: right; margin-right: 5px;}
.untermenu {font-size:60%; font-weight: bold;}
.an { text-align: center}
.un { font-size: 8pt}


img {margin: 0; border: 0;}
img.txt {margin: 10px; border: 0; float: right;}

Schonmal 1000 Dank!

 

[lowsaxonian]

Moin,

im css gibt´s schon mal ein Problem :

9 DIV#theBox Zu viele Werte oder die Werte werden nicht erkannt : rgba(20,25,25,0.82) rgba(20,25,25,0.82)

Das dürfte wohl Dein Wrapper sein. Wenn der weg ist, scheint der Rest auch nicht mehr existenz zu sein.

Grüsse
low

 

[Taurelin]

im css gibt´s schon mal ein Problem :

Wie ich schon sagte. Wenn ich den kompletten Passus
BACKGROUND: rgb(20, 25, 25);
BACKGROUND: rgba(20, 25, 25, 0.82);

aus der CSS Datei reusnehme, hat das für das beschriebene Problem keine Auswirkungen.

Unabhängig davon: die anderen Seiten greifen ja auf die gleiche css-Datei zu, und die werden problemlos dargestellt (vgl. z.B. diese hier).

Das dürfte wohl Dein Wrapper sein. Wenn der weg ist, scheint der Rest auch nicht mehr existenz zu sein.

Was bedeutet der Begriff "Wrapper"?

 

[threadi]

rgba wird von keinem IE bisher unterstützt. Siehe:
RGBa Browser Support | CSS-Tricks

 

[Taurelin]

Ich weiß.

Aus dem Grund hab ich ja auch auf jeder Seite einen Alternativplan, wie er dort vorgeschlagen wurde (<!--[if IE]> blabla) eingebaut.

Aber auch das ist doch keine Antwort auf meine Frage.

Ich wiederhole nochmal: Warum wird die hier problemlos angezeigt, die hier dagegen nicht, obwohl beide gleich aufgebaut sind und den gleichen css-style haben?

 

[threadi]

Das Conditional Comment hilft wenig, wenn die problematische Regel bereits im Hauptstylesheet ist. Überschreiben kannst Du diese ja nicht, da der IE sie ja nicht kennt.

Aber mal noch weitere Unstimmigkeiten:

body { text-align: center; }

das ist Unsinn zumal Du den Inhalt bereits in #theBox mit margin zentrierst. Wenn Du das weglässt kannst Du auch gleich in #theBox das text-align: left weglassen.

In body steht außerdem, dass Du das Hintergrundbild fixierst. Der IE beherrscht das bis heute nur in Teilen. Siehe: Making Internet Explorer use background-attachment: fixed; - da er das nur teilweise und nicht richtig nachvollziehbar unterstützt ist es immer ein Glücksspiel diese Eigenschaft zu verwenden. Die Rendering Engine vom IE entscheidet spontan ("je nach Mondschein") ob und wie sie den Inhalt anzeigt. Und das scheint bei dir zu passieren. Könnte ein Grund sein auch wenn es mich beim IE8 etwas wundert.

In #MenuBox verwendest Du eine feste Breitenangabe zusammen mit padding. Der IE addiert das beides zusammen. Macht also eine 15 Pixel breitere Box draus. Das gleiche auch bei #MetaBox. Dadurch kann es passieren, dass gefloatete Inhalte neben so einem Container nicht mehr in den Rahmen passen - der IE zerstückelt die Seite und verschiebt die Boxen, weil sie ja nicht nebeneinander passen. Zusammen mit o.g. Problem könnte das die Rendering Engine auch als "leere Seite" interpretieren.

 

[Taurelin]

Das Conditional Comment hilft wenig, wenn die problematische Regel bereits im Hauptstylesheet ist. Überschreiben kannst Du diese ja nicht, da der IE sie ja nicht kennt.

Klar. Das erklärt mir aber immer noch nicht, warum das Problem nur auf einer einzigen Seite auftaucht.

Aber mal noch weitere Unstimmigkeiten:

body { text-align: center; }

das ist Unsinn zumal Du den Inhalt bereits in #theBox mit margin zentrierst. Wenn Du das weglässt kannst Du auch gleich in #theBox das text-align: left weglassen.

Jupp, das kann ich nachvollziehen. Hab's direkt geändert. Dafür schonmal danke.

In body steht außerdem, dass Du das Hintergrundbild fixierst. Der IE beherrscht das bis heute nur in Teilen. Siehe: Making Internet Explorer use background-attachment: fixed; - da er das nur teilweise und nicht richtig nachvollziehbar unterstützt ist es immer ein Glücksspiel diese Eigenschaft zu verwenden. Die Rendering Engine vom IE entscheidet spontan ("je nach Mondschein") ob und wie sie den Inhalt anzeigt. Und das scheint bei dir zu passieren. Könnte ein Grund sein auch wenn es mich beim IE8 etwas wundert.

Wenn ich das "fixed repeat-x" komplett rauswerfe, wird das Hintergrundbild in beiden Richtungen gekachelt, scrollt beim scrollen mit. Aber Inhalt wird immer noch keiner angezeigt. Das ist demnach nicht die Ursache.

In #MenuBox verwendest Du eine feste Breitenangabe zusammen mit padding. Der IE addiert das beides zusammen. Macht also eine 15 Pixel breitere Box draus. Das gleiche auch bei #MetaBox. Dadurch kann es passieren, dass gefloatete Inhalte neben so einem Container nicht mehr in den Rahmen passen - der IE zerstückelt die Seite und verschiebt die Boxen, weil sie ja nicht nebeneinander passen. Zusammen mit o.g. Problem könnte das die Rendering Engine auch als "leere Seite" interpretieren.

Hm. Beim Erstellen der Seite hatte ich immer grüne Rahmen um die Boxen gemacht, so dass sie sichtbar waren. Da konnte man sehen, wenn sich was überlappte. Und problematisch war das nie.

Die Bilder hab ich übrigens alle ohne Float eingebaut, weil einige doch recht breit sind und eh kein Text daneben passt.

 

[Taurelin]

Ähm, bescheidene Frage: Was genau soll ich jetzt machen, um das Problem zu behenben?

 

[threadi]

Hab keinen IE hier. Aber kleiner Tipp: wenn Du die Ursache finden willst hilft vielleicht auch der Webdeveloper für den IE. Damit kann man wie im Firebug die CSS-Eigenschaften auslesen und prüfen.

 

[neuroleptika]

Aber mal noch weitere Unstimmigkeiten:

body { text-align: center; }

das ist Unsinn zumal Du den Inhalt bereits in #theBox mit margin zentrierst. Wenn Du das weglässt kannst Du auch gleich in #theBox das text-align: left weglassen.

Das ist ein Hack für den IE5.x.

Ähm, bescheidene Frage: Was genau soll ich jetzt machen, um das Problem zu behenben?

Das Problem hängt mit diesem Filter zusammen:

filter:alpha(opacity=94);

Ab IE7 funktionieren alpha-transparente PNG.
Warum das Problem im echten IE7 xp, nicht aber im IE8 (Broswsermodus IE7, win7) zu sehen ist, weiß ich nicht. Einen IE8 auf xp habe ich nicht.

Mein Tipp:
Lasse diesen Filter weg und verwende ein alpha-transparentes PNG für #theBox.
Für den IE<=6 könntest du einen Hintergrund ohne Transparents verwenden oder einen anderen Filter (gradient).

 

[Taurelin]

Das Problem hängt mit diesem Filter zusammen:

filter:alpha(opacity=94);

Ah. Da kommen wir der Sache schon näher. Das stimmt. Wenn ich diesen Passus aus der alternativen css-Datei rauswerfe, so dass der Text auf einem nicht-transparenten, grauen Hintergrund erscheint, wird auch die problematische Seite vollständig angezeigt.

Für diese Diagnose schonmal herzlichen Dank.

Mein Tipp:
Lasse diesen Filter weg und verwende ein alpha-transparentes PNG für #theBox.
Für den IE<=6 könntest du einen Hintergrund ohne Transparents verwenden oder einen anderen Filter (gradient).

Hm. Ich habe leider kein Programm, mit dem ich eine solche png-Datei erstellen könnte. Hätte vielleicht jemand von Euch Zeit, mir eine solche Datei zu basteln und mir hier zur Verfügung zu stellen?

 

[mermshaus]

Hm. Ich habe leider kein Programm, mit dem ich eine solche png-Datei erstellen könnte. Hätte vielleicht jemand von Euch Zeit, mir eine solche Datei zu basteln und mir hier zur Verfügung zu stellen?

Ein frei verfügbares Programm, mit dem die Erstellung möglich ist, ist GIMP (Windows-Download hier: GIMP - Downloads). Das ist von der Art her vergleichbar zu Photoshop.

Ein ebenfalls freier Vektor-Editor: Inkscape. Draw Freely.

Ich denke, das Feature (Alpha-Kanal/Transparenz) ist auch unabhängig davon mittlerweile in den meisten etwas umfangreicheren Grafikbearbeitungsprogrammen vorhanden.

 

[Taurelin]

Ich denke, das Feature (Alpha-Kanal/Transparenz) ist auch unabhängig davon mittlerweile in den meisten etwas umfangreicheren Grafikbearbeitungsprogrammen vorhanden.

Hihi, das einzige was ich hier zur Verfügung habe, ist Paint und Microsoft Photo Editor (3.01).

Aber danke für den Tipp mit Gimp. Werd mal versuchen, es damit zu machen. Ich hatte nur gehofft, jemand von Euch hat so eine Datei irgendwo schon abgespeichert oder kann in 2 Minuten eine basteln.

//Edit:
Mist. Gimp funktioniert bei mir nicht, da ich Windows 2000 habe, nicht XP SP2 :(

//Edit2:
Inkscape habe ich mir runtergeladen. Aber das sieht so fürchterlich unübersichtlich aus. Hab mal die Hilfe aufgeschlagen und nach dem Begriff "Transparency" gesucht, kein Eintrag. :/

 

[mermshaus]

Mit älteren Versionen von Paint.NET könnte es vielleicht klappen. Such mal nach "paint.net windows 2000" oder so.

Imagebin - A place to slap up your images. (rgba: 20, 25, 25, 0.82)

Aber auf Dauer ist das auch keine Lösung, oder?

 

[Taurelin]

Mit älteren Versionen von Paint.NET könnte es vielleicht klappen. Such mal nach "paint.net windows 2000" oder so.

Hab ich. Da steht zwar bei, dass das Ding mit Windows 2000 kompatibel ist, bei der Installation kommt aber ne Fehlermeldung, dass man mindestens XP S2, Vista oder Server 2003 benötigt.

Imagebin - A place to slap up your images.

Was hat es damit auf sich?

(rgba: 20, 25, 25, 0.82)
Aber auf Dauer ist das auch keine Lösung, oder?

Versteh ich nicht. Wieso nicht?

 

[mermshaus]

Ich hatte nur gehofft, jemand von Euch hat so eine Datei irgendwo schon abgespeichert oder kann in 2 Minuten eine basteln.

Was hat es damit auf sich?

Versteh ich nicht. Wieso nicht?

Und genau deshalb klappt sowas nicht und ist keine Lösung. :-| Es ist beim ersten Mal ohnehin immer verkehrt, weil eigentlich eine ganz andere Grafik gemeint war und die Farbe etwas heller sowieso schöner wäre und ich nicht weiß, was du meinst, und du nicht weißt, was ich meine, usw. usw. usw. Das ist extrem nervtötend für alle Beteiligten. ;) (Meine ich nicht böse, ist ein Erfahrungswert.)

Aber ein Grafikprogramm zu finden, das PNG mit Transparenz erzeugen kann, muss definitiv in Eigenregie drin sein.

 

[Taurelin]

So, letztes Update:

Ein Kumpel hat mir freundlicherweise eine entsprechende png-Grafik gebastelt, die ich jetzt eingebaut hab. Im IE6 fehlt natürlich jetzt die Transparenz, dafür ist es im Firefox und IE8 perfekt. Und vor allem werden alle Inhalte sichtbar angezeigt, was ja eigentlich die Hauptsache ist.

Nochmal vielen Dank an alle, die sich die Mühe gemacht haben, mir zu helfen.

Wobei ich ja doch anmerken muss, dass einige Eurer Tipps für mich als Halb-Laie sehr unverständlich waren und ich mich oft so fühlte, als wenn ein Unfallpatient mit Herzstillstand in der Notaufnahme liegt und die Ärzte mit verschränkten Armen da stehen und murmeln "Der hat aber einen ganz schönen Beckenschiefstand. Und rasieren könnte er sich auch mal..." ;)

 

[mermshaus]

Ein Kumpel hat mir freundlicherweise eine entsprechende png-Grafik gebastelt, die ich jetzt eingebaut hab. Im IE6 fehlt natürlich jetzt die Transparenz, dafür ist es im Firefox und IE8 perfekt. Und vor allem werden alle Inhalte sichtbar angezeigt, was ja eigentlich die Hauptsache ist.

Du meinst die bg.png, oder? Guck dir noch mal die Grafik an, die ich in #14 verlinkt habe und sag mir, ob dir im Vergleich zu der aktuellen bg.png was auffällt. :-|

dass einige Eurer Tipps für mich als Halb-Laie sehr unverständlich waren

Ich habe den Thread noch mal gelesen und kann die Kritik nicht wirklich nachvollziehen.

Ich meine, du weißt, was Alphatransparenz ist, hantierst mit Transparenzfiltern und schreibst recht gutes CSS (u. a. inklusive Zentrierungsfix für den IE<6) und lieferst Debugdaten für vier Betriebssysteme und mindestens drei Browser.

Was genau war vor dem Hintergrund an den Antworten so sehr Weltraumtechnik? (Keine rhetorische Frage! ;))

 

[Taurelin]

Du meinst die bg.png, oder? Guck dir noch mal die Grafik an, die ich in #14 verlinkt habe und sag mir, ob dir im Vergleich zu der aktuellen bg.png was auffällt. :-|

Ups. Ich muss gestehen, dass ich erst jetzt gesehen habe, dass dieses kleine Quadrat das ist, was ich suchte. Ich dachte, der Link wäre nur ein Link zu einer Grafiksuchmaschine
->
"View the 50 latest posts.
Add your image now!
Search for images."

Ich habe den Thread noch mal gelesen und kann die Kritik nicht wirklich nachvollziehen.

Ich meine, du weißt, was Alphatransparenz ist, hantierst mit Transparenzfiltern und schreibst recht gutes CSS (u. a. inklusive Zentrierungsfix für den IE<6) und lieferst Debugdaten für vier Betriebssysteme und mindestens drei Browser.

Naja ich dachte, je mehr Infos ich euch gebe, umso präziser könnt ihr mir helfen.

Und ehrlich gesagt hab ich keinen blassen Dunst was der Begriff "Alphatransparenz" bedeutet. Ich hab bei google die Begriffe "CSS" und "Transparenz" eingegeben und von den Ergebnissen per Copy Paste ein bisschen was eingebaut. Mehr nicht.

Was genau war vor dem Hintergrund an den Antworten so sehr Weltraumtechnik? (Keine rhetorische Frage! ;))

Mehrere Punkte:

- Im 2. Post wurde der RGBA Zusatz bemängelt, obwohl ich im Startpost schon angemerkt hatte, dass dort nicht das Problem liegt.

- Im 3. Post habe ich gefragt, was der Begriff Wrapper bedeutet. Darauf habe ich keine Antwort bekommen.

- Im 4. Post wird wieder auf den RGBA Befehl hingewiesen, was aber mit dem eigentlichen Problem nix zu tun hat.

- Im 5. Post wird an Details in meinem CSS Code rumgemäkelt, obwohl auch das nichts mit dem eigentlichen Problem zu tun hat (darauf bezog sich das Gleichnis mit dem Notaufnahmepatienten).

- Erst in Post 10 kam der entscheidende Hinweis, in welchem Befehl das eigentliche Problem steckt.

- Ja und dann hab ich den Post 14 bzw. den Link tatsächlich nicht verstanden. Das nehm ich gern auf meine Kappe.

_________________

Sorry, das sollte alles gar nicht so als bösartige Kritik rüberkommen. Ich hatte halt gehofft, dass ich in einem Spezialforum direkte und präzise Hilfe bekomme. So nach dem Motto

- "Im Quellcode ist in Zeile xy ein Tag nicht geschlossen, daher wird die Seite nicht richtig angezeigt"

oder

- "Ach das ist ein altbekanntes Problem beim IE. Füg einfach diese Zeile (...) in deine CSS Datei ein, dann funktioniert es"

oder

- "Du kannst das Problem umgehen, indem du eine halbtransparente png-Grafik als Background einbaust. Hier ist ein Link zu der Datei (links oben dieses kleine Quadrat namens bg.png). Viel Spaß damit"

Nichts für ungut. ;)

 

[neuroleptika]

Auf mermshaus trifft deine Kritik am allerwenigsten zu.
Er liefert hier die meißten lauffähigen Beispiele. In deinem Fall sogar eine fertige Grafik.

So eine Hilfe gibt es selten.