1. Home
  2. Forums Index
  3. Browser Side / CSS 5:14 am May 2, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Border not printing in IE7

Border print problem in IE7

         

mschu

12:35 pm on Nov 28, 2007 (gmt 0)

10+ Year Member



I've got a border around a DIV that spans multiple pages. When printing in IE7, this border disappears on page 2 and re-appears part of the way down on the last page. I've had no problems with this in Firefox or IE6. Any thoughts?

Note that the border is around the outermost DIV and that there are three DIVs defined within this containing DIV. The behavior of the border printing changes depending on whether each inner DIV spans multiple pages.

Here is some sample html and the corresponding css that illustrates the problem:

TEST.HTML
=========
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<title>Test Page to Illustrate Border Printing Problem</title>
<meta name="Source Version" content="4.1"/>

<link rel="stylesheet" type="text/css" href="css/test.css"/>

</head>
<body>
<div id="content">
<div id="upperParagraphs">
<p>
Just a lot of random text to fill some space and make it seem like there is
some actual content here. These are just paragraph tagged sections of text that
repeat several times in order to fill space and make it easier for this div
to span a page.
</p>
<p style="margin:350px 0px">
Just a lot of random text to fill some space and make it seem like there is
some actual content here. These are just paragraph tagged sections of text that
repeat several times in order to fill space and make it easier for this div
to span a page.
</p>
<p>
Just a lot of random text to fill some space and make it seem like there is
some actual content here. These are just paragraph tagged sections of text that
repeat several times in order to fill space and make it easier for this div
to span a page.
</p>
<p>
Just a lot of random text to fill some space and make it seem like there is
some actual content here. These are just paragraph tagged sections of text that
repeat several times in order to fill space and make it easier for this div
to span a page.
</p>
<p>
Just a lot of random text to fill some space and make it seem like there is
some actual content here. These are just paragraph tagged sections of text that
repeat several times in order to fill space and make it easier for this div
to span a page.
</p>
</div>

<div id="centerTable">
<table>
<tr><td colspan=3>* * * * * * * * * * * * * * * * * * * * * * * * * </td></tr>
<tr>
<td>
Cell one containing nothing
</td>
<td>
Cell two containing nothing
</td>
<td>
Cell three containing nothing
</td>
</tr>
<tr>
<td>
Row two, one containing nothing
</td>
<td>
Row two, two containing nothing
</td>
<td>
Row two, three containing nothing
</td>
</tr>
<tr>
<td>
Row two, one containing absolutely nothing
</td>
<td>
Row two, two containing absolutely nothing
</td>
<td>
Row two, three containing absolutely nothing
</td>
</tr>
<tr><td colspan=3>* * * * * * * * * * * * * * * * * * * * * * * * * </td></tr>
<tr>
<td>
Cell one containing nothing
</td>
<td>
Cell two containing nothing
</td>
<td>
Cell three containing nothing
</td>
</tr>
<tr>
<td>
Row two, one containing nothing
</td>
<td>
Row two, two containing nothing
</td>
<td>
Row two, three containing nothing
</td>
</tr>
<tr>
<td>
Row two, one containing absolutely nothing
</td>
<td>
Row two, two containing absolutely nothing
</td>
<td>
Row two, three containing absolutely nothing
</td>
</tr>
<tr><td colspan=3>* * * * * * * * * * * * * * * * * * * * * * * * * </td></tr>
<tr>
<td>
Cell one containing nothing
</td>
<td>
Cell two containing nothing
</td>
<td>
Cell three containing nothing
</td>
</tr>
<tr>
<td>
Row two, one containing nothing
</td>
<td>
Row two, two containing nothing
</td>
<td>
Row two, three containing nothing
</td>
</tr>
<tr>
<td>
Row two, one containing absolutely nothing
</td>
<td>
Row two, two containing absolutely nothing
</td>
<td>
Row two, three containing absolutely nothing
</td>
</tr>
<tr><td colspan=3>* * * * * * * * * * * * * * * * * * * * * * * * * </td></tr>
<tr>
<td>
Cell one containing nothing
</td>
<td>
Cell two containing nothing
</td>
<td>
Cell three containing nothing
</td>
</tr>
<tr>
<td>
Row two, one containing nothing
</td>
<td>
Row two, two containing nothing
</td>
<td>
Row two, three containing nothing
</td>
</tr>
<tr>
<td>
Row two, one containing absolutely nothing
</td>
<td>
Row two, two containing absolutely nothing
</td>
<td>
Row two, three containing absolutely nothing
</td>
</tr>
<tr><td colspan=3>* * * * * * * * * * * * * * * * * * * * * * * * * </td></tr>
</table>
</div>

<div id="bottomTable">
<table width="100%">
<tr>
<td>RED</td>
<td>YELLOW</td>
</tr>
<tr>
<td>GREEN</td>
<td>BLUE</td>
</tr>
<tr>
<td>PURPLE</td>
<td>CHARTREUSE</td>
</tr>
<tr>
<td>RED</td>
<td>YELLOW</td>
</tr>
<tr>
<td>GREEN</td>
<td>BLUE</td>
</tr>
<tr>
<td>PURPLE</td>
<td>CHARTREUSE</td>
</tr>
<tr>
<td>RED</td>
<td>YELLOW</td>
</tr>
<tr>
<td>GREEN</td>
<td>BLUE</td>
</tr>
<tr>
<td>PURPLE</td>
<td>CHARTREUSE</td>
</tr>
<tr>
<td>RED</td>
<td>YELLOW</td>
</tr>
<tr>
<td>GREEN</td>
<td>BLUE</td>
</tr>
<tr>
<td>PURPLE</td>
<td>CHARTREUSE</td>
</tr>
<tr>
<td>RED</td>
<td>YELLOW</td>
</tr>
<tr>
<td>GREEN</td>
<td>BLUE</td>
</tr>
<tr>
<td>PURPLE</td>
<td>CHARTREUSE</td>
</tr>
<tr>
<td>RED</td>
<td>YELLOW</td>
</tr>
<tr>
<td>GREEN</td>
<td>BLUE</td>
</tr>
<tr>
<td>PURPLE</td>
<td>CHARTREUSE</td>
</tr>
</table>
</div>
</div><!-- end content -->
</body>
</html>

TEST.CSS
========
html { min-height: 100%; margin-bottom: 1px; }

* {margin: 0; padding: 0;}

body {
padding: 0px;
text-align: center;
margin: 0px;
color: #333333;
}

#content {
padding: 0 3px 10px;
border-style: solid;
}

#content p {
margin: 5px;
}

table {
padding: 0;
margin: 0;
font-size: 100%;
font-family: Verdana, Arial, sans-serif;
}

p {
font-size: 95%;
margin: 10px 5px 5px 5px;
color:#333333;
}

madk

9:28 pm on Nov 30, 2007 (gmt 0)

10+ Year Member



Looks like you need to set your border width and color. Use something like:

border: 1px solid #123456;

mschu

1:14 pm on Dec 3, 2007 (gmt 0)

10+ Year Member



Thanks for looking at my problem.

Explicitly setting the width and color or the border unfortunately does not appear to solve the problem of disappearing when printing (or print previewing). The way I'm currently defining the border, it defaults to 3px and black.

mschu

1:16 pm on Dec 3, 2007 (gmt 0)

10+ Year Member



If anyone has copied my html and css and recreated the print/preview problem of the border disappearing on page two, please post a quick reply to that effect. I'm going a little nuts wondering if I'm the only one experiencing this problem!

Thanks!

SuzyUK

2:57 pm on Dec 3, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



>> please post a quick reply to that effect.

very quick reply

A copy > paste > print preview shows me the same as you're describing.. you're not nuts ;)

SuzyUK

2:59 pm on Dec 3, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



hmm.. haslayout applies to print too!

add 

zoom: 1;
or another hasLayout fix to the #content div and it should fix it

mschu

4:19 pm on Dec 3, 2007 (gmt 0)

10+ Year Member



Success!

You were right, as soon as I got IE's hasLayout to kick in, the problem went away! This worked beautifully in my real page.

Thank you for trying this out for me!

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 5:14 am May 2, 2026