The decorator qx.ui.decoration.Rounded does not resolve themed colours in
Internet Explorer. The code below illustrates this - in FireFox the border
is (correctly) the same colour all the way around but in Internet Explorer
the top and bottom borders are black.

FireFox 3.0.1    http://www.nabble.com/file/p18894747/roundedBorderFF.gif 
Internet Explorer 6.0   
http://www.nabble.com/file/p18894747/roundedBorderIE.gif 

In the "mshtml" specific render method of qx.ui.decoration.Rounded it calls
_resolveColor

var fillColor = this._resolveColor(backgroundColor ||
this.getBackgroundColor()) || "white";

for the background fill color but the use of _resolveColor is missing for
the border colours and it just uses the values from

this.getColorLeft()
this.getColorTop()

... etc.
This works if the values are actual colour specifications but not for theme
colour aliases.

I also notice that in IE (v6 - I haven't tried with v7) the rounded borders
are drawn with some pixel colour blending at the edges which can make them
appear a little fuzzy and they are also sometimes wider than specified in
the code. In the example the top and left borders are actually drawn as
three pixels wide and on all sides only one pixel width is the colour
actually requested, whereas in FireFox all the borders are exactly two
pixels wide and "cleanly" drawn in the required colour. I guess this may be
due to the browsers' different rendering algorithms.


    main : function()
    {
      // Call super class
      this.base(arguments);

      var container1 = new qx.ui.container.Composite(new
qx.ui.layout.VBox());

      // Create button
      var button1 = new qx.ui.form.Button("First Button",
"sample/test.png");

      var dec = new qx.ui.decoration.Rounded();
      dec.setColorTop("border-focused-light-shadow");
      dec.setColorBottom("border-focused-light-shadow");
      dec.setColorLeft("#A5BDDE");
      dec.setColorRight("#A5BDDE");
      dec.setWidth(2);
      dec.setRadius(4);
                
      button1.setDecorator(dec);

      container1.add(button1);

      // Add button to document with coordinates
      this.getRoot().add(container1, {
        left : 50,
        top : 50
      });

      // Add an event listener
      button1.addListener("execute", function(e) {
        alert("Hello World!");
      });
    }


I hope this is useful.

Will.

-- 
View this message in context: 
http://www.nabble.com/Rounded-border-colours-in-Internet-Explorer---qooxdoo-0.8-beta1-tp18894747p18894747.html
Sent from the qooxdoo-devel mailing list archive at Nabble.com.
-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/
_______________________________________________
qooxdoo-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

Reply via email to