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"> </div>
<div class="box2"> </div>
<div class="box1"> </div>
<div class="box1"> </div>
<div class="box1"> </div>
</div>
</body>
</html>