Keith Walton Keith Walton - 26 days ago 7
HTML Question

IE7 div border printing issue

I have a web page that renders the same in IE7, Firefox, and Safari - except when printing. IE7 appears to allocate too much space for borders when printing.

In the example below, the box heights plus borders should add up to the same height in the 2 columns. I set the

borders
to
10px
to exaggerate the problem.

I hate CSS hacks, and so far I've been able to create my pages without them. Any suggestions?

<!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>
<title>Untitled Page</title>

<style type="text/css">
.container
{
height: 120px;
width: 240px;
margin: 0;
padding: 0;
border: solid 1px red;
}
.box1
{
height: 10px;
width: 100px;
margin: 0;
padding: 0;
border: solid 10px black;
float: left;
clear: left;
}
.box2
{
height: 100px;
width: 100px;
margin: 0;
padding: 0;
border: solid 10px black;
float: right;
}
</style>

</head>
<body>

<div class="container">
<div class="box1">&nbsp;</div>
<div class="box2">&nbsp;</div>
<div class="box1">&nbsp;</div>
<div class="box1">&nbsp;</div>
<div class="box1">&nbsp;</div>
</div>

</body>
</html>

Answer Source

Try setting .box1's line-height property to 1%:

    .box1 
    {
    line-height:         1%;   
    }

Also, think about using a css reset.

EDIT: Also, try putting the box2 div before the box1 divs.

Doing this with the line-height fixes it:

   <div class="container">
        <div class="box2"> </div>
        <div class="box1"> </div>

        <div class="box1"> </div>
        <div class="box1"> </div>
        <div class="box1"> </div>
        </div>