Search code examples
htmlcssinternet-explorer

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

Solution

  • 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;
    }
}