• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1141
  • Last Modified:

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?
0
PMH4514
Asked:
PMH4514
  • 3
  • 2
  • 2
  • +1
2 Solutions
 
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
 
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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:
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

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 3
  • 2
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now