printing background images
1.09.2004
My latest design frustration: our client has a simple listing of text links down the side of the page as their navigation. They decide they want to put little fleurs between each link to separate them. I figure out a way of adding the images that takes less than five minutes and I only have to change one file — the CSS.
The HTML looks like this:
<ul id="nav">
<li><a href="link1.html">link 1</a></li>
<li><a href="link2.html">link 2</a></li>
</ul>and the CSS has this definition:
#nav li {
list-style-type:none;
padding:1em 0;
background:url(fleur.gif) center top no-repeat;
}That worked great and I was extremely pleased that it took so little time and effort on my part. Then a new wrinkle was introduced.
It turns out that this particular client had a way of reviewing the site that hadn't occurred to me — she had her assistant print it for her. She never looked at it on screen. After being assured by the account rep that she had tried unsuccessfully to convince the client to look at the screen instead of the printouts, and some silent muttering to myself about the need for minimum technical competency among web site owners, I thought, well, look, we just need to get the client's assistant to turn on background printing. Then the client can see her fleurs and everyone will be happy.
Yet another wrinkle was introduced.
When I printed the site from Mozilla with background colors and images turned on, the fleurs printed and it looked fine. But printed from IE, the site was missing the fleurs. Background colors and images were set to print, and indeed, they were printing, all except those stupid fleurs.
You could see smoke coming out of my ears at this point. After all the machinations we were going through to try to save this client from herself, to be foiled by a browser bug was irritating, to say the least.
I was pretty sure we couldn't get the client's assistant to install Mozilla on her system to do the printing. Besides, there was always the chance that our client would decide to print from the site herself, find out that IE didn't print out her fleurs, then rage and storm about the “defect.”
So I butchered my code. I took the background rule out of my CSS and inserted <img scr="..."><br> into every list item of the navigation on every page. Cursing silently...
