Search code examples
htmlcssinternet-exploreralignment

Aligning Divs works in Firefox but not IE greater than 7

I am trying to migrate a web application to work with IE 11. When testing in IE 11, you'll see that the divs (each little green/blue box) don't line up properly. It looks perfectly fine in Firefox as you can see on jsfiddle here.

Thanks for any help resolving this! Here's the code since it's required with the jsfiddle link:

html

  <h1>Matrix Test Page</h1>
  <div id="rack-0-bartok" title="rack-0">
    <div class="row">
      <div class="node node-faded" id="matrix-box-b017-bartok" style="background: #00DC00;" title="b017"></div>
      <div class="node node-faded" id="matrix-box-b018-bartok" style="background: #00DC00;" title="b018"></div>
      <div class="node node-faded" id="matrix-box-b019-bartok" style="background: #00DC00;" title="b019"></div>
      <div class="node node-faded" id="matrix-box-b020-bartok" style="background: #00DC00;" title="b020"></div>
      <div class="node node-faded" id="matrix-box-b021-bartok" style="background: #00DC00;" title="b021"></div>
      <div class="node node-faded" id="matrix-box-b022-bartok" style="background: #00DC00;" title="b022"></div>
      <div class="node node-faded" id="matrix-box-b023-bartok" style="background: #0000CD;" title="b023"></div>
      <div class="node node-faded" id="matrix-box-b024-bartok" style="background: #0000CD;" title="b024"></div>
    </div>
    <div class="row">
      <div class="node node-faded" id="matrix-box-b025-bartok" style="background: #0000CD;" title="b025"></div>
      <div class="node node-faded" id="matrix-box-b026-bartok" style="background: #0000CD;" title="b026"></div>
      <div class="node node-faded" id="matrix-box-b027-bartok" style="background: #0000CD;" title="b027"></div>
      <div class="node node-faded" id="matrix-box-b028-bartok" style="background: #00DC00;" title="b028"></div>
      <div class="node node-faded" id="matrix-box-b029-bartok" style="background: #00DC00;" title="b029"></div>
      <div class="node node-faded" id="matrix-box-b030-bartok" style="background: #00DC00;" title="b030"></div>
      <div class="node node-faded" id="matrix-box-b031-bartok" style="background: #0000CD;" title="b031"></div>
      <div class="node node-faded" id="matrix-box-b032-bartok" style="background: #0000CD;" title="b032"></div>
    </div>
    <div class="row">
      <div class="node node-faded" id="matrix-box-b001-bartok" style="background: #00DC00;" title="b001"></div>
      <div class="node node-faded" id="matrix-box-b002-bartok" style="background: #00DC00;" title="b002"></div>
      <div class="node node-faded" id="matrix-box-b003-bartok" style="background: #00DC00;" title="b003"></div>
      <div class="node node-faded" id="matrix-box-b004-bartok" style="background: #0000CD;" title="b004"></div>
      <div class="node node-faded" id="matrix-box-b005-bartok" style="background: #0000CD;" title="b005"></div>
      <div class="node node-faded" id="matrix-box-b006-bartok" style="background: #00DC00;" title="b006"></div>
      <div class="node node-faded" id="matrix-box-b007-bartok" style="background: #0000CD;" title="b007"></div>
      <div class="node node-faded" id="matrix-box-b008-bartok" style="background: #0000CD;" title="b008"></div>
    </div>
    <div class="row">
      <div class="node node-faded" id="matrix-box-b009-bartok" style="background: #00DC00;" title="b009"></div>
      <div class="node node-faded" id="matrix-box-b010-bartok" style="background: #00DC00;" title="b010"></div>
      <div class="node node-faded" id="matrix-box-b011-bartok" style="background: #00DC00;" title="b011"></div>
      <div class="node node-faded" id="matrix-box-b012-bartok" style="background: #00DC00;" title="b012"></div>
      <div class="node node-faded" id="matrix-box-b013-bartok" style="background: #0000CD;" title="b013"></div>
      <div class="node node-faded" id="matrix-box-b014-bartok" style="background: #0000CD;" title="b014"></div>
      <div class="node node-faded" id="matrix-box-b015-bartok" style="background: #00DC00;" title="b015"></div>
      <div class="node node-faded" id="matrix-box-b016-bartok" style="background: #00DC00;" title="b016"></div>
    </div>
  </div>
  <div id="rack-1-bartok" title="rack-1">
    <div class="row">
      <div class="node node-faded" id="matrix-box-b049-bartok" style="background: #00DC00;" title="b049"></div>
      <div class="node node-faded" id="matrix-box-b050-bartok" style="background: #00DC00;" title="b050"></div>
      <div class="node node-faded" id="matrix-box-b051-bartok" style="background: #00DC00;" title="b051"></div>
      <div class="node node-faded" id="matrix-box-b052-bartok" style="background: #00DC00;" title="b052"></div>
      <div class="node node-faded" id="matrix-box-b053-bartok" style="background: #00DC00;" title="b053"></div>
      <div class="node node-faded" id="matrix-box-b054-bartok" style="background: #00DC00;" title="b054"></div>
      <div class="node node-faded" id="matrix-box-b055-bartok" style="background: #00DC00;" title="b055"></div>
      <div class="node node-faded" id="matrix-box-b056-bartok" style="background: #00DC00;" title="b056"></div>
    </div>
    <div class="row">
      <div class="node node-faded" id="matrix-box-b057-bartok" style="background: #00DC00;" title="b057"></div>
      <div class="node node-faded" id="matrix-box-b058-bartok" style="background: #0000CD;" title="b058"></div>
      <div class="node node-faded" id="matrix-box-b059-bartok" style="background: #0000CD;" title="b059"></div>
      <div class="node node-faded" id="matrix-box-b060-bartok" style="background: #0000CD;" title="b060"></div>
      <div class="node node-faded" id="matrix-box-b061-bartok" style="background: #00DC00;" title="b061"></div>
      <div class="node node-faded" id="matrix-box-b062-bartok" style="background: #0000CD;" title="b062"></div>
      <div class="node node-faded" id="matrix-box-b063-bartok" style="background: #0000CD;" title="b063"></div>
      <div class="node node-faded" id="matrix-box-b064-bartok" style="background: #0000CD;" title="b064"></div>
    </div>
    <div class="row">
      <div class="node node-faded" id="matrix-box-b033-bartok" style="background: #0000CD;" title="b033"></div>
      <div class="node node-faded" id="matrix-box-b034-bartok" style="background: #0000CD;" title="b034"></div>
      <div class="node node-faded" id="matrix-box-b035-bartok" style="background: #0000CD;" title="b035"></div>
      <div class="node node-faded" id="matrix-box-b036-bartok" style="background: #0000CD;" title="b036"></div>
      <div class="node node-faded" id="matrix-box-b037-bartok" style="background: #0000CD;" title="b037"></div>
      <div class="node node-faded" id="matrix-box-b038-bartok" style="background: #00DC00;" title="b038"></div>
      <div class="node node-faded" id="matrix-box-b039-bartok" style="background: #00DC00;" title="b039"></div>
      <div class="node node-faded" id="matrix-box-b040-bartok" style="background: #0000CD;" title="b040"></div>
    </div>
    <div class="row">
      <div class="node node-faded" id="matrix-box-b041-bartok" style="background: #00DC00;" title="b041"></div>
      <div class="node node-faded" id="matrix-box-b042-bartok" style="background: #00DC00;" title="b042"></div>
      <div class="node node-faded" id="matrix-box-b043-bartok" style="background: #0000CD;" title="b043"></div>
      <div class="node node-faded" id="matrix-box-b044-bartok" style="background: #00DC00;" title="b044"></div>
      <div class="node node-faded" id="matrix-box-b045-bartok" style="background: #0000CD;" title="b045"></div>
      <div class="node node-faded" id="matrix-box-b046-bartok" style="background: #0000CD;" title="b046"></div>
      <div class="node node-faded" id="matrix-box-b047-bartok" style="background: #0000CD;" title="b047"></div>
      <div class="node node-faded" id="matrix-box-b048-bartok" style="background: #00DC00;" title="b048"></div>
    </div>
  </div>

css

.row {
    background: #cccccf;
    margin: 0 !important;
}

div[id*='rack-'] {
    float: left;
    padding: 2px !important;
}

.node {
    width: 4px;
    height: 4px;
    float: left;
    border: 1px solid #B0B0B0;
    background: #cccccf;
    margin: 0 !important;
    cursor: pointer;
    filter: alpha(opacity=100);
    opacity: 1;
}

.faded .node-faded {
    width: 4px;
    height: 4px;
    filter: alpha(opacity=50);
    opacity: .5;
}
Solution

  • Well, this is kinda weird, I added height: 6px to class .row and now it works in IE11+ (and FF DE44+, CH46+).

    Did you try clearfix already? Should work with floats too.