Print CSS

Discussion in 'HTML' started by Barry Morris, Oct 25, 2007.

  1. Barry Morris

    Barry Morris Guest

    Hello

    I am having trouble with print CSS and would like some advice please.

    The web-site is in IE quirks mode but I guess this should only affect IE and
    in view mode only?

    The print CSS works fine in IE 6 and IE 7 with page breaks been put in where
    they are required. In Opera the print preview (and print) page is truncated
    on the right and the home page repeats page 1 twice, the print 'center'
    seems to be based on the view window and not the printed page - IE correctly
    shows the two pages.

    Basically everything prints okay in IE 6 and 7 but not in Netscape 8.1.3,
    Firefox 2.0.0.6 or Opera 9.22.

    Firefox or Netscape does not put in a page break at all.

    I have uploaded the test site to:

    http://test.aquarius-is.co.uk

    T.I.A.

    Barry

    Here is the print CSS (followed by the main CSS):

    p {font-size:10pt; color:#000000}

    body {
    margin: 0;
    background-image:none;
    background-color:#FFFFFF;
    }

    #menu {
    display:none;
    }

    #menubar {
    display:none;
    }

    ..footer {
    display:none;
    }

    ..content {
    padding: 0px;
    overflow:visible;
    }

    #container {
    top:0px;
    background:#FFFFFF;
    padding-top: 0 0 0 0;
    margin-top:0px;
    width:100%;
    overflow:visible;
    }

    #textarea {
    padding: 0px;
    width:100%;
    overflow:visible;
    }

    Main CSS =====================================================

    body {
    margin:0;
    border:0;
    padding:0;
    height:100%;
    max-height:100%;
    background:#000000;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:10pt;
    overflow: hidden;
    }

    h1 {font-size:16pt; color:#AAAAFF}
    h2 {font-size:14pt; color:#AAAAFF}
    h3 {font-size:12pt; color:#AAAAFF}
    h4 {font-size:10pt; color:#AAAAFF}
    p {font-size:10pt; color:#FFFFFF}

    img {
    border:0;
    }

    /* for internet explorer */
    * html body {
    padding:84px 0 0 0;
    }

    ..highlight1 {
    color:#AAAAFF;
    }

    ..highlight2 {
    color:#EEEEEE;
    font-size:8pt;
    }

    #container {
    font-size: 1.2em;
    position:fixed;
    top:84px;
    left:0;
    bottom:0;
    right:0;
    overflow:auto;
    background:#000000;
    }

    #textarea {
    padding: 20px;
    }

    * html #container {
    height:100%;
    width:100%;
    }

    ..header {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:80px;
    overflow:auto;
    background:#000000;
    border-bottom:4px solid #666666;
    font-family:"Times New Roman", Times, serif;
    }
    * html .header {height:84px;}

    ..header h1 {
    margin:10px 10px 0 10px;
    color:#AAAAFF;
    }

    * html #footer {height:50px;}

    ..piccontainer {
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    }

    a, a:visited {
    font-size:10pt;
    font-weight:bold;
    text-decoration:none;
    color:#AAAAFF;
    }

    a:hover {
    color:#fff;
    text-decoration:none;
    }


    #menu {
    position: relative;
    height: 30px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    }

    #menu ul {
    clear:both;
    text-align:center;
    }

    #menu ul {
    margin:0;
    margin-top:8px;
    padding:0;
    list-style-type:none;
    background:transparent;
    }

    #menu ul li {
    display:inline;
    color:#73a2bd;
    }

    #menu li a.home {
    color:#CCFFFF;
    }

    #menu #form1 {
    display:inline;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    }

    ..menu1 {
    border: 0;
    padding: 0;
    font-size:10pt;
    font-weight:bold;
    background: #000000;
    color: #AAAAFF;
    }

    ..footer {
    margin:0px;
    border-top:5px solid #666666;
    font-size:10pt;
    text-align:center;
    color: #AAAAFF;
    }

    ..formerrors h2 {color: #FF0000;}
    ..formerrors {font-size: 1.1em; color: #FF0000; font-weight:
    bold;position:relative;}
    ..formerrors2 {padding-left:20px;}
    ..tableline {
    clear:both;
    font-size:2px;
    line-height:2px;
    }

    ..tablinebig {
    clear:both;
    font-size:10px;
    line-height:10px;
    }

    ..itemname {
    float:left;
    width:150px;
    padding-top:6px;
    font-size:10pt;
    font-weight:bold;
    color:#AAAAFF;
    }

    ..iteminput {
    float:left;
    width:auto;
    height:auto;
    }

    #menuesub {position: absolute;
    visibility:hidden;
    z-index: 3;
    }
     
    Barry Morris, Oct 25, 2007
    #1
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Bad_Kid
    Replies:
    3
    Views:
    3,976
    Shawn H. Mesiatowsky
    Apr 7, 2005
  2. tom watson

    print.css and screen.css

    tom watson, Sep 9, 2003, in forum: HTML
    Replies:
    1
    Views:
    496
    Jukka K. Korpela
    Sep 9, 2003
  3. keto
    Replies:
    0
    Views:
    1,043
  4. David Cournapeau

    print a vs print '%s' % a vs print '%f' a

    David Cournapeau, Dec 30, 2008, in forum: Python
    Replies:
    0
    Views:
    399
    David Cournapeau
    Dec 30, 2008
  5. Julie Siebel
    Replies:
    4
    Views:
    150
    Dr John Stockton
    Feb 25, 2004
Loading...

Share This Page