Opera zeigt nicht alles an

Computer: Software & Programmierung HTML & CSS
#1

Hallo,

ich versuche eine HP mit Css zu basteln. Ich schaue mir das Ergebnis dann immer in IE6, IE7 und Firefox2 an.
Bis auf ein paar kleinere Abweichungen sieht die Seite auch überall gleich aus.

Nun habe ich aber Opera9 installiert und da gibt´s nun einige größere Abweichnugen wie z.B:

Dem äußersten Container habe ich einen weißen Rahmen mit 5px zugewiesen. diesen zeigt nur Opera nicht an, zu mindestens nicht das Weiß. Zum Footer ist allerdings ein abstand von ca. 5px.

border: 5px solid #f5f5f5;

Ich habe u.a. 2 Div Container, einen links(Menü) und einen rechts (für den Seitentext). Dem rechten habe ich eine weiße Hintergrundfarbe und ein Hintergrundbild zugewiesen.
Wird die Seite aufgerufen oder aktualisiert, zeigt Opera das HG-Bild auch an. Fahre ich mit der Maus jedoch über irgendeinen Link (ohne zu klicken), verschmindet aufeinmal das HG-Bild ganz oder zu 90% und der Hintergrund ist auch nicht weiß.

#contents
{
float:left;
height: 100%;
width:550px;
text-align:justify;
padding:10px 20px 50px 20px;
margin:0px;
background-color:#ffffff url(images/mamor2.jpg);
}

Hat Opera ein Problem mit CSS, gibts dafür extra Anweisungen oder mache ich nur wieder was falsch?

Für antworten bedanke ich mich jetzt schon.

Gruß Thorsten

#2

Nun habe ich aber Opera9 installiert und da gibt´s nun einige
größere Abweichnugen (…)

Hallo Thorsten,
hier ist eine schöne Übersicht über das Browser-wer-kann-was:

http://www.css4you.de/browsercomp.html

Freundliche Grüße,
Markus

#3

Hallo Markus,

vielen Danke für deine schnelle Antwort. Genau auf der Seite war ich, als ich das Problem festgestellt habe.
Aber nach dieser Liste müsste Opera genau das anzeigen. Ich habe sogar alles einzeln eingefügt, also z.B.:

background-color:#ffffff;
background-image: url(images/mamor2.jpg);

hat aber auch nichts gebracht. Hast du evtl. noch einen andern Link oder Vorschlag? Ich Google schon seit heute Morgen und hab noch
nichts gefunden, was funktionieren könnte.

Gruß Thorsten

#4

Hallo Thorsten,
ich kämpfe selbst noch die ersten Schlachten mit css, und bin kürzlich auf die HP gestossen, ohne mich genau damit zu befassen…

Aber evtl. macht die Leerstelle in

background-image: url(images/mamor2.jpg);

den Ärger?

Gruss,
Markus

#5

Nö, leider nicht.

#6

Hi Thorsten,

ich versuche eine HP mit Css zu basteln. Ich schaue mir das
Ergebnis dann immer in IE6, IE7 und Firefox2 an.

Opera sollte zu den Test-Browsern dazugehören.

Wird die Seite aufgerufen oder aktualisiert, zeigt Opera das
HG-Bild auch an. Fahre ich mit der Maus jedoch über
irgendeinen Link (ohne zu klicken), verschmindet aufeinmal das
HG-Bild ganz oder zu 90% und der Hintergrund ist auch nicht
weiß.

Ein seltsames Verhalten, da muss man den Kontext sehen. Aber das:

 background-color:#ffffff url(images/mamor2.jpg);

ist auf jeden Fall falsch, mit background-color gibst Du nur eine Farbe an. Du meinstest wahrscheinlich

background:#fff url(images/mamor2.jpg);

Diese sogenannte shorthand-property wäre gleichbedeutend mit

background-color:#fff; 
background-image:url(images/mamor2.jpg);

Hat Opera ein Problem mit CSS

Opera unterstützt weitaus besser und mehr CSS als Firefox, der selbst schon sehr gut ist. Die meisten Abstandsunterschiede hält man sich mit der ersten CSS-Anweisung vom Hals:

\* { margin:0; padding:0; }

Für die Standardabstände verwendet Opera mancherorts z.B. margin, IE und Firefox Padding, etc. Die Standardabstände sollte man sich von Anfang an vom Hals schaffen und alles selbst stylen, spart eine Menge Ärger.

gibts dafür extra Anweisungen

Es gibt proprietäres CSS für diese Browser, aber das ist in diesem Fall wohl nicht notwendig. Der Fehler liegt woanders.

oder mache ich nur wieder was falsch?

Das erste Problem muss man im Kontext sehen, gibt es einen kompletten Testcode oder einen Link zur Seite?

Schönen Gruß
Rudy

#7

Hallo Rudy,

vorab, mein Fehler, habe natürlich

background:#fff url(images/mamor2.jpg);

verwendet. Hatte es auch mit

background-color:#ffffff;
background-image:url(images/mamor2.jpg);

versucht und beim Kopieren hierein

background-color:#ffffff url(images/mamor2.jpg); gesetzt. Dummerle ich!

Habe die Seite mal hochgeladen: www.thorstengrote.de/test/index.htm
und test/format.css

Gruß Thorsten

#8

Hi Thorsten,

ich habs jetzt hier daheim nur auf Fx, Opera und Konqueror testen können, aber das Hauptproblem scheint das display:table; in #container zu sein. Nimm es heraus, und die Browser zeigen es richtig an. Ich sehe den Sinn in dem display:table gar nicht, was wolltest Du damit bezwecken? Ich kann mich an kein Projekt erinnern, wo ich das jemals gebraucht hätte.

Ein paar wichtige Tips:
Validiere Dein XHTML und Dein CSS. Da sehe ich noch Fehler, z.B. background-height, die Eigenschaft gibt es nicht. Das XTHML enthält nur zwei kleine Fehler, die nicht weiter tragisch sind - dennoch, bevor Du Fehler suchst, immer zuerst validieren; oft löst es das bereits, besonders bei Schachtelungsfehlern im XHTML.

http://validator.w3.org
http://jigsaw.w3.org/css-validator/

Ein paar Stiltips: Rücke Deinen Code ein, das macht ihn lesbar. Wenn Du ein div öffnest, schließ es sofort und gib einen Kommentar dahinter, z.B. Wenn "content dann mal viel Inhalt hat, dankt der Code es Dir durch leichte Lesbarkeit und schnelles Finden der schließenden Tags. Beim CSS würde ich das Element davorsetzen, für das die id oder die Klasse (falls zutreffend) sich beschränkt, z.B. div#container { … } Da liest sich das CSS viel leichter und Fehler sind leichter auszuschließen, wenn Du z.B. unbeabsichtigt gleiche Klassen für verschiedene Elemente anwendest.

Ciao
Rudy

1 Like
#9

Hi Rudy,

zu display:table; ich habe bei einem anderen Versuch (gleicher Aufbau) das Problem gehabt, habs eigentlich immer noch, das nicht beide Container (rechter und linker) gleich hoch sind. Ich habe dann tausende von Sachen ausprobiert, was ich in Google so gefunden habe. Da ich eigentlich eine CSS-Null bin, kann ich dir auch nicht genau sagen wofür man es braucht, hat irgendwas mit dem schließen einens Container zu tun. Gebracht hat´s mal nicht´s! Hab es auf die alte Weise gemacht und einen Transparenten Platzhalter gesetzt. (Man verzeihe mir!)

Hab display:table; jetzt gelöscht und siehe da, Opera zeigt den Rahmen und das HG Bild an. Vielen Dank, du bist klasse!!!

Das mit background-height war auf mein Problem oben bezogen nur ein Versuch. Man macht viele Dummheiten, wenn man verzweifelt ist. Natürlich werde ich deine anderen Tipp´s auch befolgen.

Wobei ich mit dem Validieren nicht ganz klar komme. z.B. wird mir die hintere Klammer bei

#10

Hi Thorsten,

zu display:table; ich habe bei einem anderen Versuch (gleicher
Aufbau) das Problem gehabt, habs eigentlich immer noch, das
nicht beide Container (rechter und linker) gleich hoch sind.

Diese Problem kannst Du nicht umgehen, nur vortäuschen, dass Du es nicht hast - durch eine Hintergrundgrafik im äußeren Container, der die beiden inneren Container enthält. Es ist eine gängige Technik die Höhe durch y-wiederholende Grafiken vorzutäuschen - mit CSS sind die Elemente eben gerne so hoch, wie der Inhalt es fordert, stellt man keine fixe Höhe ein. Aber mit einem Clearenden Element bekommt man dafür immer die äußeren Container so hoch, wie die darin nebeneindander floatenden Container fordern.

Die Validator-Geschichten hast Du ja gelöst sehe ich - sehr gut, wünsche gutes Gelingen!

Ciao
Rudy

#11

Super, vielen Dank!!!