PMH4514
asked on
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?
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?
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.
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.
ASKER
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.
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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
ASKER
@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;
}
hr {
width: 100%;
height: 0;
border-top: 1px solid #000;
}
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.
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.