d3.js inline-block elements are failing in Firefox and IE

Question

I've trying to combine inline a small d3.js animation with a separate image, but can't get it to work cross-browser. My code works OK in Chrome and Safari but not Firefox, or properly in Internet Explorer. In FF they're not inline. For IE I followed this tip - they do render inline, but with a big gap.

Assistance much appreciated. Here's a jsfiddle of the model. As it's a css problem I think only the top 2 javascript chains might be relevant - the rest is animation.

<!DOCTYPE html>
<html>
<head>
  <title>In-line problem</title>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <style type="text/css">
    .img {-webkit-backface-visibility: hidden;}
    #container .logoElement{
    display: inline-block;
    *display: inline;
    zoom: 1;
    width: 400;
    }
  </style>
</head>
<body>
  <span id="container">
    <div id="d3div" class="logoElement"></div>
    <div id="imagediv" class="logoElement"></div>
  </span>

  <script>
  // right-side (static) image element
  d3.select("#imagediv").append("img")
        .attr("src", "https://cdn.tutsplus.com/mobile/uploads/legacy/Free-App-Marketing-Tips/city-landscape.png")
        .style("max-width", "200px")
        .attr("class", "logoElement");

  // left-side  (dynamic) d3 element
  var g = d3.select("#d3div").append("svg")
      .attr("class", "logoElement")
      .style("height", 110)
      .style("width", 180)
      .append("g")
        .attr("transform", "scale(1.1)");

  // I THINK BELOW CAN BE IGNORED

    var start = Date.now(),
    speed = .02;

  // initialise dynamic animation elements
  var big = g.append("image")
    .attr("xlink:href", "http://www.cs.cmu.edu/~junggon/tools/gear.png")
    .attr("class", "img")
    .attr("width", 100).attr("height", 100)
    .attr("x", -50).attr("y", -50);

  var small = g.append("image")
    .attr("xlink:href", "http://www.cs.cmu.edu/~junggon/tools/gear.png")
    .attr("class", "img")
    .attr("width", 50).attr("height", 50)
    .attr("x", -25).attr("y", -25);

  // animate
  d3.timer(function() {
    var angle = (Date.now() - start) * speed,
        transform = function(d) { return "translate(50,50)," + "rotate(" + angle/2 + ")"; };
    big.selectAll("frame").attr("transform", transform);
    big.attr("transform", transform);
  });

  d3.timer(function() {
    var angle = (Date.now() - start) * speed,
        transform = function(d) { return "translate(124,50)," + "rotate(" + -angle + ")"; };
    small.selectAll("frame").attr("transform", transform);
    small.attr("transform", transform);
  });
  </script>
</body>
</html>

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

2

you forgot a unit to your width declaration for your .logoElement.

Also set a white-space: nowrap; to the container, just to be sure to always have the elements aligned side by side with no line-breaks

Example fiddle: http://jsfiddle.net/xm3fLyxz/6/

answered Jan 13 '15 at 13:39

Fabrizio Calderan

120,726
26
164
177

Thanks for the nowrap tip Fabrizio – geotheory Jan 13 '15 at 14:00

score 1 · Accepted Answer · edited Jan 13 '15 at 14:13

1

Demo

#container .logoElement{
  display: inline-block;
  *display: inline;
  zoom: 1;
  width: 200px; /* You forgot to add 'px', to show it in one line I reduced the width */
}

edited Jan 13 '15 at 14:13

TylerH

20,799
66
75
101

answered Jan 13 '15 at 13:40

4dgaurav

11,360
4
32
59

d3.js inline-block elements are failing in Firefox and IE

2 Answers2