Styled HR tag doesn't print

Hello,

I am trying to print an HTML document which includes a styled HR tag.

I specify the style as such:
hr {
      border: 0;
      width: 100%;
      color: #000;
      background-color: #000;
      height: 1px;
}


and use <HR/> to render it.

The line displays properly in every browser I try. The problem is, when I hit print from the browser toolbar, everything prints as desired with the exception of the horizontal line - it does not print at all. Even if I specify a height of 100px, still nothing prints.

Any idea why?
PMH4514Asked:
Who is Participating?
 
DesignbyonyxCommented:
As mentioned, the background will not print.  Try something like this:

hr {
      width: 100%;
      height: 0;
      color: #000;
      border: 1px solid #000;
}

Open in new window


0
 
sah18Commented:
I suspect the issue may be that the printing of background colors may be turned off in the browser you are using (they usually are in most browsers, by default).

This can be found in different places in different browsers.  For example, in IE8, look under File, Page Setup, then see if checking off "Print Background colors and images" fixes the issue.  If it does (meaning, if your HR prints when this is checked), then I'd look at a different way of formatting your HR that doesn't rely on setting a background-color.  If it doesn't, then something else is still wrong.

Please post back the results.
0
 
x3manCommented:
From what I can remember the background element isn't printed in all browsers. So you could try creating a print version of the style sheet and using normal hr (not styled) tags in that.

To do so, also include: <link rel="stylesheet" href="path/print.css" type="text/css" media="print" /> in the document head where print.css is the style sheet without the styled hr tag.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
PMH4514Author Commented:
Hello

enabling print background colors/images had no effect - still no line printed.

I can print an unstyled line (this is what I had done originally) but unfortunately the aesthetic of that is not acceptable to the customer since it renders as that sorta double/shaded line rather than a crisp solid line.
0
 
sah18Commented:
The above should work, but it can even be simplied slightly further to this:

hr {
      width: 100%;
      height: 0;
      border: 1px solid #000;
}
0
 
sah18Commented:
And one more comment on this -- if you were to leave the default styling (unstyled), the look of the hr element actually varies browser to browser and even across different versions of the same browser.  So, you're definitely correct in wanting to style it if possible, if for no other reason than consistency across browsers.
0
 
PMH4514Author Commented:
@Designbyonyx  - this worked. The line was too "heavy" though, so I changed it to only apply the border to one side:

hr {
      width: 100%;
      height: 0;
      border-top: 1px solid #000;
}
0
 
DesignbyonyxCommented:
yeah, I saw that after I made my post.  Instead of reposting with border-top or border-bottom, I just assumed you could figure it out ;)  I just wanted to show you that you could use the border property as opposed to background.  Cheers.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.