title: Highcharts not rendering in internet explorer
body: <p>I have an issue that only seems to affect internet explorer 8.</p>
  
  <p>I have used the highcharts.js script from <a href="http://www.highcharts.com/" rel="nofollow noreferrer">http://www.highcharts.com/</a> to display data on my site however I have tried to display this data within a lightbox and have used the lightbox_me.js script from <a href="http://buckwilson.me/lightboxme/" rel="nofollow noreferrer">http://buckwilson.me/lightboxme/</a></p>
  
  <p>I will try to show the code I have used:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  var chart;
  $(document).ready(function() {
  chart = new Highcharts.Chart({
  chart: {
  renderTo: 'analysis',
  defaultSeriesType: 'bar',
  backgroundColor: 'rgba(0,0,0,0)'
  },
  title: {
  text: ''
  },
  subtitle: {
  text: ''
  
  },
  xAxis: {
  categories: ['First Impressions', 'Politeness/Courtesy', 'Helpfulness', 'Speed and Efficiency', 'Reliability', 'Trustworthiness', 'Value for Money', 'Quality of service', 'After Sales', 'Overall Satisfaction'],
  title: {
  text: null
  }
  },
  yAxis: {
  min: 0,
  max:100,
  title: {
  text: 'Overall Score (%)',
  align: 'middle'
  }
  },
  tooltip: {
  formatter: function() {
  return ''+
  this.y +' %';
  }
  },
  plotOptions: {
  
  bar: {
  dataLabels: {
  enabled: false
  }
  }
  },
  
  legend: {
  enabled: false,
  layout: 'vertical',
  align: 'right',
  verticalAlign: 'top',
  x: -100,
  y: 100,
  floating: true,
  borderWidth: 1,
  backgroundColor: '#FFFFFF',
  shadow: false
  },
  credits: {
  enabled: false
  },
  series: [{
  name: 'Year 2012',
  data: [&lt;?php echo "$first_impression".","."$politeness".","."$knowledge".","."$speed".","."$reliability".","."$honesty".","."$value".","."$quality".","."$after_sales".","."$satisfaction"; ?&gt;]
  }]
  });
  
  
  });
  
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>As you can see, I have used php to insert the stats.</p>
  
  <p>I then have the lightbox script:</p>
  
  <pre><code>$('#scores_button').click(function(e) {
  $('#scores_container').lightbox_me({
  centered: true, 
  onLoad: function() { 
  $('#scores_container').find('input:first').focus()
  }
  });
  e.preventDefault();
  });
  </code></pre>
  
  <p>This is the html:</p>
  
  <pre><code>&lt;div id='scores_container'&gt;
  
  &lt;h1 class='lightbox_header'&gt;Areas of Performance&lt;/h1&gt;
  
  &lt;div id='analysis'&gt;
  
  &lt;/div&gt;
  
  &lt;p class='lightbox_paragraph'&gt;We asked all repondents to score the business on it's performance in the areas above. This chart shows the average scores in each area.&lt;/p&gt;
  
  &lt;a id='close_x' class='close sprited' href='#'&gt;close&lt;/a&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>And finally my CSS</p>
  
  <pre><code>#scores_container {
  width:760px;
  display:none;
  background-color:#f2f5f7;
  padding:30px 40px 40px 40px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #536376;
  -webkit-box-shadow: rgba(0,0,0,.6) 0px 2px 12px;
  -moz-box-shadow:  rgba(0,0,0,.6) 0px 2px 12px;
  box-shadow:  rgba(0,0,0,.6) 0px 2px 12px;
  position:absolute;
  top:0px;
  left:0px;
  }
  
  h1.lightbox_header{
  font-size:22px;
  font-weight:bold;
  color:#536376;
  margin-bottom:20px;
  border-bottom:1px solid #cdd0d9;
  padding-bottom:10px;
  }
  
  #analysis{
  width:680px;
  height:400px;
  }
  
  p.lightbox_paragraph, p.lightbox_paragraph_first{
  font-family: 'PT Sans', sans-serif;
  font-weight:700;
  font-style:italic;
  color:#536376;
  border-top:1px solid #cdd0d9;
  padding-top:10px;
  }
  </code></pre>
  
  <p>This code works in all browsers I have tested but internet explorer. Internet explorer 8 is the browser that I have been using whilst trying to find a solution.</p>
  
  <p>Please see this screenshot of how it appears in ie8:</p>
  
  <p><img src="https://i1208.photobucket.com/albums/cc376/Elementgraphics/screen2_zpse00e4652.jpg" alt="Internet Explorer 8"></p>
  
  <p>And how it appears in Google Chrome:</p>
  
  <p><img src="https://i1208.photobucket.com/albums/cc376/Elementgraphics/screen3_zps6624af9d.jpg" alt="Google Chrome"></p>
  
  <p>My thoughts are that maybe it is my css causing the problem but no matter what I try I can't seem to get the chart to display. The chart container is also not centered vertically within the browser window but this is something I can work on once I get the chart to render. Any help would be much appreciated.</p>
  
  <p>I know it's not a particularly well built site as I am only learning but please see the following link to the site itself, if it will help: <a href="http://www.bbg.im/development" rel="nofollow noreferrer">http://www.bbg.im/development</a></p>
  
  <p>The error is occurring on the profile pages when the chart icon is clicked.</p>
  
  <p>I also am experiencing the same/similar issue with pie charts and google maps in the same lightbox script.</p>
  
  <p>Many thanks.</p>