Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

Troubleshooting
Research
Professional Opinions
Ask a Question
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

troubleshooting Question

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

Avatar of msgl
msgl asked on
JavaScriptWeb Development
12 Comments1 Solution770 ViewsLast Modified:

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);
ASKER CERTIFIED SOLUTION
Avatar of msgl
msgl

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Commented:
This problem has been solved!
Unlock 1 Answer and 12 Comments.
See Answers