As georgelawrence-ga stated:
The aproach I took was to paint the grey "background" as an image and
not as a background at all. I Googled around and found a simple grey
gif. (If you use this approach, you'll of course want to serve this
from your own servers.) Then I position the text of the header
directly over the grey image. This way the "print backgound colors"
setting of the browser doesn't matter, because the background's not a
background at all.Example...
<html>
<table>
<tr>
<td>
<div style="height:1.4em;overflow:hidden">
<div style="height:1.4em"><img style="height:100%;width:100%"
src="http://art.sdsu.edu/geninfo/homepages/art240/lessons/vector/images/grey.gif"/></div>
<div style="height:1.4em;position:relative;top:-1.4em;;margin-left:2px;margin-top:2px">Header
Text</div>
</div>
</td>
</tr>
<tr><td>In the table cell of the header above there are 3 divs...</td></tr>
<tr><td>1) The first one encloses the next two</td></tr>
<tr><td>2) The next one contains a grey gif which is streched to fill
the div</td></tr>
<tr><td>3) The next one is positioned on top of the previous one and
contains the text</td></tr>
<tr><td> </td></tr>
<tr><td>Note, some versions of IE ignore the overflow css setting when
printing.</td></tr>
<tr><td>This causes a bit of unwanted space underneath the header.</td></tr>
<tr><td>Firefox doesn't seem to have a problem with it.</td></tr>
<tr><td> </td></tr>
</table>
</body>
</html>
0 件のコメント:
コメントを投稿