FireFox prints OK but IE7 doesn't - Why?

Converting a site layout from tables to CSS. The files validate as XHTML 1.0 transitional (html and css files validate), and appear identicle onscreen with IE6, IE7 and FFox3.5.

However, when printing the page, Firefox prints the left nav block correctly (page 1, upperleft, as both browsers show onscreen), but IE7 prints this block on page 3 (beside the footer). Same result on different printers, so I presume the factor lies within IE7.

Can’t seem to find a solution, any help welcome.

Thanks.

Page HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Black Bear Tours</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="notables-022510.css" type="text/css" media="screen" />
<link rel="stylesheet" href="notables-print-022510.css" type="text/css" media="print" />
</head>
<body>
<div id="wrapper">
<!-- begin main content-->
<div id="content">
<div class="contentpad">
	<h1><img src="" class="headline" style="width:28px; height:30px;" alt="Black Bear Track" />&quot;Black Bear Watching . . .</h1>
          	<h2 class="right">. . . our Specialty&quot;</h2>
            <p><img src="" class="intextright" alt="Black bear" style="width:200px; height:248px;" />
	Black Bear watching is our life at Business Name. It is not a seasonal sideline 
            for us. It has been our livelihood for over thirty years. And that 
            shapes our attitude toward both our visitors and the game we see.</p>
            <p class="subheadb">Prime Black Bear Habitat with Controlled Access</p>
            <p>You will be deep in the most productive habitat in North America.</p>
            <p>Our territories in State and Province cover over one million acres of private 
            and government leased land. All this land has controlled access -  
            which is an unparalleled benefit for Business Name's guests.</p>
            <p>We have seeed these lands since 1964. We
            know the habitat, and we know the black bears' habits and patterns within it.</p>
            <p>The black bear in your territory are
            under-seeed, resulting in a growing bear population, with many 
            stands having multiple bears visiting them.</p>
            <p class="subheadb">Unsurpassed opportunity to see a Trophy Bear.</p>
            <p>We strive to consistently give our visitors the clicking opportunities
            expected of a truly world-class  tour guide. This requires knowledge, simage, effort, advance
            preparation, and experience.</p>
            <p>Bear  is our life, so no matter how you cut it, a part time guide can not give a full time commitment.</p>
            <p>Our highly processed scents have incredible drawing
            power. They are continually adjusted as bear feeding preferences change. Your , stand and blind are precisely
            positioned and meticulously maintained only after our careful study of prevailing
            winds, terrain, and game patterns.</p>
         <p class="subheadb">A sure shot and a quick, clean image.</p>
            <p>The black bear is a game animal we know and
            respect. Powerful and crafty, the bear's trademarks are strength and endurance.
	His nose is as sensitive as the most sophisticated
            radar system. The bear's feed and travel patterns through our thick fir and dense
            bogs make him a challenging animal to see.</p>
            <p>This black ghost can appear at your stand and then
            disappear in a blink. Scent and noise control are critical to your success. You are provided pre-built, permanent
            stands, portables and ground blinds with all obstructing branches and brush
            cleared from your line of fire.</p>
            <p><img src="" class="intextright" alt="Black bear" style="width:279px; height:199px;" />
            Our stands offer visitors an average shot
            of 18 yards. Most visitors will click at distances of 75 yards or less, and typically will be clicking 20-30 yards.</p>
            <p>The black bear demands clicking excellence before
            he will pose for you. Even at these close ranges, a precision lense is essential. Your focal point is a 
            4 to 5 inch square area just behind the front shoulder.</p>
            <p>Visitors, it makes no difference how good you are - unless you focus exactly 
              in the boiler room you will get nothing but a blur.</p>
            <p>The black bear is unlike any other game animal you have ever seen. When 
              spooked, he will not lie down or freeze like a deer. But rather, 
              will run up to 20 miles. Therefore, precision is essential.</p>
            <p>Those of you using a telephoto have many 
            options. You do not have to even wait until the bear is close for 
            a good shot. Also, a head and chest closeup shot can produce when combined 
            with accurate clicking.</p>
            <p>And never rush a shot. But when you do 
            have a good shot - take it. Do not assume the bear may go left 
            or right, or even to the actual bait. Be positive of what and where 
            you are clicking.</p>
            <p class="subheadr">State Bear </p>
            <p>State has one of the heaviest black 
            bear concentrations per acre of habitat in North America. Success 
            from our blinds and tree stands has been outstanding with 
            prize winning images year in and year out.</p>
            <p>Perhaps the most 
            beautiful country in the world, you will be surrounded by an explosion of 
            fall foliage color and you will never be too far from a delicious State lobster dinner. 
            There is nothing quite like our fall in State.</p>
            <p><a href="">Night scopes</a> are legal in State.</p>
            <p>Click Here for <a href="">State Black Bear</a> details.</p>
            <p class="subheadr">Province Bear </p>
            <p>Province visitors are in our boiling bear habitat of northwest Province. 
	Visitors are extremely productive using our proven scent methods and our carefully 
              positioned stands and blinds. The long sub-arctic days afford ample opportunity to both see and experience 
              the most awesome pike, walleye and trout fishing imaginable.</p>
            <p>Click Here for <a href="">Province Black Bear</a> details.</p>
            <p class="subheadb">Private &amp; Flexible Accommodations</p>
            <p>Unlike visitors with most tour guides, lodges and 
            sporting camps, Business Name's guests are not doubled up in a bunk 
            house or room with other guests. Your party will enjoy the privacy of your 
            own sleeping room, and the good night's sleep that is important for 
            a good trip - whether you come alone, with a large group, with your 
            spouse or whole family.</p>
            <p class="subheadb">Questions?</p>
            <p>When you book a trip with us, you will receive a complete confirmation 
              kit including detailed information on equipment and clothing, plus plus graphic illustrations of optimum angles.</p>
            <p>Please feel free to call us at any time.</p>
            <p>Click here for answers to some of your <a href="">Questions</a>.</p>
			<div id="pagetoplink"><a href="#">^ TOP</a></div>
  </div></div>
<!-- end main -->
<!-- begin nav  -->
<div id="nav">
	<div class="center">
	<a href="" id="homelink" title="Return to Home Page">
	<img src="images/logo.gif" alt="Return to Home Page" id="topleftlogo" /></a></div>
    <p><a href="" class="menu">Home</a></p>
    <p><a href="" class="menu">Black Bear</a></p>
    <p><a href="" class="menu">State Bear</a></p>
    <p><a href="" class="menu">Province Bear</a></p>
    <p><a href="" class="menu">Bear</a></p>
    <p><a href="" class="menu">About</a></p>
    <p><a href="" class="menu">Ursus Americanus</a></p>
    <p><a href="" class="menu">Bear</a></p>
    <p><a href="" class="menu">Testimonial Letters</a></p>
    <p><a href="" class="menu">Acknowledgment Letters</a></p>
    <p><a href="" class="menu">References</a></p>
    <p><a href="" class="menu">Professional Associations</a></p>
    <p><a href="" class="menu">Lodging</a></p>
    <p><a href="" class="menu">Rates</a></p>
    <p><a href="" class="menu">Seasons</a></p>
    <p><a href="" class="menu">Directions</a></p>
    <p><a href="" class="menu">FAQ</a></p>
    <p><a href="" target="_blank" class="menu">Contact Us</a></p>
  </div>
<!-- end nav  -->
<!-- begin footer  -->
<div class="footer">
    <div id="footermenu">
	<a href="">The Difference</a> | 
    <a href="">Room</a> | 
    <a href="">Rates</a><br />
      <a href="">References</a> |
      <a href="">Grouse</a> | <a href="">Deer &amp; Moose</a><br />
    <a href="">Acknowledgment Letters</a> | 
    <a href="">Testimonial Letters</a> | 
    <a href="">Professional Memberships</a><br />
      <a href="">Lodging</a> | <a href="">Directions</a> | 
    <a href="">Province Fishing</a> | <a href="">Caps &amp; Shirts</a><br />
      <a href="">Frequently Asked Questions</a> | 
      <a href="" target="_blank">Contact Us</a> | <a href="">Home Page</a></div>
    <div id="footeraddress">
      <strong>Business name</strong><br />
      street<br />town, State 00000-0000<br />(000) 000-0000<br />Email: <a href="mailto:">Email</a>
		<div id="footercopyright">© 2010 - All Rights Reserved<br />
		Updated February 23, 2010</div>
	</div>
</div>
<!-- end footer  -->
</div>
</body>
</html>

Print CSS Sheet:


* {
	margin: 0px; /* removes browser defaults */
	border: 0px; /* removes browser defaults */
	padding: 0px; /* removes browser defaults */
}
body {
	text-align: center; /* centers for older IE and quirks mode */
	background-color: #ffffff; /* reset for print page size */
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
}
#wrapper {
	margin-top: 0px;
	margin-right: auto; /* centers for the rest */
	margin-bottom: 0px;
	margin-left: auto; /* centers for the rest */
	width: 100%; /* set for print page size */
	text-align: left; /* reset text alignment */
	background-color: #E4E7DA;
	position: relative; /* resets all children boxes to be positioned relative to wrapper */
}
/* restore default margins */
p, ul, blockquote, fieldset, form, ol, dl, dir, menu {
	margin-top: 1.12em;
	margin-bottom: 1.12em;
}
blockquote  {
	margin-left: 40px;
	margin-right: 40px;
}
ol, ul, dir, menu, dd  {
	margin-left: 40px;
}
/* end restore default margins */
h1 {
	font-size: 2em;
	color: #990033;
	font-style: italic;
	margin: 0.6em 0;
}
h2 {
	font-size: 1.5em;
	color: #990033;
	margin: 0.8em 0;
}
p {
	font-size: small; /* will reset sixes to ems or px */
	text-align: left;
}
#content {
	background-image: url('images/tree.jpg'); /* replaces gray background */
	background-repeat: repeat-x;
	vertical-align: top;
	margin-left: 140px;
	position: relative;
}
.contentpad {
	padding-top: 2px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
}
#nav {
	width: 140px;
	padding-top: 10px;
	vertical-align: top;
	position: absolute;
	left: 0px;
	top: 0px;
}
#nav p {
	margin-top: 15px;
	margin-right: 0px;
	margin-bottom: 15px;
	margin-left: 0px;
	text-align: center;
	font-size: 11px;
	font-style: normal;
}
a:link {
	text-decoration: underline;
	color: #990033;
}
a:visited {
	text-decoration: underline;
	color: #990033;
}
a:active {
	text-decoration: underline;
	color: #990033;
}
a:hover {
	text-decoration: underline;
	color: #032FAC;
}
a.menu {
	font-size: 11px;
	font-style: normal;
}
#topleftlogo {
	width: 130px;
	height: 67px;
	margin-bottom: 50px;
}
#footer {
	position: relative;
}
#footermenu {
	border-top-width: 1px;
	border-right-width: 0px;
	border-bottom-width: 1px;
	border-left-width: 0px;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
	background-color: #FFFFFF; /* replaces gray */
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	height: 75px;
	text-align: center;
	font-size: x-small;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 140px;
}
#footeraddress {
	text-align: center;
	padding-top: 10px;
	font-size: small;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 140px;
}
#footercopyright {
	font-size: x-small;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 0px;
}
img.headline {
	vertical-align: middle;
	float: right;
}
img.intextright {
	float: right;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 5px;
}
p.subheadb {
	text-align: left;
	font-size: medium;
	font-weight: bold;
}
p.subheadr {
	text-align: left;
	font-size: medium;
	font-weight: bold;
	color: #990033;
}
#pagetoplink {
	text-align: center;
	font-size: medium;
	font-weight: bold;
	color: #990033;
	padding-top: 20px;
	padding-right: 0px;
	padding-bottom: 20px;
	padding-left: 0px;
}
.left {
	text-align: left;
}
.right {
	text-align: right;
}
.center {
	text-align: center;
}
.clearing {
	clear:both;
	height:0px; /* added px */
}

Hi jdrme, welcome to SitePoint!

I’m not hugely experienced with print styles, but the first question I’d ask is whether you really want that sidebar to print anyhow? It seems to contain only links, which are not really relevant to print.

In your print styles sheet you could set the sidebar to display:none and let the content fill the whole page. The beauty of print styles is that you can eliminate stuff that is only relevant to the web.

Anyhow, if this is not to your liking, perhaps look at the widths of the various elements. It sounds like the sidebar can’t fit next to the content on the printed page, and so is dropping to the end of the document. In that case, try reducing the widths of sidebar and content a bit.

Hope that helps. :slight_smile:

Ralph.m

Thanks for the ideas. In the final stage I will probably not print the nav column. However, this is a coversion and this block contains the business logo (to be top left, with home page link) and on some other pages will have pertinent content below the page nav links.

It also means that something is amiss, and I can’t find it – yet.

If I can’t get the block to print in the correct location, I may have to add the other content as separate blocks. Still, I would really like to know what the problem is.

Thanks,

John

I’m not sure how absolute positioning affects print layouts, but I wouldn’t use that myself. I can see that the sidebar is absolutely positioned, and I can image IE choking on that. If you are redesigning the site, I would do away with that in the end.

ralph.m

How would you do it?

When I set the sidebar as position:relative;, then the nav bar falls down to its natural position as coded (content, then navbar, then footer) – I want the content to appear first in the code for SEO purposes.

With the navbar as absolute, it appears onscreen in the correct location for IE6, IE7 and Firefox 3.5. Just goes wrong when printed from IE.

The commonest method is to float the content and nav divs. Give each a set width (be it in pixels or percentages) and float them left and right. Also remove the margin from the content div.

So something like

#content {
    width: 60%;
    float: right;
}

#nav {
    width: 30%;
    float left;
}

Those are rough calculations, but that’s the idea.

Hi,

Usually for print you would want to turn all positioning off including floats and absolute positioning because they will always cause problems on a printed page. Turn of all widths and let the content flow across whatever space is available on the printed page.

Also turn off background colours so that you don’t waste the visitors ink.

For example if you wanted your logo at the top of the printed page you could add a div at the top of the page holding the logo and just have it turned on for print only (display:block for print and display:none for screen) and that means the whol left nav could be omitted when printed.

At present to get IE to recognise your left nav in print would mean that the content would have to be absolutely positioned something like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Black Bear Tours</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="notables-022510.css" type="text/css" media="screen" />
<link rel="stylesheet" href="notables-print-022510.css" type="text/css" media="print" />
<style typr="text/css">
* {
    margin: 0px; /* removes browser defaults */
    border: 0px; /* removes browser defaults */
    padding: 0px; /* removes browser defaults */
}
body {
    text-align: center; /* centers for older IE and quirks mode */
    background-color: #ffffff; /* reset for print page size */
    font-family: Arial, Helvetica, sans-serif;
}
#wrapper {
    width: auto; /* set for print page size */
    text-align: left; /* reset text alignment */
    background-color: #fff;
    position:absolute; /* resets all children boxes to be positioned relative to wrapper */
    left:140px;
    right:0;
}
/* restore default margins */
p, ul, blockquote, fieldset, form, ol, dl, dir, menu {
    margin-top: 1.12em;
    margin-bottom: 1.12em;
}
blockquote {
    margin-left: 40px;
    margin-right: 40px;
}
ol, ul, dir, menu, dd {
    margin-left: 40px;
}
/* end restore default margins */
h1 {
    font-size: 2em;
    color: #990033;
    font-style: italic;
    margin: 0.6em 0;
}
h2 {
    font-size: 1.5em;
    color: #990033;
    margin: 0.8em 0;
}
p {
    font-size: small; /* will reset sixes to ems or px */
    text-align: left;
}
#content {
    background-image: url('images/tree.jpg'); /* replaces gray background */
    background-repeat: repeat-x;
    vertical-align: top;
    margin-left: 0;
    position: relative;
    width:100&#37;;
}
.contentpad {
    padding-top: 2px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
}
#nav {
    width: 140px;
    padding-top: 10px;
    position: absolute;
    left:-140px;
    top: 0px;
}
#nav p {
    margin-top: 15px;
    margin-right: 0px;
    margin-bottom: 15px;
    margin-left: 0px;
    text-align: center;
    font-size: 11px;
    font-style: normal;
}
a:link {
    text-decoration: underline;
    color: #990033;
}
a:visited {
    text-decoration: underline;
    color: #990033;
}
a:active {
    text-decoration: underline;
    color: #990033;
}
a:hover {
    text-decoration: underline;
    color: #032FAC;
}
a.menu {
    font-size: 11px;
    font-style: normal;
}
#topleftlogo {
    width: 130px;
    height: 67px;
    margin-bottom: 50px;
}
#footer {
    position: relative;
    width:100%;
}
#footermenu {
    border-width: 1px 0;
    border-color: #000;
    background-color: #FFFFFF; /* replaces gray */
    padding:10px 0;
    border-style: solid;
    height: 75px;
    text-align: center;
    font-size: x-small;
    margin: 0px;
}
#footeraddress {
    text-align: center;
    padding-top: 10px;
    font-size: small;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 140px;
}
#footercopyright {
    font-size: x-small;
    padding-top: 10px;
    padding-right: 0px;
    padding-bottom: 5px;
    padding-left: 0px;
}
img.headline {
    vertical-align: middle;
    float: right;
}
img.intextright {
    float: right;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 5px;
}
p.subheadb {
    text-align: left;
    font-size: medium;
    font-weight: bold;
}
p.subheadr {
    text-align: left;
    font-size: medium;
    font-weight: bold;
    color: #990033;
}
#pagetoplink {
    text-align: center;
    font-size: medium;
    font-weight: bold;
    color: #990033;
    padding-top: 20px;
    padding-right: 0px;
    padding-bottom: 20px;
    padding-left: 0px;
}
.left {
    text-align: left;
}
.right {
    text-align: right;
}
.center {
    text-align: center;
}
.clearing {
    clear:both;
    height:0px; /* added px */
}
</style>
</head>
<body>
<div id="wrapper">
    <!-- begin main content-->
    <div id="content">
        <div class="contentpad">
            <h1><img src="" class="headline" style="width:28px; height:30px;" alt="Black Bear Track" />&quot;Black Bear Watching . . .</h1>
            <h2 class="right">. . . our Specialty&quot;</h2>
            <p><img src="" class="intextright" alt="Black bear" style="width:200px; height:248px;" /> Black Bear watching is our life at Business Name. It is not a seasonal sideline 
                for us. It has been our livelihood for over thirty years. And that 
                shapes our attitude toward both our visitors and the game we see.</p>
            <p class="subheadb">Prime Black Bear Habitat with Controlled Access</p>
            <p>You will be deep in the most productive habitat in North America.</p>
            <p>Our territories in State and Province cover over one million acres of private 
                and government leased land. All this land has controlled access -  
                which is an unparalleled benefit for Business Name's guests.</p>
            <p>We have seeed these lands since 1964. We
                know the habitat, and we know the black bears' habits and patterns within it.</p>
            <p>The black bear in your territory are
                under-seeed, resulting in a growing bear population, with many 
                stands having multiple bears visiting them.</p>
            <p class="subheadb">Unsurpassed opportunity to see a Trophy Bear.</p>
            <p>We strive to consistently give our visitors the clicking opportunities
                expected of a truly world-class  tour guide. This requires knowledge, simage, effort, advance
                preparation, and experience.</p>
            <p>Bear  is our life, so no matter how you cut it, a part time guide can not give a full time commitment.</p>
            <p>Our highly processed scents have incredible drawing
                power. They are continually adjusted as bear feeding preferences change. Your , stand and blind are precisely
                positioned and meticulously maintained only after our careful study of prevailing
                winds, terrain, and game patterns.</p>
            <p class="subheadb">A sure shot and a quick, clean image.</p>
            <p>The black bear is a game animal we know and
                respect. Powerful and crafty, the bear's trademarks are strength and endurance.
                His nose is as sensitive as the most sophisticated
                radar system. The bear's feed and travel patterns through our thick fir and dense
                bogs make him a challenging animal to see.</p>
            <p>This black ghost can appear at your stand and then
                disappear in a blink. Scent and noise control are critical to your success. You are provided pre-built, permanent
                stands, portables and ground blinds with all obstructing branches and brush
                cleared from your line of fire.</p>
            <p><img src="" class="intextright" alt="Black bear" style="width:279px; height:199px;" /> Our stands offer visitors an average shot
                of 18 yards. Most visitors will click at distances of 75 yards or less, and typically will be clicking 20-30 yards.</p>
            <p>The black bear demands clicking excellence before
                he will pose for you. Even at these close ranges, a precision lense is essential. Your focal point is a 
                4 to 5 inch square area just behind the front shoulder.</p>
            <p>Visitors, it makes no difference how good you are - unless you focus exactly 
                in the boiler room you will get nothing but a blur.</p>
            <p>The black bear is unlike any other game animal you have ever seen. When 
                spooked, he will not lie down or freeze like a deer. But rather, 
                will run up to 20 miles. Therefore, precision is essential.</p>
            <p>Those of you using a telephoto have many 
                options. You do not have to even wait until the bear is close for 
                a good shot. Also, a head and chest closeup shot can produce when combined 
                with accurate clicking.</p>
            <p>And never rush a shot. But when you do 
                have a good shot - take it. Do not assume the bear may go left 
                or right, or even to the actual bait. Be positive of what and where 
                you are clicking.</p>
            <p class="subheadr">State Bear </p>
            <p>State has one of the heaviest black 
                bear concentrations per acre of habitat in North America. Success 
                from our blinds and tree stands has been outstanding with 
                prize winning images year in and year out.</p>
            <p>Perhaps the most 
                beautiful country in the world, you will be surrounded by an explosion of 
                fall foliage color and you will never be too far from a delicious State lobster dinner. 
                There is nothing quite like our fall in State.</p>
            <p><a href="">Night scopes</a> are legal in State.</p>
            <p>Click Here for <a href="">State Black Bear</a> details.</p>
            <p class="subheadr">Province Bear </p>
            <p>Province visitors are in our boiling bear habitat of northwest Province. 
                Visitors are extremely productive using our proven scent methods and our carefully 
                positioned stands and blinds. The long sub-arctic days afford ample opportunity to both see and experience 
                the most awesome pike, walleye and trout fishing imaginable.</p>
            <p>Click Here for <a href="">Province Black Bear</a> details.</p>
            <p class="subheadb">Private &amp; Flexible Accommodations</p>
            <p>Unlike visitors with most tour guides, lodges and 
                sporting camps, Business Name's guests are not doubled up in a bunk 
                house or room with other guests. Your party will enjoy the privacy of your 
                own sleeping room, and the good night's sleep that is important for 
                a good trip - whether you come alone, with a large group, with your 
                spouse or whole family.</p>
            <p class="subheadb">Questions?</p>
            <p>When you book a trip with us, you will receive a complete confirmation 
                kit including detailed information on equipment and clothing, plus plus graphic illustrations of optimum angles.</p>
            <p>Please feel free to call us at any time.</p>
            <p>Click here for answers to some of your <a href="">Questions</a>.</p>
            <div id="pagetoplink"><a href="#">^ TOP</a></div>
        </div>
    </div>
    <!-- end main -->
    <!-- begin nav  -->
    <div id="nav">
        <div class="center"> <a href="" id="homelink" title="Return to Home Page"> <img src="images/logo.gif" alt="Return to Home Page" id="topleftlogo" /></a></div>
        <p><a href="" class="menu">Home</a></p>
        <p><a href="" class="menu">Black Bear</a></p>
        <p><a href="" class="menu">State Bear</a></p>
        <p><a href="" class="menu">Province Bear</a></p>
        <p><a href="" class="menu">Bear</a></p>
        <p><a href="" class="menu">About</a></p>
        <p><a href="" class="menu">Ursus Americanus</a></p>
        <p><a href="" class="menu">Bear</a></p>
        <p><a href="" class="menu">Testimonial Letters</a></p>
        <p><a href="" class="menu">Acknowledgment Letters</a></p>
        <p><a href="" class="menu">References</a></p>
        <p><a href="" class="menu">Professional Associations</a></p>
        <p><a href="" class="menu">Lodging</a></p>
        <p><a href="" class="menu">Rates</a></p>
        <p><a href="" class="menu">Seasons</a></p>
        <p><a href="" class="menu">Directions</a></p>
        <p><a href="" class="menu">FAQ</a></p>
        <p><a href="" target="_blank" class="menu">Contact Us</a></p>
    </div>
    <!-- end nav  -->
    <!-- begin footer  -->
    <div class="footer">
        <div id="footermenu"> <a href="">The Difference</a> | <a href="">Room</a> | <a href="">Rates</a><br />
            <a href="">References</a> | <a href="">Grouse</a> | <a href="">Deer &amp; Moose</a><br />
            <a href="">Acknowledgment Letters</a> | <a href="">Testimonial Letters</a> | <a href="">Professional Memberships</a><br />
            <a href="">Lodging</a> | <a href="">Directions</a> | <a href="">Province Fishing</a> | <a href="">Caps &amp; Shirts</a><br />
            <a href="">Frequently Asked Questions</a> | <a href="" target="_blank">Contact Us</a> | <a href="">Home Page</a></div>
        <div id="footeraddress"> <strong>Business name</strong><br />
            street<br />
            town, State 00000-0000<br />
            (000) 000-0000<br />
            Email: <a href="mailto:">Email</a>
            <div id="footercopyright">&#169; 2010 - All Rights Reserved<br />
                Updated February 23, 2010</div>
        </div>
    </div>
    <!-- end footer  -->
</div>
</body>
</html>


However if you really want a decent printed version then I would re-arrange it as mentioned above and not print the whole left nav.

Although background colours and images aren’t printed by default in most browsers; you’d have to manually select that option.

Hi John, Nice to see you around :slight_smile:

Yes, I don’t know why I mentioned it really as in most cases they are off by default anyway as you say (apart from old versions of opera which will print background images by default).

Paul:

Thanks for the ideas. Your layout prints frine from IE7 and FFox.

I waited a bit for my reply so I could try the layout and several other ideas (plus sleep and a snowstorm).

I had originally tried the negative margin idea (inspired by your extensive writeups on your pmob co uk site), but ended up with my layout in order to make the backgrounds work out.

I would love to use your layout onscreen, but our onscreen design goals call for a gray background for the left nav column (top to bottom), and centering the entire page in the window with another color for its background. I tried a div around it all, but then it broke again when printing from IE7 (FFox was ok).

I think your site offers several ideas for me to try, and I will continue testing on Monday (it is now 5 pm on Sunday local time on US east coast).

Just joined this forum so can’t add the url, but your website is really loaded with CSS layout ideas. Thanks for putting it out there.

Thanks again, I’ll be in touch.

John (in Maine, USA)

ps: I’ve noticed that the UK (England, Australia, and even Canada) seems very active in the CSS design area. What drives this?

Tysson:

I manually turn off background printing to save toner and ink. But turn it back on for testing layouts where I use backgrounds to record where all the boxes are. Also, I have several sites that use a background image rather than a lower z-index behind text, and these need to print.

Thanks,
John

Ralph:

Thanks for idea. Am working some more with layouts involving floats tomorrow.

Hows that Tsunami?

John

I’ve noticed that the UK (England, Australia, and even Canada) seems very active in the CSS design area. What drives this?

There’s plenty of life outside the US :wink: SitePoint is actually based in Australia anyway, so there should be people from here. The fact that so many people visit this site from all around the world is testament to how useful it is.

Yes, floats are very useful; though, as Paul said, not so ideal for printing.

Hows that Tsunami?

It didn’t bother Australia, but I hear Japan felt a bit. Been some pretty nasty earthquakes this year. No doubt all the fault of global warming. :wink:

Ralph:

Good morning. We watched as the tsunami hit Hawaii at 4 pm US eastern time. All of 1 foot sea rise. I guessed that New Zealand might shelter Australia a bit, but fortunately in the end it wasn’t that big a surge.

Global warming is why I am sitting in my house and not sitting beneath the 5,000 feet of ice that occupied my land 15,000 years ago. That did give the area many lakes and rivers for great fishing and boating, and why the vikings were able to sail here centuries before Columbus. The poor Pilgrims came from England in the early 1600’s when the “little ice age” had returned (my forefather in the 1620’s as a bankrupt and therefore indentured fisherman).

Anyway…it would be ideal if one could use the same stylesheet for print (other than small adjustments for page width and the areas not worth printing). Same goes for browser wars. Tables and small screens gave us a good short run, but wide screens and browser versions that last one year have ruined that. However, I am striving to convert all sites to CSS so they are more prepared to cope with the mobile market that will soon represent a much more significant visitor segment.

I’ll report again after more testing with some of these suggestions.

Apprecieate the help, Thanks.

John

You can, actually. Just organize your stylesheets like this:

<link type="text/css" [COLOR="Red"]media="all"[/COLOR] rel="stylesheet" href="/css/main.css">
<link type="text/css" [COLOR="Red"]media="print"[/COLOR] rel="stylesheet" href="/css/print.css">

If the main style sheet is for all, then the following sheets (which override the first) can just specify the points of difference, rather than having to start from scratch.