Why does my page look wrong in Firefox and IE 11?

Question

I am studying CSS and testing a simple drag and drop functionality which comes with HTML5.

The page I have prepared looks OK in Chrome and Opera but totally wrong in Firefox and IE 11. In IE 11 it is even not possible to drag elements from the rightmost table onto a caption Table A nor Table B.

Why is it so? How is the height for td element magically set to a high value in Firefox/IE and not in Chrome/Opera? Why does dropping not work in IE 11?

  function drag(event) {
    event.dataTransfer.setData("rowId", event.target.id);
  }

  function allowDrop(event) {
    event.preventDefault();
  }

  function drop(event) {
    event.preventDefault();
    var playerId = event.dataTransfer.getData("rowId");
    var tableBody = event.target.parentNode.getElementsByTagName("tbody");
    if (tableBody) {
      tableBody[0].appendChild(document.getElementById(playerId));
    }
  }

   .vbtn {
     background: none repeat scroll 0 0 #fafaff;
     border: 1px solid #ddd;
     border-radius: 6px;
     border-spacing: 0;
     box-shadow: 1px 1px 1px #eee;
     padding: 1px 8px;
     text-shadow: 0 2px 5px rgba(120, 120, 120, 0.3);
     vertical-align: baseline;
     white-space: nowrap;
   }
   a {
     color: #175bb0;
     text-decoration: none;
   }
   #wrapper {
     width: 100%;
     overflow: hidden;
   }
   #section-b {
     position: relative;
     margin-left: 10px;
     width: 300px;
     height: 400px;
     float: left;
     overflow: auto;
   }
   #section-a {
     width: 235px;
     float: left;
   }
   #selector {
     margin-top: 10px;
     margin-left: 10px;
     float: left;
   }
   table {
     margin-top: 10px;
     margin-bottom: 10px;
     margin-right: 10px;
     width: 100%;
     border: 1px solid black;
   }
   th,
   td {
     width: 100%;
     border: none;
   }
   thead {
     background: lightgreen;
   }
   thead>tr {
     position: relative;
   }
   tbody {
     height: 400px;
     background: none;
     overflow: auto;
   }

<!DOCTYPE html>

<head>
  <title>Table scroll</title>
  <meta charset="UTF-8" />
</head>

<body>
  <div id="wrapper">
    <div id="header">
      <p>Header...</p>
    </div>
    <div id="section-a">
      <table id="table-a">
        <caption ondrop="drop(event)" ondragover="allowDrop(event)">Table A</caption>
        <thead>
          <tr>
            <th>Attribute 1</th>
            <th>Attribute 2</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
      <table id="table-b">
        <caption ondrop="drop(event)" ondragover="allowDrop(event)">Table B</caption>
        <thead>
          <tr>
            <th>Attribute 1</th>
            <th>Attribute 2</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
    <div id="selector">
      <select>
        <optgroup label="A">
          <option value="1">A</option>
          <option value="2">B</option>
          <option value="3">C</option>
          <option value="4">D</option>
        </optgroup>
        <optgroup label="B">
          <option value="a">a</option>
          <option value="b">b</option>
          <option value="c">c</option>
          <option value="d">d</option>
        </optgroup>
      </select>
    </div>
    <div id="section-b">
      <table id="section-b-list">
        <thead>
          <tr>
            <th>Attribute 1</th>
            <th>Attribute 2</th>
          </tr>
        </thead>
        <tbody>
          <tr draggable="true" id="10" ondragstart="drag(event)">
            <td><a href="#" class="vbtn" draggable="false">Value 1</a>
            </td>
            <td>Value 2</td>
          </tr>
          <tr draggable="true" id="11" ondragstart="drag(event)">
            <td><a href="#" class="vbtn" draggable="false">Value 3</a>
            </td>
            <td>Value 4</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</body>

score 1 · Accepted Answer · answered Jan 21 '15 at 13:40

1

This line should be removed:

   tbody {
     height: 400px;
   }

answered Jan 21 '15 at 13:40

ViliusL

4,589
26
28

Great that was it! Any idea why dropping the row on the caption does not work in IE 11? – Jagger Jan 21 '15 at 13:42
Because of browsers. IE11 and Firefox are using the same web browser engine Gecko. – Anatoli Jan 21 '15 at 13:44
Try replacing caption with div, chech if funtion drop is executing. I have problems using IE. – ViliusL Jan 21 '15 at 13:47
Nope, that does not help. I have found some discussion [here](http://stackoverflow.com/questions/18065840/html5-drag-and-drop-not-working-on-ie11) but I do not think it applies to me as I am not setting `Text` or `text/plain`. – Jagger Jan 21 '15 at 14:06
I hope it'll be helpful for you [link](http://stackoverflow.com/questions/16720967/datatransfer-setdata-does-not-work-in-ie9) – Anatoli Jan 21 '15 at 14:42
Hi, I used the jsFiddle from [here](http://jsfiddle.net/robertc/ASKte/4/). Funny thing because from the jsFiddle page in IE 11 it works without any problem. When I copy the ccs, js and html to a local file, it does not work anymore. – Jagger Jan 21 '15 at 15:14
I cannot believe it. I uploaded this local file to a http server of mine and it works! – Jagger Jan 21 '15 at 15:16
@Anatoli I work on the IE team, and can assure you that we are not using the Gecko engine :) – Sampson Jan 21 '15 at 17:41

score 1 · Answer 2 · answered Jan 21 '15 at 13:41

1

The problem is

tbody {
    height: 400px;
}

Try to remove it from your code and you'll see.

answered Jan 21 '15 at 13:41

Anatoli

712
1
10
21

score 0 · Answer 3 · answered Jan 21 '15 at 15:17

0

The problem with dragging and dropping in IE 11 was because the page was loaded from a local file! When I uploaded the file to a remote http server and accessed the file from there, the problem disappeared!

answered Jan 21 '15 at 15:17

Jagger

10,350
9
51
93

Why does my page look wrong in Firefox and IE 11?

3 Answers3