SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Printing Preview Problem in Firefox

    I am new to all of this so please be gentle.

    I am working on a new website. I used a template from Dreamweaver 8. Here is a link.

    http://www.tripledisc.com/preview/website/index.html

    The site will not print preview beyond the first half of the page in Firefox. Works in IE and Opera.

    As I said I am new to this so any and all help would be appricated.

    Thanks in advance


    Here is the CSS I am using

  2. #2
    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)
    It's all the position: absolute that's causing the problem. You should really link a print stylesheet to your page as well that removes all the unnecessary stuff like navigation etc and only prints the important content on each page.
    (PS: next time, post your code using the [ code ] [/ code ] tags. )

  3. #3
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the quick reply.

    Sorry I as I said I am new at this.

    So replace absolute with???

  4. #4
    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)
    Most of the time you can just use elements' margins to position them. In some cases you'll need to use floats as well. Sometimes you'll need to use position: absolute as well but not in the way that you have for most of your elements.
    But assuming you don't want to start your layout from scratch, the simplest solution to your problem would be to create a print stylesheet and give it a completely new set of rules. Print stylesheets don't need to be complicated. The last one I did looked like this:

    Code:
     body {
     	font-family: Verdana, sans-serif;
     	font-size: 10pt;
     	color: black;
     	width: 600px;
     }
     #skiplinks, #topnav, form, noscript, ul#footer-links { display: none; }
     h1, h2, h3 { font-family: "Trebuchet MS", Verdana, sans-serif; }
     a:link, a:visited {	color: #999; text-decoration: none; }
     a img { border: 0; }
     #content { margin-top: 20px; }
     #footer { clear: both; font-size: 80%; }
    and that was it. Set a width and font-size for the page and turn off with display: none all the elements that don't need to be there like navigation etc.


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
  •