Window.Print() under IE6 truncates 1 inch off the right of the page

HTML & CSS
1

Hi,

I’m trying to print a document/page in a IE window using window.print() (ASP 2.0), but under IE6 it truncates 1 inch of the right of the page. Works fine in IE7 and looks like it truncates a little off in IE8. Any idea how to fix this?

Thanks.

Matt

2

Go into the “Page Setup” option within the browser’s “File” menu and check the size of the paper margins that you have set in the browser.

3

I just found the following article, and tested it on IE6, by just changing the left/right margin to 0, and this appears to resolve the issue.

Is there a better solutions I could use, by using CSS to work across browsers, instead of having my users change their margins every time they print?

http://support.microsoft.com/?kbid=260642

4

They wouldn’t have to change the margins every time they print. Once they set the margins correctly for their printer then it should stay set correctly.

5

Do you have a width set on the page or the main containers in your CSS?

A common problem is that web designers don’t think about print stylesheets at all, and so if they have set a width on the page or the main container, the printed page will try to match that width. A variation on that problem is the designer who knows that they need to have a print stylesheet, but then does something stupid like setting width:8in;, which might work fine on US Letter paper with a laser printer, but goes horribly wrong on A4 paper with a cheap home printer, where the printable width can be considerably narrower.

Depending on what units are used, it may be that different browsers are interpreting them slightly differently, hence it working better with some than others.

6

<< Do you have a width set on the page or the main containers in your CSS? >>

I don’t believe I have any page or main containers in the following CSS file below. I have over 10,000 users, who use over 500 different applications, so I need a printing/margin solution to set the page margins for my ASP site, so my user’s don’t have to worry about printing margins.

body
{
color: black;
font-family: Arial;
background-color:#006281;

}

.standardText
{
color: black;
font-family: Arial;
background-color:#006281;
font-size: 12px;
font-weight:normal;
}

#sectionCellWhite{
background-color:#ffffff;
border:solid 0px #222222;
padding-bottom:20px;
}

#sectionCellGray{
background-color:#f5f5f5;
border:solid 0px #222222;
padding-bottom:20px;
}

#wideTable
{
width: 100%;
border: solid 0px #222222;
}

#tableMargin
{
margin-left:15px;
}

.sectionTitle
{
FONT-WEIGHT: bold;
FONT-SIZE: large;
COLOR: white;
TEXT-INDENT: 10px;
PADDING-TOP: 6px;
HEIGHT: 25px;
BACKGROUND-COLOR: green;
TEXT-ALIGN: left;
FONT-VARIANT: small-caps
}

.stepCurrent
{
background-color: #e01122;

width: 15px;
border: 1px solid #e01122;
color: White;
font-family: Arial;
font-size: 12px;
font-weight: bold;
text-align: center;

}

.sectionSubtitle
{
font-weight: bold;
font-size: 1em;
text-transform: capitalize;
color: black;
font-variant: normal;
}
.itemHeader
{
font-weight: bold;
font-size: 1.3em;
color: black;
}

.itemLabel
{
font-weight: 500;
font-size: 1.0em;
color: black;
}

.emphasis
{
font-weight:normal;
font-size: 0.8em;
color:red;
font-variant:normal;
}

.note
{
font-weight:bolder;
font-size: 0.7em;
color:maroon;
font-variant:normal;
font-style:italic;
}

.formLabel
{
font-weight: 500;
font-size: 0.9em;
color: black;
}

.modalBackground {
background-color:#333333;
filter:alpha(opacity=70);
opacity:0.7px;
padding:5px;
}

.sideBar
{
color:White;
padding-bottom: 10px;

}

.footer
{
font-size:x-small;
color:GrayText;
}

.modalBackground2{
background-color:#CCCCFF;
filter:alpha(opacity=40);
opacity:0.5;
}

.ModalWindow2{
border: solid1px#c0c0c0;
background:#f0f0f0;
padding: 0px10px10px10px;
position:absolute;
top:-1000px;
}

7

One solution would be to apply a print media width toall the content that corresponds to printing on A4 with the maximum size margins that any printer uses.

8

<< One solution would be to apply a print media width toall the content that corresponds to printing on A4 with the maximum size margins that any printer uses. >>

I never used a print media before with CSS. One of the settings I noticed in IE8 is “Enable Shrink-to-Fit”. I assume this isn’t available in browsers lower than IE8.

Do I just add the print media directly to my current CSS file, or do I create a separate one, or do I place directly within the code?

Example in CSS file? Does the following set left & right margins to 0 when in preview/print mode for all browsers?

@media print{
body { background:white; color:black; margin:0 }
}