Andrew Truckle Andrew Truckle - 6 months ago 33
HTML Question

Why is my CSS media print min/max-width values not being obeyed in Internet Explorer?

Here is a cutdown CSS file:

table {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
}

table th, td {
/* Comment out the following line if you do not want borders */
border: 1px #d3d3d3 solid;
/* This is the default font for all cells */
font-family: Calibri;
}

table tbody tr:hover td {
color: #000;
background: #efefef;
}

body{
width:100%;
background: #666;
}

.containerPage {
min-width: 210mm;
max-width: 210mm;
padding-left: 2mm;
padding-right: 2mm;
margin-left: auto;
margin-right: auto;
background: #FFF;
}

.containerMeeting {

}

.tableHEADINGOuter {
border-top-style: none;
border-left-style: none;
border-right-style: none;
border-bottom: 1px gray solid;
padding-bottom: 2px;
margin-bottom: 5mm;
}

.tableHEADING {
}

.tableHEADING td {
vertical-align: bottom;
border-top-style: none;
border-left-style: none;
border-right-style: none;
border-bottom: 4px gray solid;
}

.textCongregation {
text-align: left;
font-size: 11pt;
font-weight: 700;
}

.textTitle {
text-align: right;
font-size: 18pt;
font-weight: 700;
}

@media print {
body{
background: #FFF;
}

.containerPage {
width: auto;
min-width: 100%;
max-width: 100%;
padding-left: 0;
padding-right: 0;
}
}


Here is a cutdown HTML file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="test.css" rel="stylesheet" type="text/css" />
<title>CONGREGATION NAME</title>
</head>

<body>

<div class="containerPage">
<div class="containerMeeting">
<div class="tableHEADINGOuter">
<table class="tableHEADING">
<colgroup>
<col width="50%" /><col width="50%" />
</colgroup>
<tr>
<td class="textCongregation">CONGREGATION NAME</td>
<td class="textTitle">Midweek Meeting Schedule</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>


The idea is that, when you open the HTML file, it will look like a long page:

View as opened in Internet Explorer

The problem is my print CSS data. I thought I had set it so that it would take up all of the printable page width instead and have no min/max values. Yet, this is what I get when I do a print preview:

Print preview in Internet Explorer

As you can see, it is cropping on the right edge. What am I doing wrong?

Thank you.

PS. I have seen this similar question, but in my case I have stipulated the unit type:

CSS media queries min-width/max-width not being called

Answer

The min-width and max-width properties do not take into account margins and padding.

So I had to extend my CSS file to reset the padding back to zero, since they would have taken on the 2mm padding from the parent.

@media print {
    body{
        background: #FFF;
    }

    .containerPage, .containerMeeting, .tableDATE, .tableHEADINGOuter, .tableHEADING, .tableTFGW, .tableAYFM, .tableLAC, {
        width: 99%;
        min-width: 99%;
        max-width: 99%;
        padding-left: 0;
        padding-right: 0;
        margin-left:0;
        margin-right:0;
    }
}