fehlerhafte darstellung in opera

[jojo]

hallo leute,

ich habe zwei probleme bei der darstellung einer in xhtml und css erstellten webseite mit dem opera-browser (version 7.54):

1.) die abstand (soll 5px sein) zwischen den einzelnen listenpunkten in einem vertikalen menü ist kleiner als etwa bei der anzeige in firefox, ie, ns.

liste:

<ul id="navibox">
<li><img name="x" src="y.gif" alt="z" /></li>
<li><img name="x2" src="y2.gif" alt="z2" class="border1white" /></li>
...
</ul>

css:

ul#navibox {
  padding: 0px; margin: 0px; text-align : left;
}

ul#navibox li{
  list-style: none; padding: 0px; margin: 0px; margin-bottom: 5px;
}

.border1white {
  margin: 0px; padding: 1px; border: 1px solid #FFFFFF;
}

  
2\.) ein div-container, der unterhalb von zwei anderen div-containern ist, soll den abstand 10px nach oben haben. auch hier zeigt opera mindestens einen freien platz von 20px an.  
  
### css:  
  
div#linie {  
 clear: both;  
 width: 730px;  
 height: 16px;  
 background-image: url(../pictures/xy.gif);  
 background-repeat: no-repeat;  
}  
  
div#liniei {  
  padding: 0px; margin: 0px;  
}  
  
  
gibt es für opera auch hacks ähnlich wie für den ie oder sehe ich da (m)einen fehler nur nicht?! wäre über hilfe sehr dankbar.  
  
viele grüße!  
  
jojo  

[Gernot Back]

Hallo jojo,

ich habe zwei probleme bei der darstellung einer in xhtml und css erstellten webseite mit dem opera-browser (version 7.54):

Ich vermute, du hast die Doctype-Variante "transitional" statt "strict" genommen, da rutschen bei Opera die Listenpunkt-Abstände zusammen und nach oben.

Vielleicht solltest du wegen des Abstandes auch font-size und/oder line-height in deinen Listen definieren, auch wenn sie keinen Text, sondern nur Bilder enthalten.

Gruß Gernot

[jojo]

hallo gernot,

Ich vermute, du hast die Doctype-Variante "transitional" statt "strict" genommen, da rutschen bei Opera die Listenpunkt-Abstände zusammen und nach oben.

hey, danke, die liste wird jetzt richtig angezeigt.
leider ist damit der div bei 2.) noch weiter nach unten gerutscht. naja, vielleicht finde ich da noch 'ne andere lösung.

viele grüße!

jojo

[MudGuard]

Hi,

1.)

ist ja wohl schon gelöst.

2.) ein div-container, der unterhalb von zwei anderen div-containern ist, soll den abstand 10px nach oben haben. auch hier zeigt opera mindestens einen freien platz von 20px an.

css:

div#linie {
clear: both;
width: 730px;
height: 16px;
background-image: url(../pictures/xy.gif);
background-repeat: no-repeat;
}
div#liniei {
  padding: 0px; margin: 0px;
}

Da soll also ein Abstand von 10px nach oben sein.
Ich sehe in Deinen Angaben NICHTS, was einen Abstand von 10px bewirken könnte.

Abgesehen davon: wir wissen ja noch nichtmal, wie die Dokumentstruktur aussieht, auf die dieses CSS angewendet werden soll.
Insofern kann man hier sowieso nur raten.

Vielleicht hat ja das Element vorher einen unteren margin von 20px.

cu,
Andreas

[jojo]

hallo,

Da soll also ein Abstand von 10px nach oben sein.
Ich sehe in Deinen Angaben NICHTS, was einen Abstand von 10px bewirken könnte.

ok, stimmt, ich habe vergessen das zu schreiben. also da ist ein bild, welches oben zu 10px höhe transparent ist. der div-bereich darüber ist auf margin-bottom: 0px; eingestellt. vorher hatte ich margin-bottom: 10px, aber da das bei opera mehr waren, habe ich ein bild genommen, dass die 10px abstand simuliert. opera scheint nun aber trotzdem noch ca. 10px hinzuzufügen unter den oberen div-bereich. (unterer div mit bild auch margin: 0px).

[ div 1 mit float: left]<-15px->[ div 2 mit float: right]*
[ div 3 mit clear: both und eigentlich margin-top: 10px ]

*höhe bei beiden gleich

viele grüße!

jojo

[Frederik]

Hi Jojo,

so konkret kann ich Dir nicht weiterhelfen, aber mal einen allgemeinen Tipp geben (falls du das nicht sowieso schon machst):

Wenn sowas bei mir passiert, gebe ich allen beteiligten Elementen (divs) kurzfristig ein border, damit ich sehe, welche Ausmaße die Elemente tatsächlich haben. Praktisch sind für sowas auch Bookmarklets, auch wenn die in Opera nur funktionieren, wenn Lesezeichen nicht in einem neuen Tab geöffnet werden.

Manchmal ist ja z.B. gar nicht der margin der Übeltäter, sondern ein padding, oder der margin eines Kind-Elements (z.B. ein p im Footer).

Liebe Grüße
Fredo

[Ashura]

Hallo Frederik.

Wenn sowas bei mir passiert, gebe ich allen beteiligten Elementen (divs) kurzfristig ein border, damit ich sehe, welche Ausmaße die Elemente tatsächlich haben.

Wenn es Opera ist, kann man hier sogar outline verwenden, was im Gegensatz zu border keinen Platz einnimmt und nützlicherweise mit der Farbe "invert" versehen werden kann.

Nur folgendes habe ich bisher noch nicht verstanden, wenn es mir jemand erklären könnte, wäre ich sehr dankbar:

"Outlines may be non-rectangular."

Was soll das bedeuten--"nicht rechteckig/-winklig"?

Gruß, Ashura

[MudGuard]

Hi,

Nur folgendes habe ich bisher noch nicht verstanden, wenn es mir jemand erklären könnte, wäre ich sehr dankbar:

"Outlines may be non-rectangular."
Was soll das bedeuten--"nicht rechteckig/-winklig"?

Nicht-rechteckig. Beispiel: <area shape="polygon" >

Ach ja, Firefox unterstützt -moz-outline statt outline (ändert sich aber afaik mit Deer Park Alpha 1 zu outline-Unterstützung). invert wird jedenfalls auch unterstützt.

cu,
Andreas

[Ashura]

Hallo MudGuard.

Nicht-rechteckig. Beispiel: <area shape="polygon" >

Also erhält <area shape="polygon"> einen rechtwinkligen Rahmen, wenn border angewandt wird?

Ach ja, Firefox unterstützt -moz-outline statt outline (ändert sich aber afaik mit Deer Park Alpha 1 zu outline-Unterstützung). invert wird jedenfalls auch unterstützt.

Gut zu wissen, dass zumindest Firefox das nun auch unterstützen möchte.

Gruß, Ashura

[MudGuard]

Hi,

Nicht-rechteckig. Beispiel: <area shape="polygon" >

Also erhält <area shape="polygon"> einen rechtwinkligen Rahmen, wenn border angewandt wird?

Ich hätte doch erst nachlesen sollen.
area ist das falsche Beispiel.

border ist afaik immer rechtwinklig bzw. rechteckig.

Mit nicht-rechteckig sind eher inline-Elemente gemeint, die sich über mehrere Zeilen erstrecken:
Wenn die ganzen b zum Beispiel in einem span mit outline:

+----+
aaaaaaa|bbbb|
+------+    |
|bbbbbbbbbbb|
|           |
|bbbbbbbbbbb|
|    +------+
|bbbb|aaaaaaa
+----+

Ach ja, Firefox unterstützt -moz-outline statt outline (ändert sich aber afaik mit Deer Park Alpha 1 zu outline-Unterstützung). invert wird jedenfalls auch unterstützt.
Gut zu wissen, dass zumindest Firefox das nun auch unterstützen möchte.

Also Test im Deer Park hat ergeben, daß outline und -moz-outline unterstützt werden (Firefox kann nur -moz-outline)
(echt lästig, daß die beiden nicht parallel laufen …)

cu,
Andreas

[Frederik]

Hi!

Ich hätte doch erst nachlesen sollen.
area ist das falsche Beispiel.

Naja, aber auf der Seite des W3C steht doch gerade:

At times, style sheet authors may want to create outlines around visual objects such as buttons, active form fields,
!!! image maps !!!
, etc., to make them stand out.

Also beschränken sich die Browser (also Gecko und Opera) bisher nur auf einen Teil des intendierten Anwendungsgebietes von outline?

LG
Fredo

[MudGuard]

Hi,

area ist das falsche Beispiel.
Naja, aber auf der Seite des W3C steht doch gerade:
At times, style sheet authors may want to create outlines around visual objects such as buttons, active form fields,
!!! image maps !!!

Eine image map ist aber etwas anderes als ein area-Element.

cu,
Andreas

[Frederik]

Eine image map ist aber etwas anderes als ein area-Element.

Aber wie mache ich eine image map denn sichtbar? Ich habe es mit outline auf area, aber auch direkt auf dem map Element probiert, und beides hatte keinen Effekt.

LG
Fredo

[Gernot Back]

Hallo Frederik,

Aber wie mache ich eine image map denn sichtbar?

Gar nicht!

Ich habe es mit outline auf area, aber auch direkt auf dem map Element probiert, und beides hatte keinen Effekt.

Was für einen Effekt sollte das denn haben? Eine Map ist lediglich ein Verhaltensanweisung für ein Image, dem sie zugeordnet ist.

Wenn du ein Gesetzbuch in Leder binden lässt, hat das ja auch keine Auswirkung auf soziale, ökonomische oder politische Situation des Landes in dem das Gesetz gilt!

Gruß Gernot

[Frederik]

Hi Gernot,

Was für einen Effekt sollte das denn haben? Eine Map ist lediglich ein Verhaltensanweisung für ein Image, dem sie zugeordnet ist.

Das frage ich mich ja auch. Es ist ja nicht so, dass ich das jetzt unmittelbar bräuchte, aber mich interessiert einfach, was das W3C meint, wenn sie schreiben, dass man outlines "around visual objects such as [...] image maps" kreieren kann. Eine Möglichkeit, und vielleicht eine ganz interessante, wäre ja, die image map auf dem Bild nachzuzeichnen. Aber vielleicht ist es ja auch anders gemeint. War ja nur reine Neugier.

Liebe Grüße
Fredo

[Ashura]

Hallo MudGuard.

Wenn die ganzen b zum Beispiel in einem span mit outline:

+----+
aaaaaaa|bbbb|
+------+    |
|bbbbbbbbbbb|
|           |
|bbbbbbbbbbb|
|    +------+
|bbbb|aaaaaaa
+----+

Habe ich eben einmal mit outline und -moz-outline getestet.
Das Ergebnis: Das span wird eingerahmt und erhält im FF sogar einen Rahmen mit abgerundeten Ecken.

Versuche ich das gleiche mit border, wird diese links und rechts nicht angezeigt, sowohl im FF als auch Opera.

Ist das normal?

Gruß, Ashura

[MudGuard]

Hi,

Habe ich eben einmal mit outline und -moz-outline getestet.
Das Ergebnis: Das span wird eingerahmt und erhält im FF sogar einen Rahmen mit abgerundeten Ecken.

Versuche ich das gleiche mit border, wird diese links und rechts nicht angezeigt, sowohl im FF als auch Opera.

Ist das normal?

Ja, siehe http://www.w3.org/TR/REC-CSS2/visuren.html#inline-formatting:
When an inline box is split, margins, borders, and padding have no visual effect where the split occurs.

cu,
Andreas

[Ashura]

Hallo MudGuard.

Ja, siehe http://www.w3.org/TR/REC-CSS2/visuren.html#inline-formatting:
When an inline box is split, margins, borders, and padding have no visual effect where the split occurs.

Aha, dankeschön. :-)

Gruß, Ashura

[Frederik]

Hallo!

Erst mal Dank an Ashura für den Tipp, kannte ich noch nicht, ist aber sehr praktisch!

"Outlines may be non-rectangular."
Was soll das bedeuten--"nicht rechteckig/-winklig"?

Nicht-rechteckig. Beispiel: <area shape="polygon" >

So hätte ich das auch verstanden, aber weder Firefox (mit -moz-outline) noch Opera zeigen mir eine polygone (oder überhaupt eine) outline um eine area...

Ist aber auch nicht das wichtigste...

Liebe Grüße
Fredo

[wahsaga]

hi,

also da ist ein bild, welches oben zu 10px höhe transparent ist. der div-bereich darüber ist auf margin-bottom: 0px; eingestellt. vorher hatte ich margin-bottom: 10px, aber da das bei opera mehr waren, habe ich ein bild genommen, dass die 10px abstand simuliert.

pfui bah - das ist ja im grunde nichts anderes als der rückfall in alte "spacer.gif"-zeiten.

opera scheint nun aber trotzdem noch ca. 10px hinzuzufügen unter den oberen div-bereich.

dann solltest du dieses problem mal vernünftig analysieren (außer dir kann das hier ja immer noch keiner, weil du immer nur tröpfchenweise informationen in deine postings einfließen lässt), anstatt auf solche "widerlichen" workarounds zurückzugreifen.

gruß,
wahsaga