hr not seen when printing

Question

I'm writing some html to be shown in the screen and sent by e-mail too (I'm making it with tables). I want to sepair the sections. I've tried putting some hr tags and it's seen properly in the navigators (Internet Explorer 9 and Firefox 10) and in the email managers (Outlook 2010, Hotmail and GMail). Well, if I print it (in the navigators) I don't see the hr tags. I have the same problem with a label whose background color is seen in the navigators and email managers but when the document is printed is not seen. (The css file is the same for showing in screen and for printing).

Thanks for your answers.

Answer 1

You can make an <hr> that's printable without changing browser settings like this:

hr {
    display: block;
    height: 1px;
    background: transparent;
    width: 100%;
    border: none;
    border-top: solid 1px #aaa;
}

caveat: I only tested in chrome.

Answer 2

The background not printing is a preference setting in your browser. It's off by default to save ink. But if the hr (or any construct) is white and is showing on the coloured background on your screen, you might want to switch this setting on.