Opera nur mit ganzzahligen Prozentwerten?

[Gunther]

Einen schönen Samstagabend zusammen!

Ich arbeite gerade an einem Layout bei dem ich die Spaltenbreiten zweier Spalten jeweils in Prozent angeben wollte.

Dabei ist mir gerade aufgefallen, dass ich eine Abweichung in (allen) Opera Browsern (6 - 8.50) habe.

So wie es aussieht akzeptiert (berücksichtigt) Opera nur den ganzzahligen Teil einer Prozentangabe (z.B. für width).

Bei background(-position) und Angabe eines nicht ganzzahligen Prozentwertes zeigt OP das Bild gleich gar nicht mehr an.

Nach meinem Verständnis der CSS2/2.1 sind aber ausdrücklich auch nicht ganzzahlige Werte für Prozentangaben zugelassen, oder sehe ich da etwas falsch?

Gruß Gunther

[Christoph Schnauß]

hallo Gunther,

Nach meinem Verständnis der CSS2/2.1 sind aber ausdrücklich auch nicht ganzzahlige Werte für Prozentangaben zugelassen, oder sehe ich da etwas falsch?

Nein. Allerdings ist eine Empfehlung, wie Browser CSS berücksichtigen _sollten_, nicht mit dem gleichzusetzen, was sie tatsächlich _tun_ und was ihnen von den Browserentwicklern implementiert wurde.

Und dann: es kann antürlich immer noch an deinem Quelltext liegen. Den solltest du nun mal herzeigen. Ich kenne halt auch in Opera derlei Probleme nicht.

Grüße aus Berlin

Christoph S.

[Orlando]

Hallo Gunther,

So wie es aussieht akzeptiert (berücksichtigt) Opera nur den ganzzahligen Teil einer Prozentangabe (z.B. für width).

Das kann ich nicht bestätigen.

Bei background(-position) und Angabe eines nicht ganzzahligen Prozentwertes zeigt OP das Bild gleich gar nicht mehr an.

Poste bitte den Quelltext oder eine Adresse. Vielleicht liegt ein anderer Fehler vor.

Nach meinem Verständnis der CSS2/2.1 sind aber ausdrücklich auch nicht ganzzahlige Werte für Prozentangaben zugelassen

Korrekt. Oft sind sie sogar notwendig, weil Browser anders runden.

Grüße
 Roland

[Gunther]

Hallo Roland und Christoph!

Ihr wollt meinen Quellcode sehen?
Na gut..., ;-)

Ich habe gerade noch (in einem anderen Zusammenhang) ein "Arbeitsbeispiel" online (ist nicht fertig layoutet - also bitte drüber hinwegsehen), an dem das Problem zu sehen ist (allerdings nur mit aktiviertem JS).

http://top-topics.com/test-temp/index.html

Ihr könnt ganz unten auf der Seite auf den button klicken, um die Breite einzelner DIVs angezeigt zu bekommen. Wenn ihr dann in der rechten Spalte oben den 'flexible-layout' Style anklickt, sollte das Problem im OP zu sehen sein.

Gruß Gunther

PS: Das zeigt jetzt zwar noch nicht das Problem mit dem background, aber vielleicht seht ihr ja schon mal das andere Prob.

[Gunther]

Hi nochmal!

Anbei ein Bild, das das Problem wenigstens in Zahlen erkennen lässt...

Gruß Gunther

[Orlando]

Hallo Gunther,

http://top-topics.com/test-temp/css-files/base-flex.css

Hier fehlt übrigens der Wert:

  
* html #page-wrapper {  
width /**/: ;  
}  
/* */  

Ihr könnt ganz unten auf der Seite auf den button klicken, um die Breite einzelner DIVs angezeigt zu bekommen. Wenn ihr dann in der rechten Spalte oben den 'flexible-layout' Style anklickt, sollte das Problem im OP zu sehen sein.

750px sind meist (nicht immer!) 46,875em und nicht 46,9em. 1em entspricht 16px.

  
document.getElementById("bod").style.fontSize="1em";  

Warum setzt du per JS die Schriftgröße auf 1em, wo du doch im Stylesheet 100.001% definierst?

Grüße
 Roland

[Gunther]

Hallo Roland,

http://top-topics.com/test-temp/css-files/base-flex.css

Hier fehlt übrigens der Wert:

• html #page-wrapper {
  width /**/: ;
  }
  /* */

  
Ich sagte doch: Es ist ein "Arbeitsbeispiel" mit der einen oder anderen (Probier-)Codezeile zuviel oder zuwenig. Obiges kratzt aber eh nur den IE.  
  

> > Ihr könnt ganz unten auf der Seite auf den button klicken, um die Breite einzelner DIVs angezeigt zu bekommen. Wenn ihr dann in der rechten Spalte oben den 'flexible-layout' Style anklickt, sollte das Problem im OP zu sehen sein.  
>   
> 750px sind meist (nicht immer!) 46,875em und nicht 46,9em. 1em entspricht 16px.  
  
Meiner Erfahrung nach bringt es nichts, mehr als 2 Nachkommastellenanzugeben.  
  

> ~~~javascript
  

> document.getElementById("bod").style.fontSize="1em";  
> 

Warum setzt du per JS die Schriftgröße auf 1em, wo du doch im Stylesheet 100.001% definierst?

Um sie mit JS auslesen zu können.

Aber was hat das alles mit dem Opera Problem zu tun?

Gruß Gunther

[Orlando]

Hallo Gunther,

Ihr könnt ganz unten auf der Seite auf den button klicken, um die Breite einzelner DIVs angezeigt zu bekommen. Wenn ihr dann in der rechten Spalte oben den 'flexible-layout' Style anklickt, sollte das Problem im OP zu sehen sein.

750px sind meist (nicht immer!) 46,875em und nicht 46,9em. 1em entspricht 16px.

Du mischst „em“, „px“ und „%“ bzw. versucht eine identische Umsetzung mit unterschiedlichen Einheiten und das innerhalb eines Stylesheets. Nur klappt die Umrechnung nicht. Auszug:

  
#page-wrapper {  
  width: 46.9em;  
  max-width: 1000px;  
}  
  
#side-col {  
  width: 32.65%;  
}  

Das wirst du nicht pixelgenau umsetzen können. Ich würde alles auf „em“ umstellen, eher aber auf dieses Vorhaben verzichten. Die paar Pixel sind in meinen Augen irrelevant.

Grüße
 Roland

[Gunther]

Hallo Roland,

Ihr könnt ganz unten auf der Seite auf den button klicken, um die Breite einzelner DIVs angezeigt zu bekommen. Wenn ihr dann in der rechten Spalte oben den 'flexible-layout' Style anklickt, sollte das Problem im OP zu sehen sein.

750px sind meist (nicht immer!) 46,875em und nicht 46,9em. 1em entspricht 16px.

Du mischst „em“, „px“ und „%“ bzw. versucht eine identische Umsetzung mit unterschiedlichen Einheiten und das innerhalb eines Stylesheets. Nur klappt die Umrechnung nicht. Auszug:

#page-wrapper {
  width: 46.9em;
  max-width: 1000px;
}

#side-col {
  width: 32.65%;
}

  
Ja in einem Wrapper (als containing block) hat eine Spalte 67.35% und die andere 32.65% macht nach Adam Riese 100%, egal in welcher Einheit die Breite des Wrappers angegeben ist. Ich weiß auch, dass es bei relativen Größenangaben zu Rundungsdifferenzen kommen kann, aber die sollten im Bereich von 1-2px liegen (bzw. pro gerundeter Größe 1px). Nicht aber bei Opera. Der macht nur 68% : 32% oder 67% : 33%!  
  

> Das wirst du nicht pixelgenau umsetzen können. Ich würde alles auf „em“ umstellen, eher aber auf dieses Vorhaben verzichten. Die paar Pixel sind in meinen Augen irrelevant.  
  
Das mit dem "pixelgenau" musste ja jetzt wieder kommen! ;-)  
Darum geht es mir aber auch gar nicht. Aber der Unterschied zwischen bspw. 50.5% und 50% oder 51% kann durchaus mehr als ein "paar" Pixel ausmachen.  
  
Und ob bspw. ein positioniertes background-image angezeigt wird oder nicht, macht in meinen Augen auch einen "nicht zu vernachlässigenden" Unterschied aus.  
  
Mich würde nur mal interessieren, ob du den "Unterschied" zwischen Opera und anderen Browsern denn wenigstens auch feststellen kannst?  
  
Gruß Gunther

[Orlando]

Hallo Gunther,

Ich weiß auch, dass es bei relativen Größenangaben zu Rundungsdifferenzen kommen kann, aber die sollten im Bereich von 1-2px liegen (bzw. pro gerundeter Größe 1px). Nicht aber bei Opera. Der macht nur 68% : 32% oder 67% : 33%!

Das habe ich beim lokalen Testen auch festgestellt.

Das wirst du nicht pixelgenau umsetzen können.

Das mit dem "pixelgenau" musste ja jetzt wieder kommen! ;-)

Hey, du beschwerst dich wegen drei schnöseliger Pixel! ;-)

Darum geht es mir aber auch gar nicht. Aber der Unterschied zwischen bspw. 50.5% und 50% oder 51% kann durchaus mehr als ein "paar" Pixel ausmachen.

Schon klar. Ich hab’s mit kleinen Eingriffen nicht hinbekommen, es kommt immer zu Rundungsdifferenzen. Entweder wird #side-col zu schmal oder zu breit.

Und ob bspw. ein positioniertes background-image angezeigt wird oder nicht, macht in meinen Augen auch einen "nicht zu vernachlässigenden" Unterschied aus.

Natürlich. Um welches Bild handelt es sich?

Mich würde nur mal interessieren, ob du den "Unterschied" zwischen Opera und anderen Browsern denn wenigstens auch feststellen kannst?

Ja, ich sehe das Problem. Ändere die Werte in base-fix.css um die ominösen drei Pixel und nimm dir ein Bier. ;-)

Grüße
 Roland

[Gunther]

Hi Roland,

Ich weiß auch, dass es bei relativen Größenangaben zu Rundungsdifferenzen kommen kann, aber die sollten im Bereich von 1-2px liegen (bzw. pro gerundeter Größe 1px). Nicht aber bei Opera. Der macht nur 68% : 32% oder 67% : 33%!

Das habe ich beim lokalen Testen auch festgestellt.

das beruhigt mich ...!

Das wirst du nicht pixelgenau umsetzen können.

Das mit dem "pixelgenau" musste ja jetzt wieder kommen! ;-)

Hey, du beschwerst dich wegen drei schnöseliger Pixel! ;-)

ja ja, eigentlich mehr über die "Unfähigkeit" der Operas

Darum geht es mir aber auch gar nicht. Aber der Unterschied zwischen bspw. 50.5% und 50% oder 51% kann durchaus mehr als ein "paar" Pixel ausmachen.

Schon klar. Ich hab’s mit kleinen Eingriffen nicht hinbekommen, es kommt immer zu Rundungsdifferenzen. Entweder wird #side-col zu schmal oder zu breit.

Und ob bspw. ein positioniertes background-image angezeigt wird oder nicht, macht in meinen Augen auch einen "nicht zu vernachlässigenden" Unterschied aus.

Natürlich. Um welches Bild handelt es sich?

Wie eingangs schon erwähnt, kommt auf der Seite keins vor. Aber probier' folgendes mit Opera und einem anderen Browser (kann sogar ein IE sein):

  
background: transparent url(irgendeinbild.gif) no-repeat 50% 50%;  

Soweit sollten noch alle Browser mitspielen. Ändere das jetzt in

  
background: transparent url(irgendeinbild.gif) no-repeat 50.5% 50%;  

und staune der Betrachtung mit einem Opera Browser.

Mich würde nur mal interessieren, ob du den "Unterschied" zwischen Opera und anderen Browsern denn wenigstens auch feststellen kannst?

Ja, ich sehe das Problem. Ändere die Werte in base-fix.css um die ominösen drei Pixel und nimm dir ein Bier. ;-)

Letzteres werde ich jetzt tun und dann in die Falle gehen. Falls du auch eins hast - Prost!

Und Danke für deine Bemühungen!

Gruß Gunther

[Orlando]

Hallo Gunther,

background: transparent url(irgendeinbild.gif) no-repeat 50% 50%;

>   
> Soweit sollten noch alle Browser mitspielen. Ändere das jetzt in  
>   
> ~~~css
  

> background: transparent url(irgendeinbild.gif) no-repeat 50.5% 50%;  
> 

und staune der Betrachtung mit einem Opera Browser.

Das ist ein netter Bug. Ich kann dir sogar sagen, was Opera falsch macht:

  
background: transparent url(irgendeinbild.gif) no-repeat 0.5% 0%;  

Hier wird das Bild in der Mitte dargestellt. Offenbar wird der angegebene Wert irrtümlich mit 100 multipliziert. Dann ist es klar, dass du Position 50500% nichts siehst. Der Fehler tritt übrigens seit Opera 7.0 auf – ich habe ihn gemeldet.

nimm dir ein Bier. ;-)

Falls du auch eins hast - Prost!

*pling*

Grüße
 Roland

[Orlando]

Hallo Gunther,

document.getElementById("bod").style.fontSize="1em";

> >   
> > Warum setzt du per JS die Schriftgröße auf 1em, wo du doch im Stylesheet 100.001% definierst?  
>   
> Um sie mit JS auslesen zu können.  
  
Das ist übrigens nicht nötig.  
  
~~~javascript
  
alert(document.defaultView.getComputedStyle(document.getElementById("bod"),null).getPropertyValue("font-size"));  

„getComputedStyle“ ist das Stichwort.

Grüße
 Roland

[Gunther]

Hallo Roland,

document.getElementById("bod").style.fontSize="1em";

> > >   
> > > Warum setzt du per JS die Schriftgröße auf 1em, wo du doch im Stylesheet 100.001% definierst?  
> >   
> > Um sie mit JS auslesen zu können.  
>   
> Das ist übrigens nicht nötig.  
>   
> ~~~javascript
  

> alert(document.defaultView.getComputedStyle(document.getElementById("bod"),null).getPropertyValue("font-size"));  
> 

„getComputedStyle“ ist das Stichwort.

Danke für den Tipp - JS ist nicht gerade meine starke Seite (wo ich mir doch versucht habe anzugewöhnen auch ohne auszukommen ;-) )

Damit beschäftige ich mich dann, wenn ich die CSS Interpretationen der einzelnen Browser verstanden habe ...

Gruß Gunther

[MudGuard]

Hi,

750px sind meist (nicht immer!) 46,875em und nicht 46,9em.

Zu der Umrechnung des Werts siehe weiter unten.

Aufgrund der CSS-Syntax wären es aber wenn schon, dann 46.875em bzw. 46.9em

1em entspricht 16px.

Aber nur dann, wenn die font-size für das Element (bzw. ggf. für das Elternelement) zufällig 16px ist.

cu,
Andreas

[Orlando]

Hallo MudGuard,

750px sind meist (nicht immer!) 46,875em und nicht 46,9em.

Aufgrund der CSS-Syntax wären es aber wenn schon, dann 46.875em bzw. 46.9em

Nichts anderes war zu erwarten. Vielleicht möchtest du dem OP auch helfen?

1em entspricht 16px.

Aber nur dann, wenn die font-size für das Element (bzw. ggf. für das Elternelement) zufällig 16px ist.

Das steht in meiner Antwort. Zitiere bitte vollständig.

Grüße
 Roland

[MudGuard]

Hi,

Aber nur dann, wenn die font-size für das Element (bzw. ggf. für das Elternelement) zufällig 16px ist.

Das steht in meiner Antwort. Zitiere bitte vollständig.

Ok, hier das vollständige Zitat Deiner Antwort:

Hallo Gunther,

http://top-topics.com/test-temp/css-files/base-flex.css

Hier fehlt übrigens der Wert:

• html #page-wrapper {
  width /**/: ;
  }
  /* */

>   
> > Ihr könnt ganz unten auf der Seite auf den button klicken, um die Breite einzelner DIVs angezeigt zu bekommen. Wenn ihr dann in der rechten Spalte oben den 'flexible-layout' Style anklickt, sollte das Problem im OP zu sehen sein.  
>   
> 750px sind meist (nicht immer!) 46,875em und nicht 46,9em. 1em entspricht 16px.  
>   
> ~~~javascript
  

> document.getElementById("bod").style.fontSize="1em";  
> 

Warum setzt du per JS die Schriftgröße auf 1em, wo du doch im Stylesheet 100.001% definierst?

Grüße
Roland

--
SELFHTML-Community > Visitenkarten > Orlando

(nein, die Links aus der Signatur bastel ich jetzt nicht neu - die haben eh nichts mit der font-size zu tun)

Wo steht darin, daß 1em nur dann 16px entspricht, wenn die font-size 16px ist?
Ich seh es nicht.

Falls Du das "meist (nicht immer!)" meinen solltest:
Das hatte ich eh schon zitiert.
Daraus ist aber nicht erkennbar, worin der Zusammenhang bestehen könnte.
Und das "meist" zweifle ich auch an:

Der einzige meiner Browser, dem ich eine font-size explizit gesetzt habe, ist der Firefox, da ich den ständig zum Surfen nutze (da weiß ich nicht mehr, .was der default ist) - den ziehe ich in die Betrachtungen zu "meist" nicht ein.

In keinem meiner anderen Browser (Opera 7.5x, 8.0x, 8.5, IE 5.01, 5.5, 6.0, Mozilla 1.7.3, Konqueror 3.4.2 auf Cygwin, Netscape 4.7.6, Hotjava 3.0), die alle auf Default-Einstellung stehen, ist die Font-size 16px, sondern 15px - mit Ausnahme des Mozilla, der 13px hat.

Beim IE wird 16px auch nicht erreicht, wenn ich die Schriftgrad-Einstellung von "mittel" auf einen anderen Wert ändere (default ist 15px, das nächstgrößere ist 17px)

(Versuchsaufbau: einige p-Elemente mit identischem Text - einer ohne font-size-Angabe (also Default), die anderen mit vorgegebener Schriftgröße von 13px bis 17px in 1px-Schritten)

cu,
Andreas

[Gunther]

Hallo!

Nach ein bischen googeln habe ich mitlerweile eine sehr gute Testpage im Netz gefunden, die Operas Probleme mit diversen relativen Größenangaben veranschaulicht:

http://www.brunildo.org/test/percwidth2.pl

Da Frage ich mich doch, kann man solch elementaren Dinge nicht von Versionen 7 bis 8 irgendwann mal in den Griff kriegen?

Da hilft es auch nicht, wenn man den Browser jetzt kostenlos werbefrei verteilt. Ganz im Gegenteil: Wieder (bis jetzt schon über 1,6 Mio) Browser im Einsatz, die 'korrekte' Seiten nicht korrekt darstellen!

Gruß Gunther