1

I am using scaleraphael http://www.shapevent.com/scaleraphael/ that allows my svg/VML to change size when the user resizes the browser (fluid layout - I have got it to scale to the same size as a div on the page).

It works perfectly with SVG browsers and although it does work in IE8/7/6 (VML) there is for some strange reason a gap on the right. I think it is something connected to the coordsize of the VML group but this is a bit of a guess.

The gap only appears at certain browser widths (Around 40pixels apart). eg browser widths: 1060, 1104, 1144, 1186, 1230. The gap is around 20pixels at its biggest and decreases back to 0 again each pixel change in width until the browser width is the next one in the sequence where it appears as 20pixels again

If I use developer tools in IE I can see that the vml group does included the gap as it should but the contents of my paper do not fill it - hence why I think it is connected to coordsize

Just wondering if anyone else out there has had the same issue (if not you probably wont understand my question as it is very hard to explain)

Jason
  • 143
  • 1
  • 17

1 Answers1

1

Some time ago I created my own script to make Raphael's canvas "responsive". And yes I also got issued with gaps in IE7-8 which were driving me mad. However my gaps were constant. Now my script works fine. If you need a simple responsive size then you don't need a plugin for that:

var _browser = {};
_browser.ie = userAgent.indexOf("msie") > -1 ? {} : false;
if(_browser.ie)
    _browser.ie.old = (navigator.userAgent.match(/MSIE [6-8]/) !== null);


if(_browser.ie && _browser.ie.old){

    _data.R = Raphael('conainerID', _data.options.width, _data.options.height);

    $(window).on('resize', function(){
          var w = $('#containedID').width();
          var h = $('#containedID').height();
         _data.R.setSize(w,h);
    });

}else{
    _data.R = Raphael('conainerID', '100%', '100%');    
}

You will need to create a fluid container for that. Don't set fixed width to it; but you can set some "max-width" to limit its scaling:

<div id="containerID" style="max-width: 1200px;"></div>
Roman
  • 3,799
  • 4
  • 30
  • 41