PDA

View Full Version : Tree rendering on IE



anakreon
26 Apr 2007, 4:28 AM
Hello.
I use ext.Tree for the page:
http://155.207.8.122:8080/ext_tree_en.html

In firefox everything work fine.
On IE however, the tree looks awful.

The worst thing is that I can not understand what could
cause the rendering problem.

Any advice?

Anakreon

dfenwick
26 Apr 2007, 5:52 AM
See if removing this from your custom.css changes the behavior:


.x-tree-root-ct, .x-tree-node-ct {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
padding:0pt;
}

It seems to me I remember something somewhere a while back that said if you specify list-item-* items in your CSS in IE, it resets the margins to their defaults, and I seem to remember 30pt being the default left margin.

anakreon
26 Apr 2007, 6:22 AM
I did that but now it looks ugly on both browsers.

If I comment out only the list-* rules it looks good in FX.
However the problem still exists in IE

dfenwick
26 Apr 2007, 9:09 AM
Can you adjust it as follows:


.x-tree-root-ct, .x-tree-node-ct {
margin: 0px;
padding:0px;
}

and see what happens. Your UL tags are picking up the default 40px margin in IE. Firefox uses padding to indent the items in a list, so setting padding to 0 works. I tossed your page into the IE Developer Toolbar and it was setting a 30pt left margin on each of your UL tags.

anakreon
27 Apr 2007, 2:47 AM
It is much better after I did what you suggested.
But once a certain depth in the tree is reached, the rendering is disorted again.

E.g: The path: Animalia >>Arthropoda >>Crustacea >>Malacostraca >>Eumalacostraca >>Eucarida >>Decapoda will display this behaveur.

I noticed that if you collapse the last node, the rendering is ok, if you expand it again
is disorted. The same happens if you do the same to the child node of Decapoda.

As far as I can tell from firebug (I have no similar tools for IE) what changes is the
the style of the div element from x-tree-node-expanded to x-tree-node-collapsed.

Thank you very much for your help.

anakreon
2 May 2007, 6:50 AM
The problem is resolved.
I had this css rule:
#treeboxbox_tree span { margin-left: 4px; }
where treeboxbox_tree is the id of the div where the tree is embeded.

The purpuse of this rule was to move the caption of the node 4 pixels left
from the icon. However, it would disorient the rendering of the tree once a certain
depth was reached (in IE, Firefox had no problem with this rule).

Many thanks to dfenwick for his help