title: CSS - child not inheriting the width of a parent in liquid layout
body: <p>All,</p>
  
  <p>This appears to be Firefox related issue (havent tried Opera &amp; IE).</p>
  
  <p>I have 'ul' children which are given a width of 100% in a liquid layout. The parent 'li' itself has a width of 33% of its parent 'ul'.</p>
  
  <p>Chrome seems to display the width of child 'ul' correctly, i.e. its 100% is equal to its parent 'li' width of 33%. However, Firefox stretches the 'ul' child's width to the full viewport width.</p>
  
  <p>Jsfiddle: <a href="http://jsfiddle.net/g4VAd/2/" rel="nofollow">http://jsfiddle.net/g4VAd/2/</a></p>
  
  <pre><code>            &lt;div id="filemenu"&gt;                     &lt;!-- right tabs menu --&gt;
          &lt;ul id="fm_ul"&gt;
              &lt;li class="filetabs"&gt;File
                  &lt;ul&gt;
                      &lt;li class="m_items"&gt;Open&lt;/li&gt;
                      &lt;li class="m_items"&gt;Save&lt;/li&gt;
                      &lt;li class="m_items"&gt;Exit&lt;/li&gt;
                  &lt;/ul&gt;&lt;/li&gt;&lt;li class="filetabs"&gt;Edit
                  &lt;ul&gt;
                      &lt;li class="m_items"&gt;Undo&lt;/li&gt;
                      &lt;li class="m_items"&gt;Redo&lt;/li&gt;
                  &lt;/ul&gt;&lt;/li&gt;&lt;li class="filetabs"&gt;Settings
                  &lt;ul&gt;
                      &lt;li class="m_items" id="frontView"&gt;&lt;span&gt;Front View&lt;/span&gt;&lt;/li&gt;
                      &lt;li class="m_items"id="backView"&gt;&lt;span&gt;Back View&lt;/span&gt;&lt;/li&gt;
                  &lt;/ul&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;                    &lt;!-- close -&gt; 'filemenu' div --&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>    #filemenu {
      float: right;
      width: 37%;
      height: 100%;
  }
  #fm_ul {
      float: right;
      display: table;
      width: 100%;
      height: 100%;
      cursor: pointer;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      border-radius: 6px;                 /* Opera &amp; IE9 donot have prefixes, directly support border-radius */
      -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
      -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
      box-shadow: 0 1px 2px rgba(0,0,0,0.1);                 /* Opera &amp; IE9 donot have prefixes, directly support border-radius */
      background: rgb(232,232,232); /* Old browsers */
      background: -moz-linear-gradient(top, rgb(232,232,232) 0%, rgb(252,252,252) 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(232,232,232)), color-stop(100%,rgb(252,252,252))); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top, rgb(232,232,232) 0%,rgb(252,252,252) 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top, rgb(232,232,232) 0%,rgb(252,252,252) 100%); /* Opera 11.10+ */
      background: -ms-linear-gradient(top, rgb(232,232,232) 0%,rgb(252,252,252) 100%); /* IE10+ */
      background: linear-gradient(top, rgb(232,232,232) 0%,rgb(252,252,252) 100%); /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-8 */
  }
      .filetabs {
          display: table-cell;
          position: relative;
          width: 33%;
          height: 100%;
          color: rgb(125,125,125);
          font-size: 0.8em;
  line-height: 25px;
          text-align: center;
          text-decoration: none;
          -moz-text-shadow: 0 1px 2px rgba(150,150,150,0.4);
          -webkit-text-shadow: 0 1px 2px rgba(150,150,150,0.4);
          text-shadow: 0 1px 2px rgba(150,150,150,0.4);    
          vertical-align: middle;
          list-style-type: none;
      }
          .filetabs:first-child {
              -webkit-border-top-left-radius: 6px;
              -webkit-border-bottom-left-radius: 6px;
              -moz-border-radius-topleft: 6px;
              -moz-border-radius-bottomleft: 6px;
              border-top-left-radius: 6px;
              border-bottom-left-radius: 6px;        
          }
          .filetabs:last-child {
              -webkit-border-top-right-radius: 6px;
              -webkit-border-bottom-right-radius: 6px;
              -moz-border-radius-topright: 6px;
              -moz-border-radius-bottomright: 6px;
              border-top-right-radius: 6px;
              border-bottom-right-radius: 6px;        
          }
          .filetabs:hover {
              color: rgb(150,150,150);
              -moz-text-shadow: 0 1px 0 rgba(255,255,255,0.95);
              -webkit-text-shadow: 0 1px 0 rgba(255,255,255,0.95);
              text-shadow: 0 1px 0 rgba(255,255,255,0.95);
          }
          .filetabs ul {
              display: none;
              float: left;
              position: absolute;
              width: 100%;
              opacity: 0;
              -webkit-transition: 0.35s linear opacity;
              -moz-transition: 0.35s linear opacity;
              -o-transition: 0.35s linear opacity;
              transition: 0.35s linear opacity;
              z-index: 100;
          }
              .m_items {
                  width: 100%;
                  list-style: none;
                  padding-top: 1px;
                  background-color: rgba(1,1,1,0.8);
                  -moz-box-shadow: 2px 0 2px rgba(1,1,1,0.2);
                  -webkit-box-shadow: 2px 0 2px rgba(1,1,1,0.2);
                  box-shadow: 2px 0 2px rgba(1,1,1,0.2);
              }
                  .m_items span {
                      font-size: 0.8em;
                      cursor: default;
                  }
                  .m_items:first-child {                    /* for borders */
                      -moz-border-radius: 4px 4px 0 0;
                      -webkit-border-radius: 4px 4px 0 0;
                      border-radius: 4px 4px 0 0;
                  }
                  .m_items:last-child {                    /* for borders */
                      padding-bottom: 5px;
                      -moz-border-radius: 0 0 4px 4px;
                      -webkit-border-radius: 0 0 4px 4px;
                      border-radius: 0 0 4px 4px;
                  }
  </code></pre>