Results 1 to 6 of 6

Thread: Tree rendering on IE

  1. #1

    Default Tree rendering on IE

    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

  2. #2
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    Virginia, USA
    Posts
    220

    Default

    See if removing this from your custom.css changes the behavior:

    Code:
    .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.

  3. #3

    Default

    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

  4. #4
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    Virginia, USA
    Posts
    220

    Default

    Can you adjust it as follows:

    Code:
    .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.

  5. #5

    Default

    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.

  6. #6

    Default

    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •