title: Displaying Genealogy with CSS3/HTML
body: <h2>What I want</h2>
  
  <p>I am trying to get a pedigree-like view with CSS. </p>
  
  <ul>
  <li><strong>Not a TABLE</strong></li>
  <li>It needs to be <strong>compatible IE8+</strong> (I might consider IE9+ if I don't find any solution for IE8)</li>
  <li>It needs to be <strong>printable by the browser</strong></li>
  </ul>
  
  <p>The thing is: on the web we have resources for family trees (<strong>parent -> childs</strong>), but not for pedigree (<strong>child -> parents</strong>) </p>
  
  <hr>
  
  <p><em><strong>Useful link but for a family tree :</em></strong></p>
  
  <p>I had this script working
  <a href="http://thecodeplayer.com/walkthrough/css3-family-tree" rel="nofollow">http://thecodeplayer.com/walkthrough/css3-family-tree</a></p>
  
  <p>But I need to inverse it completely (my main node need to be on the bottom) and I failed to try a solution for that.</p>
  
  <hr>
  
  <h2>What I am trying to have in visual ouput:</h2>
  
  <pre><code>            G FATHER
        FATHER
              G MOTHER
  CHILD
  
        MOTHER
  </code></pre>
  
  <p>(I can also accept the solution where the child can be located at the bottom and its parents at the top)</p>
  
  <p>But I want to get it done with a clean HTML and CSS if possible.</p>
  
  <p>I am working with simple UL containers, and A containers for information.
  This means:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;
          &lt;a&gt;Child&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;a&gt;Father&lt;/a&gt;
                  ...other ULs if available...
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a&gt;Mother&lt;/a&gt;
                  ...other ULs if available...
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <hr>
  
  <h2>What I have tried (jsfiddles)</h2>
  
  <p>I have tried several cases, one with floats, the other with more absolute positioning but I am not getting the result I want.</p>
  
  <p>I have to fiddles to show:</p>
  
  <p><a href="http://jsfiddle.net/darknessm0404/bZGFA/" rel="nofollow">http://jsfiddle.net/darknessm0404/bZGFA/</a></p>
  
  <p>And the old version:</p>
  
  <p><a href="http://jsfiddle.net/darknessm0404/4SDNm/" rel="nofollow">http://jsfiddle.net/darknessm0404/4SDNm/</a></p>
  
  <p>If you have any suggestion or solution let me know.
  There are good family tree with CSS on the web but I do not want them since they are the inverse of what I want.</p>