Grid flutters in Firefox

My grid looks fine in IE but in Firefox it flutters whenever I move my mouse anywhere over the grid.

I'm using it within nested div's and like I said it looks just fine in IE.
June 8,
Let me give you a bit more detail...

var table = new Active.XML.Table;
                var columns = ["Person", "Address"];
                if(gid('state_id').value == 1)
                    columns = ["State"];

                //	create ActiveWidgets Grid javascript object
                var obj = new Active.Controls.Grid;
                obj.setColumnProperty("texts", columns);

                var alternate = function(){
                        return this.getProperty("row/order") % 2 ? "#fcfaf6" : "#ffffff";

                var mark = function(){
                        var i = this.getProperty("row/index");
                        return (i==2 || i==4 || i==5) ? true : false;

                var row = new Active.Templates.Row;
                row.setStyle("background", alternate);
                row.setClass("mark", mark);
                row.setEvent("onmouseover", "mouseover(this, 'active-row-highlight')");
                row.setEvent("onmouseout", "mouseout(this, 'active-row-highlight')");
                obj.setTemplate("row", row);

                obj.setAction("click", function(src){alert('A');});

                        try {
                            document.getElementById("stuff").innerHTML = obj;
                    }, 100);
                    //	document.write(obj);

Here is the html where it is being displayed:
<div id="container">
<div id="content">

<div id="somecontainer">
<div id="stuff">
<div id="loadingdata" style="margin: 10px; color: #979797">Loading Data...</div>


June 8,
It does this in firefox even if I use a simple grid without alternating color and without making anything clickable.

Another problem I have in both IE and Firefox is that the grid does not resize properly. I can resize the column headers but the rest of the rows do not resize.

I'm really stuck on this so if anyone could help me out I would really appreciate it.
June 8,
What version of FF do you have? The latest builds may have fixed this problem.
Steve N
June 8,
I'm using FF 1.0.4
June 8,
Does the nightly build fix the problem?
Steve N
June 8,
nope... doesn't fix it.

I have a feeling it has something to do with the stylesheets (maybe the height/position of the grid). It's as if FF doesn't know how tall it should be or where to position it.

Here's what I'm using:

            .active-controls-grid {height: 420px; font: menu;}

            .active-column-0 {width:  100px;}
            .active-column-1 {width: 200px; }

            .active-grid-column {border-right: 1px solid threedlightshadow;}
            .active-grid-row {border-bottom: 1px solid threedlightshadow;}

            .active-templates-row.gecko {
                 display: -moz-box;
                 width: auto;
                 min-width: 100%;

            .active-row-highlight {background-color: #ddeeff!important}
            .active-row-highlight .active-row-cell {background-color: #ddeeff;}

            .active-mark-true .active-column-2 {color: #f00}
June 8,
I may be wrong, but
mouseover and mouseout events could cause this "effect" on FF.
and from now, no idea how to avoid it. Anyone?
June 8,
Hmm... All I know is that I've seen this type of problem in other web apps when the problem DIV was nested within other DIVs. Newer FF builds seemed to render the pages better, but not perfectly.

Apologies, I'm fairly new to ActiveWidgets, and trying to figure out how this all works (making slow but steady progress).

This may help: http://www.xulplanet.com/references/elemref/ref_StyleProperties.html in reference to the -mox-box directive.

Any ideas on my posted questions?

Steve N
June 8,
Ok, I finally figure it out. I had to add position:absolute; to the surrounding div.
June 11,

This topic is archived.

See also:

Back to support forum