CSS table layout height with svg image in IE

Vote count:

0

Taking a look at the code below and the fiddle, can some please tell my why in IE (9-10-11) the height of the svg image is not matching the height of the sibling (content on right) like in chrome, FF, Safari?

In IE there is extra vertical space in the left table-cell.

Thank-you

HTML

    <div class="table-layout">
        <div class="table-cell fixed-width">
           <svg version="1.1" id="Layer_1" xmlns="http://ift.tt/nvqhV5" xmlns:xlink="http://ift.tt/PGV9lw" x="0px" y="0px" viewBox="0 0 180.22 150.718" enable-background="new 0 0 180.22 150.718" xml:space="preserve">
              <circle fill="#E3E3E3" cx="91.5" cy="75.167" r="75.167" />
           </svg>
        </div>
        <div class="table-cell" style="border: solid red 1px">
        <div class="row">
            <div class="col-xs-12">content</div>
        </div>
        <div class="row">
            <div class="col-lg-6">
                <div class="row">
                    <div class="col-sm-6">content</div>
                    <div class="col-sm-6">content</div>
                </div>
            </div>
            <div class="col-lg-6">content</div>
        </div>
    </div>

CSS

   .table-layout {
     display: table;
     width: 100%;
     table-layout: fixed;
   }
   .table-layout .table-cell {
     display: table-cell;
     border: solid 1px #ccc;
     vertical-align: top;
   }
  .fixed-width {
    vertical-align: middle !important;
    background-color: #a3a3a3;
    width: 60px;
    padding: 5px;
   }

fiddle: http://ift.tt/1FWhMYQ

asked 58 secs ago

Thibs

203

CSS table layout height with svg image in IE