SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:

    HTML Code:
    <!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:

    Code:
    * {
    	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 */
    }

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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

    Code:
    #content {
        width: 60%;
        float: right;
    }
    
    #nav {
        width: 30%;
        float left;
    }
    Those are rough calculations, but that's the idea.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,299
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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:

    Code:
    <!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.

  8. #8
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Also turn off background colours so that you don't waste the visitors ink.
    Although background colours and images aren't printed by default in most browsers; you'd have to manually select that option.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,299
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Tyssen View Post
    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

    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).
    Last edited by Paul O'B; Feb 28, 2010 at 05:50.

  10. #10
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  11. #11
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  12. #12
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ralph:

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

    Hows that Tsunami?

    John

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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 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.

    Quote Originally Posted by jdrme View Post
    Thanks for idea. Am working some more with layouts involving floats tomorrow.
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  14. #14
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jdrme View Post
    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).
    You can, actually. Just organize your stylesheets like this:

    Code:
    <link type="text/css" media="all" rel="stylesheet" href="/css/main.css">
    <link type="text/css" media="print" 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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •