Hallo Ihr Lieben,

warum verhält sich der Opera zickig, wenn ich eine Einrückung ohne Listenpunkte eingebe?

Alle anderen Browser rücken die Liste ein, nur Opera rückt sie nach außen? Hat jemand eine Idee dazu?



Im CSS steht nur die Angabe font-size: smaller

Gruß Uschi

Hallo Uschi,

ich kann es nicht genau sagen. Ich könnte mir aber vorstellen, dass das mit Fehlertoleranz zu tun hat. Nach W3C darf der ul-Tag nur li-Tags enthalten. Diese werden dann auch eingerückt. Möglicherweise geht Opera davon aus, dass nicht in li-Tags eingeschlossener Text somit auch nicht eingerückt wird. Wenn Du also die richtige Notation nach W3C benutzt, sollte es auch keine Pobleme geben.

Hi Uschi,
versuche es mal so:


Ist Opera geprüft
Kannst die Style Angaben natürlich mit 'class=' auch in die CSS packen...

cu
Conny

Danke Conny,

Ich hab mir schon gedacht, dass ich um noch eine Linkauszeichnung nicht rumkomme *grummel*, wenn ich auch den Opera befriedigen will ;-))

Hab ich eigentlich schon mal gesagt, dass ich Firmen hasse, die sich nicht auf Standards einigen können? ;-))

@Ingo der Text rückt nicht nur nicht ein, der Text rückt aus ;-))

Gruß Uschi

Vielleicht könntest Du mal etwas mehr Code oder eine URL posten? Opera und Mozilla sind die standardkonformsten Browser, die wo gibt heutzutage. Wenn einer davon zickt, dann ist es in den meisten Fällen nicht die Schuld des Browsers.


Vielleicht möchte er besser behandelt werden? Wie gesagt, ohne ein besseres Beispiel ist die Lösungssuche ein reines Ratespiel (z.B. könnten auch unterschiedliche Browser-Stylesheets eine Rolle spielen).

Im übrigen halte ich es für fragwürdig, Listenelemente nur zur Einrückung von Text zu verwenden, es sei denn, es handelt sich wirklich um eine Liste.

Gruß
n!

Hallo Netizen,



Ich hab mich einfach von dem Icon in Phase 5, das eine Texteinrückung vorgaukelt, verführen lassen und werde mich an Connys und Ingos Rat halten und mit li auszeichnen.

Den Opera seh ich etwas anders als Du, denn er reagiert sehr oft IE konform, während sich Mozilla weigert.



Es handelt sich um längere Texte, die aber Aufzählungen sind und die ich deshalb einrücken will, allerdings ohne Aufzählungszeichen. Aber wenn wir schon dabei sind, kennst Du eine andere Möglichkeit Texte einzurücken? text-ident rückt meines Wissens nur die erste Zeile ein. Und noch ein neues Absatzformat im CSS will ich mir nicht antun.

Gruß Uschi

Ok, valider Code sollte immer die Grundlage sein.

Hast Du dafür ein Beispiel?


Ok, dann dürfte eine Liste die vernünftigste Auszeichnung sein, je nach Inhalt eine <ul> oder evtl. <dl>.


Wenns um ganze Absätze geht, dann mit entsprechenden margins für die p-Elemente. Je nach Kontext braucht man dabei nicht mal Klassen zu vergeben, oftmals reichen Kontextselektoren (descendant selectors). text-indent rückt nur die erste Zeile ein, kann ganz sinnvoll sein, um Absätze optisch auseinanderzuhalten.

Mein Kommentar zielte auch eher in die Richtung, daß viele Leute z.B. das blockquote-Element für Einrückungen mißbrauchen, wie es selbst in einigen HTML-"Anleitungen" empfohlen wird. Dein gepostetes Beispiel ließ anfangs etwas ähnliches vermuten.

Gruß
n!

Hi Netizen,

So ich hab dir mal ein Beispiel gebastelt ;-))


Hier ist das Erste und hier das Zweite

Im ersten Beispiel wird die Grafik weder im Mozilla noch im Firefox angezeigt, der Opera und auch der IE stellen sie mit dem Effekt dar, der im CSS bei Hover steht.

Im 2. Beispiel stellen der IE, Mozilla und Firefox die Grafiken zentriert dar, während der Opera meint, er müsste sie linksbündig darstellen. Außerdem zickt der Opera beim Hover im Menü beim aktiven Link.

Der Quelltext ist im 1. Fall einschließlich CSS, im 2. Fall ist die CSS eine externe Datei, die aber nur das Menü betrifft.


Magst Du das mal übersetzen?
Was genau sind Kontextselektoren? Ich kann damit überhaupt nicht anfangen.

Lieber Gruß Uschi

Schau ich mir nachher mal an.


Du benutzt sie ständig, vielleicht ohne es zu wissen?

5.5 Descendant selectors
http://www.w3.org/TR/CSS2/selector.html#descendant-selectors

Ein HTML/XML Dokument stellt aus technischer Sicht einen Baum dar, jedes Element mit Ausnahme des Wurzelknotens hat genau einen Vorgänger. Um nun ein spezielles Element oder eine Gruppe von Elementen auszuwählen, kann man diesen entweder eine Klasse oder gar ID zuweisen, oder man "hangelt" sich mit Kontextselektoren am Pfad entlang. Kleines Beispiel mit einer Liste:

Um die Links in dieser Liste zu "stylen", kann man ihnen entweder eine Klasse/ID zuweisen oder - eleganter - nur einem der Elternelemente (in diesem Fall zweckmäßigerweise die Liste selbst) und sich von dort aus vorarbeiten:

Genauso geht es mit praktisch allen Elementen, auch mit Absätzen, die vielleicht an einer Stelle eine etwas andere Formatierung benötigen als auf dem Rest der Seite. Man braucht eigentlich nur in wenigen Fällen Klassen/IDs, meist gehts ohne. Und mehr wollte ich nicht gesagt haben.

Ich bin mir aber ziemlich sicher, Dir nix Neues erzählt zu haben ...

Gruß
n!

Hallo Uschi,

zu Deinem ersten Beispiel - die Hintergrund-Angaben bringen mich auch immer zum Wahnsinn - klappt oft nicht, obwohl ich mir sicher bin, dass kein Fehler drin ist....

Am besten ist es, alles einzeln zu definieren, also

background-image: url(bild.jpg);
background-position: top left;
background-repeat: no-repeat;


Dann klappts normalerweise, wenn kein Fehler drin ist...

Grüße, Terry

Mozillas Verhalten dürfte korrekt sein, während Opera hier IMHO etwas sehr "verzeihend" ist. Ich hab allerdings auch noch nie leere Anker verwendet.

Hier denke ich, daß Opera im Recht ist. Es kommen mehrere Dinge zusammen: das center-Element, die feste Breite der div-Container für die Bilder sowie text-align: center. Ich interpretiere das Ergebnis so, daß Opera das center-Element in margin: auto der betroffenen Elemente umwandelt (würde für mich Sinn machen), das Stylesheet dieses aber mit margin-left: 10px wieder überschreibt, somit sind die Bilder linksbündig.

Ich würde sowohl das center-Element (deprecated) als auch die Breitenangabe weglassen, lediglich text-align: center drinlassen, dann funktionierts wie gewünscht (div-Element dehnt sich per default auf 100% aus, alle enthaltenen Inline-Elemente wie Bilder und Text werden zentriert).


Scheint am z-index zu liegen, wofür brauchst Du das überhaupt?

Darüberhinaus kannst Du solche Dinge wie

• background-position: 0 0;
• background-repeat: repeat;

rausschmeißen, das sind die default-Werte (es sei denn, Du willst zuvor veränderte Werte auf ihren default-Wert zurücksetzen).

Gruß
n!

Im gegebenen Beispiel ist der Anker leer, Mozilla hat schlicht und ergreifend nix zum darstellen. Da ändern auch die Breiten- und Höhenangaben nichts, die für Inline-Elemente in den meisten Fällen ohnehin nicht zulässig sind.

Man könnte das Element mit display: block als Blocklevel-Element deklarieren, dann klappts auch mit den Größenangaben und dem Hintergrundbild.


Würde in diesem Fall nichts ändern und bläht nur das Stylesheet auf. Davon abgesehen hab ich noch keinen Browser gesehen, der mit Shorthand-Properties Probleme hätte (NN4 vielleicht).

Gruß
n!

Hallo Netizen und Terry,
ich sag erstmal nur danke ;-)) Einiges hab ich verstanden, einiges noch nicht so ganz ;-))

Die feste Breite ist drin, weil die Seite auf jeden Fall mit 800 x 600 richtig dargestellt werden soll. Ich schau mir das morgen noch mal genauer an, heute begreif ich das nur zum Teil, außerdem bin ich etwas demotiviert zurzeit, was aber nichts mit den Seiten selber zu tun hat.

Der z-index ist für den Opera drin, weil er vorher die Grafik beim Hover nur halb dargestellt hat.

Der leere Anker wird ohne Probleme normalerweise auch vom Mozilla und Firefox interpretiert. Ich hatte ihn aber bei mir auf den Seiten gefüllt und es ging auch nicht.

Zu Deinem 1. Beitrag Netizen: sicher benutze ich, wie war das? Kontextselektoren, aber ich hab das Wort heute zum ersten Mal gelesen und wenn mir was nichts sagt, dann frag ich nach ;-))

Danke Euch für Eure Mühe

Ganz lieber Gruß

Uschi

Vielleicht hab ich mich auch nur zu blöde ausgedrückt. Kommt vor hin und wieder. Ggf. nachfragen.


In CSS1 hießen die Dinger noch "contextual selectors", in CSS2 "descendant selectors".

Gruß
n!