Проблемы с созданием 100% высоты с использованием display: table-cell в Firefox

Я пытаюсь создать двухстоечный полноэкранный просмотрщик журналов с баннером с фиксированной шириной слева. Правая колонка будет реагировать.

Использование дисплея: table; метод Я создал следующее:

http://jsfiddle.net/pouncebounce/pTeBP/2/

HTML

<div class="tbl_con">
   <div class="tbl_row">
      <div class="tbl_cell" id="banner">
      </div>
      <div class="tbl_cell" id="publication">
      </div>
   </div>
</div>
<script>
   var viewer = new com.zmags.api.Viewer();
   viewer.setPublicationID("b129d2b8");
   viewer.setParentElementID("publication");
   viewer.show();
</script>

CSS

* {
margin: 0;
padding: 0;
border: none;
}

html, body {
height: 100%;
width: 100%;
overflow: hidden;
}

.tbl_con {
display: table;
width: 100%;
min-height: 100%;
*height: 100%;
}

.tbl_row {
display: table-row;
width: 100%;
min-height: 100%;
*height: 100%;
}

.tbl_cell {
display: table-cell;
min-height: 100%;
*height: 100%;  
}

#banner {
width: 200px;
background-color: #1E90FF;
border-right: solid 3px #fff;
}

#publication {
width: *;
background-color: #FFAB1E;
}

Это верно отображается в последней версии IE и Chrome, но не в Firefox, где высота 100% или фактический журнал не отображаются вообще. Почему?