print css problem

Discussion in 'HTML & Website Design' started by gogulvkn, Jun 19, 2013.

  1. #1
    hai i have doing a billing project, in thi project somdetail print in a 4inch X 2.5inch size paper, how to write the print css please guide me,
     
    gogulvkn, Jun 19, 2013 IP
  2. ActiveFrost

    ActiveFrost Notable Member

    Messages:
    2,072
    Likes Received:
    63
    Best Answers:
    3
    Trophy Points:
    245
    #2
    What is the problem?
     
    ActiveFrost, Jun 19, 2013 IP
  3. Igozorus

    Igozorus Greenhorn

    Messages:
    39
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    6
    #3
    You mean how to do the page better for printing?
    Just when you're linking your css style to html page write <link media="print">
     
    Igozorus, Jun 19, 2013 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #4
    Beware that both IE and FF by default will try to apply your screen layouts and their own garbage styling to anything you print by default. This can annoy the ever living **** out of you when trying to actually use CSS to control print. You have to go into the browser preferences and turn that **** off, or test, test, and test some more to code around it.

    Just another reason I prefer using Opera, which actually obeys what you tell it to do for print... Here's hoping they don't screw that up with the change-over to Google Blink.
     
    deathshadow, Jun 19, 2013 IP
  5. creativewebmaster

    creativewebmaster Active Member

    Messages:
    654
    Likes Received:
    7
    Best Answers:
    4
    Trophy Points:
    78
    #5
    Add below line on above head section.

    <link rel="stylesheet" type="text/css" href="print.css" media="print">

    The print.css style sheet looks like this:
    body {
    color : #000000;
    background : #ffffff;
    font-family : "Times New Roman", Times, serif;
    font-size : 12pt;
    }
    a {
    text-decoration : underline;
    color : #0000ff;
    }
    #navigation, #advertising, #other {
    display : none;
    }
     
    creativewebmaster, Jun 19, 2013 IP