CSS geht nur in OPERA nicht. Warum?

Hallo, ich hatte mal an meiner Homepage eine css definition für DIV’s Container geändert und seit dem zeigt nur OPERA das komplette Webseiten-css nicht mehr an. Natürlich liegt meine “CSS Bibliothek” extern.
Ich finde diesen Fehler einfach nicht heraus.

Testet diese Homepage mal in OPERA.

Hier der css-code für alle DIV’s Container:

#kasten1 {position:absolute; left:1%; top:10%; width:13%; height:auto; padding:0px; spacing:0px; z-index:3; background:url(../res/Marble.jpg); cursor:hand; border-left:5px inset #5F5F5F; border-right:5px inset #5F5F5F; border-top:10px inset #5F5F5F; border-bottom:10px inset #5F5F5F;} #kasten2 {position:absolute; right:2%; top:20%; width:10%; height:150px; z-index:3; font-size:15px; overflow-y:auto; overflow-x:hidden; text-align:center; background:url(../res/Marble.jpg); background-attachment:fixed; cursor:hand; border:4px inset #9F9F9F; padding:3px; color:#FF7F00;} #kasten3 {position:absolute; right:3%; top:5%; width:12%; height:60px; z-index:3; overflow:no; text-align:center; padding:0px; cursor:hand; color:#FF7F00; background:#000000;} #kasten4 {position:absolute; left:15%; right:15%; top:0px; width:70%; height:400px; z-index:2; border:0px; padding:0px; spacing:0px;} #kasten5 {position:absolute; width:100%; height:280px; left:0px; right:0px; top:63%; bottom:0px; z-index:2; overflow:no; display:block; cursor:hand; vertical-align:bottom; text-align:center; margin:0; padding:0px; spacing:0px;}

Es währe supercool, wenn ihr das Problem herausfindet.
Vielen Dank im voraus

funktioniert nicht, weil zu viele Fehler drinnen sind. opera ist da weniger fehlertolerant als andere Browser…

Der w3c-Validator validator.w3.org/ hilft da weiter.
Der sagt Dir sogar genau, was ihn stört :wink:

Ein Beispiel:

[color=#FF0000][/color] Ach so: das konnte ich sogar trotz Deines ach so tollen "ich-sperre-mal-eben-die-rechte-Maustaste-und-bevormunde-meine-Besucher-weil-mein-Quelltext-gaaanz-geheim-ist" Scriptes problemlos sehen :unamused: edit: wenn schon CSS (was ja gut ist), dann verzichte doch auch gleich auf Tabellen (böse :astonished: )

Liegt wohl eher daran, dass in der CSS Müll steht der dort nicht hingehört:Animation| lustiges| hintergrund-bilder| techno| selbst gemachte musik| mp3| gif| jpg| witze| desktop| hintergrundbilder| sumatrahome| sumatra-home| sumatra home| Sumatra| sumatra| Sumatra70| sumatra70| animation| hintergrund bilder| videos| zitate| Bilder| Images| GB Bilder| GBBilder| GB-Bilder| kostenlos| kostenlose Bilder| kostenlose-Bilder| free|free images| free-images| kostenloseBilder| freeImages| Website| Homepage| Biken| Biker| Fahrrad| fahrradfahren| Fahrrad fahren| fahrrad-fahren| denisaps| denis aps| Denisaps| Denis Aps| Denis-aps| homepage| zeichnungen| Zeichnungen|
Was hat sowas ^^ in einer CSS verloren? Nicht mal als Kommentar würde ich das durchgehen lassen. Das raus und es funktioniert.

Nun ja, ich wollte es höflicher formulieren… aber eigentlich steht überall Müll drin, in der CSS-Datei ebenso wie in der HTML-Datei.
Beide sollten bereinigt werden - und bei dieser Gelegenheit bietet sich auch das genannte Entfernen der Tabellen an.

Also quasi nochmal neu von vorne… :sweat:

Ähämm - mir fällt da grade noch was auf: position:absolute ist (fast) immer problematisch.
und in diesem falle sogar komplett unnötig - ein floaten der Elemente reicht doch auch…

de.selfhtml.org/css/eigenschafte … .htm#float

ja, bitte… immer. o.0

Eigentlich sieht die Seite im FF3 auch nur komplett Kot aus…
Ich rate dir de.selfhtml.org/css/index.htm komplett durchzulesen

Du gehst ja gleich hart ran!

[quote=“i.deFix”]Der w3c-Validator validator.w3.org/ hilft da weiter.
Der sagt Dir sogar genau, was ihn stört :wink:[/quote]
Das habe ich natürlich auch schon gemacht, wobei dein Beispiel darin nicht erwähnt wurde.
Der ganze Aufbau hat ja auch was mit dem “doctype” zu tun. Womit ich noch nicht so ganz zurecht kam.

Da sollte eigendlich “fixed” stehen. (kleiner fehler)

Daß das kein richtiger schutz ist, weiß ich auch. Wobei mir der Quelltext egal ist. Mir geht es nur um meine Grafiken, da es ja noch genug User giebt, die ja nun gar keine Ahnung haben.
Ich bin ja auch nicht von gestern

[quote]Ähämm - mir fällt da grade noch was auf: position:absolute ist (fast) immer problematisch.
und in diesem falle sogar komplett unnötig - ein floaten der Elemente reicht doch auch…[/quote]
Das ist mir neu. Eine Änderung ist das auf jedenfall wert.

Trotz allem danke für die Kretik

[quote=“freggle”]Liegt wohl eher daran, dass in der CSS Müll steht der dort nicht hingehört:Animation| lustiges| ...
[/quote]
Ups, das sollte nur eine Gedengstütze für mich sein. Da hatte ich nur vergessen die Kommentarzeichen einzufügen.

Danke aber für den Hinweis. Ich hätte das wohl nie gesehen.

[size=200]Am besten werde ich wirklich alles noch mal überarbeiten.[/size]

Ja, bitte.

Sollte ich oben wirklich zu “böse” gewesen sein: sorry…

Ok, aber ein paar Anregungen will ich trotzdem noch geben.

[ol]
[li]CSS-Angaben bitte nur in eine externe Datei. Zusätzliche -Bereiche schaden eher, da die Frage der Priorität gerade für Anfänger nicht ganz so leicht zu durchschauen ist…[/li]
[li] Tabellen nur für Tabellen, und nicht als Layout-Mittel mißbrauchen![/li]
[li] Bevor Du irgendetwas im CSS machst, ist valider Quellcode Pflicht. Meinetwegen auch beide Dateien (*.html und *.css) gleichzeitig bearbeiten (das mache ich auch oft so), aber dennoch bei jeder größeren Änderung und vor allem vor dem Upload validieren![/li]
[li]Bilder in der Vorschau bitte dringend verkleinern. Selbst mit meinem 16000er DSL warte ich eine gefühlte halbe Stunde, bis ich die alle sehe…[/li]
[li]Vergiss’ bitte diese unsäglichen JavaScript-Spielereien (rechte Maustaste, “vielen Dank für Ihren Besuch” usw.). Nix gegen JS, aber bitte für sinnvolle Anwendungen - mit solchen Geschichten outest Du Dich eher als absoluter Anfänger und erzeugst einen eher unprofessionellen Eindruck (das Gegenteil sollte aber wohl der Fall sein :wink: )[/li]
[li] Du wirst Dich leichter tun, wenn Du bereits während der Entwicklung in den verbreiteten Browsern testest (IE >= 6, Firefox 2 und 3, Opera ab Version 8, eventuell noch Konqueror). So siehst Du gleich, wo es Probleme gibt und kannst diese auch gleich ausbügeln, statt später umständlich in ellenlangen Quelltexten rumzufummeln :wink:[/li][/ol]


edit: Mir fällt da gerade noch etwas ein.
Doctype ist eigentlich gar nicht so schwer: normalerweise solltest Du “XHTML1.0” verwenden. Das ist der heutige Standard (HTML4.x ist wirklich alt) und macht insbesondere im IE am wenigsten Probleme.
-> de.selfhtml.org/html/allgemein/g … okumenttyp
Dass Du dabei auf Frames verzichtest, versteht sich (hoffentlich) von selbst… ideal wäre “Strict” als Sprachvariante.

Also eine sinnvolle Verwendung von position: absolute ist
deutlich weniger störungsanfällig als float. Mit float sind beim
MSIE 6 einige Probleme bekannt und da gab es mit CSS2.1 auch
Änderungen, das ist also nicht so ganz harmlos.
Bei einer ordentlichen Struktur des Quelltextes ist float auch oft
nicht sinnvoll anwendbar, ist jedenfalls meine Erfahrung, oft
stehen die Elemente einfach in einer anderen Reihenfolge im
(X)HTML-Quelltext drin, als es für float erforderlich wäre.

Ob XHTML oder HTML4 - der Haken ist, daß der MSIE bislang
gar kein XHTML kann, weswegen das kaum so verwendet wird,
wie es gedacht ist, wenn XHTML als text/html gesendet wird,
interpretiert das jedenfalls derzeit jeder browser als (fehlerhaftes)
HTML4 so wie er das versteht. Bei modernen browsern kann man
das nur vermeiden, indem man XHTML als application/xhtml+xml
sendet, was aber wie gesagt der MSIE nicht interpretieren kann,
weswegen man dem das wohl oder übel als (fehlerhaftes) HTML4
unterjubeln darf.

@hoffmann: ich meinte ja eigentlich auch eher das fehlerhafte Boxmodel des IE, das mit dem “richtigen” doctype umgangen werden kann.
Funktioniert zwar auch mit HTML4.01 strict, aber andererseits sind bei XHTML die Strukturen einfach logischer (Schließen aller Elemente erforderlich, Grundgerüst mit und notwendig etc.)

Was das floaten betrifft: ich habe damit deutlich weniger Probleme als mit “position:fixed”, da z.B. bei letzterem u.U. Inhalte gar nicht mehr erreichbar sind.
“Falsche” Reihenfolge im Quelltext? Gibt es bei ordentlicher Planung nicht. Imerhin kann man Elemente nicht nur links sondern auch rechts floaten, womit z.B. eine Navigationsleist immer hinter dem Inhalt platziert werden könnte… (wobei ich diese Diskussion ohnehin nicht verstehe: Links sind wichtig, können also auch oben stehen - vorausgesetzt, man hat schonmal was von “title=” und aussagekräftigen Linktexten gehört).

[quote=“i.deFix”]

  1. CSS-Angaben bitte nur in eine externe Datei. Zusätzliche -Bereiche schaden eher, da die Frage der Priorität gerade für Anfänger nicht ganz so leicht zu durchschauen ist…
  2. Tabellen nur für Tabellen, und nicht als Layout-Mittel mißbrauchen!
  3. Bevor Du irgendetwas im CSS machst, ist valider Quellcode Pflicht. Meinetwegen auch beide Dateien (*.html und *.css) gleichzeitig bearbeiten (das mache ich auch oft so), aber dennoch bei jeder größeren Änderung und vor allem vor dem Upload validieren!
  4. Bilder in der Vorschau bitte dringend verkleinern. Selbst mit meinem 16000er DSL warte ich eine gefühlte halbe Stunde, bis ich die alle sehe…
  5. Vergiss’ bitte diese unsäglichen JavaScript-Spielereien (rechte Maustaste, “vielen Dank für Ihren Besuch” usw.). Nix gegen JS, aber bitte für sinnvolle Anwendungen - mit solchen Geschichten outest Du Dich eher als absoluter Anfänger und erzeugst einen eher unprofessionellen Eindruck (das Gegenteil sollte aber wohl der Fall sein :wink: )
  6. Du wirst Dich leichter tun, wenn Du bereits während der Entwicklung in den verbreiteten Browsern testest (IE >= 6, Firefox 2 und 3, Opera ab Version 8, eventuell noch Konqueror). So siehst Du gleich, wo es Probleme gibt und kannst diese auch gleich ausbügeln, statt später umständlich in ellenlangen Quelltexten rumzufummeln.[/quote]

Danke erst mal für die Tipps.

zu 1.: Das css in der “index.html” ist die einzige eingebaute style Deffinition. Der Rest liegt alles in den zwei externen Bibliotheken. so wie es sich gehört
zu 2.: Mein Layout besteht nur aus DIV’s Containern. Ganz kann ich leider noch nicht auf Tabellen verzichten.
zu 3.: CSS habe ich noch nie validiert. Werde ich aber mal machen.
zu 4.: Das wollte ich auch schon machen, aber wenn ich neue Bilder einfügen möchte, dann müsste ich ja jedes Bild noch einmal ändern. Mit einer Datenbank kenne ich mich noch nicht ganz aus.
zu 5.: Da hast du wohl recht. Ich beschränke mich jetzt immer auf das Wesendliche.
zu 6.: Das habe ich früher natürlich auch gemacht. Da gab es aber sonnst nie Probleme, weil ich das anscheinend schon von vorneherein ordendlich strukturiert habe. Erst als ich an den DIV’s styles etwas geändert habe, war alles hin.

Da habe ich ja erst mal was zu tun. Danke aber.

[quote=“hoffmann”]Also eine sinnvolle Verwendung von position: absolute ist
deutlich weniger störungsanfällig als float. [/quote]
Jetzt bin ich ja doch etwas irretiert. Am besten ist es, ich probiere es doch einfach nur aus.

i.deFix - position: fixed ist schon deshalb problematischer als
position: absolute, weil der MSIE6 das fehlerhaft interpretiert
(als position: static) und es etwa bei Amaya nicht implementiert
ist. Mit der Erreichbarkeit des Inhaltes kann es natürlich besonders
bei position:fixed Probleme geben, kann man aber durch gewisse
Tricks umgehen, mit denen man erreicht, daß overflow bei
solchen Elementen wirkt, was passiert, wenn Höhe und Breite
explizit gegeben sind.

Bei float kann es besonderes beim MSIE Probleme mit dem
Box-Modell-Fehler geben.
Ich habe da mit diesem oder jenem browser auch schon öfter
gesehen, daß offenbar nicht genug Platz aus der Sicht des
browsers vorhanden war und dann der Kram untereinander
angeordnet wird - ist ja auch Sinn der Eigenschaft, kommt bei
solchen Beispielen aber eigentlich unnötig durch eine
Ungeschicklichkeit oder einen Fehler des Autors zustande.
In dem Sinne ist das deutlich anfälliger gegen Ungenauigkeiten
und Ungeschicklichkeiten als position: absolute.

Anordnung des Inhaltes - habe ich nie verstanden, warum eine
gesamte Projektnavigation wichtiger sein soll als der eigentliche
Inhalt einer Einzelseite. Der Nutzer wird doch am Inhalt der
Seite interessiert sein und nicht gleich wieder eine andere
aufsuchen wollen, bei einem Vorlese-browser ist es da natürlich
sehr lästig, das gesamte Menü vorgelesen zu bekommen, welches
einen gar nicht interessiert. Da ist es viel besser, auf der Startseite
einen projektweiten Seitenindex zu haben und auf den
Einzelseiten eine kleinere Navigation anzuhängen.
Die meisten Seiten sind heutzutage sowieso durch überflüssigen
Kram unnötig unübersichtlich und kompliziert gemacht.

Also gestern habe ich die meisten Fehler alle überarbeitet und dabei auch festgestellt, das ich „position:absolute;“ ruhig stehen lassen kann. Dafür habe ich auch die ganze Nacht daran gesessen.

[quote=„hoffmann“]Die meisten Seiten sind heutzutage sowieso durch überflüssigen
Kram unnötig unübersichtlich und kompliziert gemacht.[/quote]
Ich wollte mal eine Seite basteln, wo die schlechtesten Webseiten im Netz aufgelistet sind.
Damit sich die Autoren (die dort drin stehen) mal gedanken machen, ob sie nicht doch lieber einen Profi die Arbeit machen lassen sollten. Leider giebt es von diesem Webmüll viel zu viel im Netz. Das ist wie im Supermarkt. Dort sind auch ein großer Teil Lebensmittel, die die Hersteller hätten selber mal probieren sollen.
:smoke: So, jetzt musste ich mal meinen Frust ablassen. :stress: