Sent by Ryan Cannon on 18 March 2005 20:08
[EMAIL-REMOVED] wrote:
>>All boxes floated left. The clearer-div will ensure that your footer
>>stays under the content, but the separator-borders will only extend to
>>the height of the boxes.
>>
>>
A little trick I like to use is to place a hidden, print-only letterhead
image in the html, instead of that clearing div, and absolutely position
it when printing. The HTML would be
<div class="container">
<div class="floating_column">...</>
<div class="floating_column">...</>
<div class="floating_column">...</>
<div class="floating_column">...</>
<img id="print_logo" height="0" width="0" alt="..." />
</div>
and the CSS:
@media screen {
img#print_logo { height:0px; width:0px; clear:both; visibility:hidden }
}
@media print {
img#print_logo { height:auto; width: auto; position absolute; top:
0px; left: 0px }
}
The visibility:hidden will keep the alt content from displaying if the
image does not load, although you may want to omit alt content inc the
case of logos, etc. for text-only browsers.
See http://www.alma.edu/michiganacademy/ for an example.
--
Ryan Cannon
Instructional Technology
Web Design
RyanCannon.com <http://ryancannon.com/?refer=email>
(989) 463-7060
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
