I initially utilized the experimental multi-parent version of the CSS3 Family Tree, which can be found at:
Presently, I am encountering some alignment discrepancies with multiple parents (partners in a family tree), primarily attributed to varying text lengths within the boxes. When two boxes contain text of equal length, they align properly; however, when the texts differ in length, the longer one appears higher and the height disparity is proportional to the difference in length.
In addition, individual children seem to drift off to the left instead of being centered as expected. EDIT: THIS ISSUE HAS BEEN RESOLVED
Examples can be viewed here: http://jsfiddle.net/7g7fz2tL/5/
* {
margin: 0;
padding: 0;
}
.tree ul {
padding-top: 20px;
position: relative;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
.
.
.(The code for CSS styling continues)
.
.
Would anyone have insights into what might be causing this issue and how it could potentially be rectified?