We help IT Professionals succeed at work.

Print preview in IE looks different from print preview in Firefox.

msgl
msgl used Ask the Experts™
on

Hi, I am using a javascript to load some charts into a canvas element each on a web page (sharepoint site).
It is seven charts and in firefox everything looks neat with 3 charts on the first two rows and the seventh and last on the third row.

However, in IE only the first two rows are visible (six charts) but they are pushed to the right on the page and the charts on the right hand side are chopped of in the middle, i.e. some of the charts are not visible.

On the site it looks the same but with print preview the IE version is a bit messed up.


CSS

<table id="chartsTable">
      <tbody">
      </tbody>
</table>

<style type="text/css">
       td.tableCell
        {
               background-color:#FFFFFF;                        
              border-style: ridge;
              text-align: center;
            width: 250px;
            height: 205px;
            }
</style>

<style type="text/css" media="print">
       td.tableCell
        {
               background-color:#FFFFFF;                        
              border-style: none;
              text-align: center;
            width: 250px;
            height: 205px;
float: left;
            }
#charts {margin-left: -0px; float: left; width: 100%;}


</style>


Javascript (part of it) to load charts


rows=1;
while (charttitle.length > cols*rows) rows += 1;  // work out how many rows are needed in the chart table
var html = '<tbody>';
var j=0;
for (var r = 1; r <= rows; r++)
      {
      html += '<tr>';
        for (var c = 1; c <= cols; c++)
            {
            clickableCell=(j<ListViewArray.length)?'<div id=\"chart'+j+'\" style=\"cursor:pointer;\" onclick=\"window.open(\''+goPage[j]+'\',\'_self

\')\">'+charttitle[j]+'</div>':'<div id=\"chart'+j+'"><p></p></div>';
            html += '<td class="tableCell" col="' + c +'">' + clickableCell + '</td>';
            j=j+1;
            };
      html += '</tr>';
      };
      html += '</tbody>';
// console.log("html: "+ html);
$('#chartsTable').append(html);
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
Did you have 'Shrink to Fit' selected on both browsers?  Note that users can change that setting so you can't guarantee the same view all the time.  On my very simple home page, Print Preview in both browsers looks the same.

Author

Commented:
Yes, the view can be different but the problem is that with IE the charts are cut in half for some reason.
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
Did you have 'Shrink to Fit' selected on both browsers?  Do you have a link to look at?

Author

Commented:
Yes, Shrink to Fit on both browsers and no, sorry, it's on a sharepoint site so unfortunately no public access
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
I don't know anything more to help you.  'Request Attention' and get other zones and experts added to your question.  At least Internet Explorer.

Author

Commented:
Ok, thanks for your time anyway Dave.

If I put a border around the charts it looks like in attached image in IE Print Preview. The borders are in the right place but not the charts (which also are chopped in half). In Firefox Print Preview it looks like I want it to.
printpreview.png
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
What happens if you remove your 'print' styling from the page?  Put up a print preview from Firefox so I can see what you like.

Author

Commented:
Without print styling it's almost the same, the users will only use IE so it doesn't matter if it looks good in FIrefox, it's just that it works there so I should get it working in IE somehow.

The rendered html looks like (for that table) following (might give you a clue):
    <style type="text/css">
       td.tableCell
        {
             background-color:#FFFFFF;                        
            border-style: ridge;
            text-align: center;
            width: 250px;
            height: 205px;
            }
</style>


<table id="chartsTable">
<tbody>
<tr>
<td class="tableCell" col="1">
<div id="chart0" style="cursor: pointer;" onclick="window.open('https://site1','_self')">
<canvas style="position: relative;" height="205" width="250" id="JSChart_chart0"></canvas>
</div>
</td>
<td class="tableCell" col="2">
<div id="chart1" style="cursor: pointer;" onclick="window.open('https://site2','_self')">
<canvas style="position: relative;" height="205" width="250" id="JSChart_chart1"></canvas>
</div>
</td>
<td class="tableCell" col="3">
<div id="chart2" style="cursor: pointer;" onclick="window.open('https://site3','_self')">
<canvas style="position: relative;" height="205" width="250" id="JSChart_chart2"></canvas>
</div>
</td>
</tr>
<tr>
<td class="tableCell" col="1">
<div id="chart3" style="cursor: pointer;" onclick="window.open('https://site4','_self')">
<canvas style="position: relative;" height="205" width="250" id="JSChart_chart3"></canvas>
</div>
</td>
<td class="tableCell" col="2">
<div id="chart4" style="cursor: pointer;" onclick="window.open('https://site5','_self')">
<canvas style="position: relative;" height="205" width="250" id="JSChart_chart4"></canvas>
</div>
</td>
<td class="tableCell" col="3">
<div id="chart5" style="cursor: pointer;" onclick="window.open('https://site6','_self')">
<canvas style="position: relative;" height="205" width="250" id="JSChart_chart5"></canvas>
</div>
</td>
</tr>
<tr>
<td class="tableCell" col="1">
<div id="chart6" style="cursor: pointer;" onclick="window.open('https://site7','_self')">
<canvas style="position: relative;" height="205" width="250" id="JSChart_chart6"></canvas>
</div>
</td>
<td class="tableCell" col="2">
<div id="chart7"><p></p></div></td>
<td class="tableCell" col="3">
<div id="chart8"><p></p></div></td>
</tr>
</tbody>
</table>

Image from firefox print preview attached
firefoxprintpreview.png
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
According to W3Schools, IE doesn't support the <canvas> tag you're using so that has to go.  Are these charts images?

Author

Commented:
I saw that but since the charts are shown correctly on the page (in IE) I thought it would be possible to print them as well, I just can't figure out why the charts are cut in half on the print preview. To move them around on the page I can use the normal margin attritbutes.

The charts are drawn in the canvas elements with a javascript (http://www.jscharts.com/)
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
The charts on the http://www.jscharts.com/examples fit on the print preview... because they are jpg thumbnails.  What's even more interesting is that 'Shrink to Fit' didn't work the first time I looked at the Print Preview of that page in IE8.  When I selected 70% and then went back to 'Shrink to Fit', then it fit the whole width in the preview.  Myabe 'Shrink to Fit' is broken a little in IE8.  Along with <canvas> not working.
Commented:
I had to remove the text-align attribute and add position:relative to the columns.