Why is it printing black instead of white?

Discussion in 'CSS' started by simnorwebdesign, Apr 20, 2008.

0
  1. #1
    Hi, I have the following:

    HTML PAGE
    <html>
<head>
<link rel="stylesheet" href="test.css" type="text/css" media="print" />
<link rel="stylesheet" href="test.css" type="text/css" media="screen" />
</head>

<body>
<div id="cardpreview">
<img src="/home/simon/public_html/simnorbusinesscard/images/backs/030.png" width="355" height="210" />
<div id="textbox1"><font color="#FFFFFF">COMPANY NAME</font></div>

<div id="textbox2">Your Name</div>
<div id="textbox3">Your Position</div>
<div id="textbox4">Address Line 1</div>
<div id="textbox5">Address Line 2</div>
<div id="textbox6">Address Line 3</div>
<div id="textbox7">Address Line 4</div>
<div id="textbox8">Phone Number</div>
<div id="textbox9">Email Address</div>
</div>

</body>
</html>
    Code (markup):
    and stylesheet
    body {
margin:0;
padding:0;
background-color:#FFFFFF;
}

#cardpreview {
width:355;
height:210;
background-color:#FFFFFF;
background-image:url(./images/backs/030.png);
position:absolute;
}

img {
z-index:2;
}

#textbox1 {
z-index:10;
left:0;
top:0;
width:90%;
font-family:Arial;
font-size:21;
color:#FFFFFF;
text-align:Left;
padding-left:12;
padding-top:7;
position:absolute;
font-weight:bold;}

#textbox2 {
z-index:10;
left:0;
top:0;
width:90%;
font-family:Arial;
font-size:14;
color:#FFFFFF;
text-align:Left;
padding-left:12;
padding-top:32;
position:absolute;
font-weight:bold;}

#textbox3 {
z-index:10;
left:0;
top:0;
width:90%;
font-family:Arial;
font-size:14;
color:#FFFFFF;
text-align:Left;
padding-left:12;
padding-top:48;
position:absolute;
font-style:italic;}

#textbox4 {
z-index:10;
left:0;
top:0;
width:90%;
font-family:Arial;
font-size:14;
color:#FFFFFF;
text-align:Left;
padding-left:12;
padding-top:76;
position:absolute;
}

#textbox5 {
z-index:10;
left:0;
top:0;
width:90%;
font-family:Arial;
font-size:14;
color:#FFFFFF;
text-align:Left;
padding-left:12;
padding-top:93;
position:absolute;
}

#textbox6 {
z-index:10;
left:0;
top:0;
width:90%;
font-family:Arial;
font-size:14;
color:#FFFFFF;
text-align:Left;
padding-left:12;
padding-top:110;
position:absolute;
}

#textbox7 {
z-index:10;
left:0;
top:0;
width:90%;
font-family:Arial;
font-size:14;
color:#FFFFFF;
text-align:Left;
padding-left:12;
padding-top:127;
position:absolute;
}

#textbox8 {
z-index:10;
left:0;
top:0;
width:90%;
font-family:Arial;
font-size:14;
color:#FFFFFF;
text-align:Left;$bc1Text
padding-left:12;
padding-top:160;
position:absolute;
}

#textbox9 {
z-index:10;
left:0;
top:0;
width:90%;
font-family:Arial;
font-size:14;
color:#FFFFFF;
text-align:Left;
padding-left:12;
padding-top:179;
position:absolute;
}
    Code (markup):
    The textboxes font are white when viewed on screen but when printed it puts them as black. Does anybody know why it does this or how it can be solved.

    Thanks

    Simon North
     
    simnorwebdesign, Apr 20, 2008 IP
  2. itcn

    itcn Well-Known Member

    Messages:
    795
    Likes Received:
    31
    Best Answers:
    0
    Trophy Points:
    118
    #2
    You can define a seperate style sheet for print:

    alistapart.com/stories/goingtoprint/
     
    itcn, Apr 21, 2008 IP
  3. jperezmt

    jperezmt Peon

    Messages:
    59
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    White is not a color. White is just considered negative space. If you print something in white, your printer is just going to assume it is empty space and corrects it <-- I may be a little off in that statement but the gist is there.

    You don't print white. Why would you want to anyway? You can't assume everyone printing has different colored paper. And if it printed white with a black background, the printer would print all of the black and that is a waste of ink. Don't print white.
     
    jperezmt, Apr 21, 2008 IP
  4. simnorwebdesign

    simnorwebdesign Peon

    Messages:
    595
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Its for a business card design so there is an image in the background and the text is white on top. So I take it that if I say an offset of white for example fdfdfd should print, if not I think I may have to create an image for each line and then add them to the overall image with php and gd.
     
    simnorwebdesign, Apr 21, 2008 IP
  5. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Hmmm, one problem here is, does a printer know what an RGB colour is? Don't they have to convert them to CYMK anyway?

    If you want normal people to be able to print this off at home, no. Background colours and images are usually ignored (depends on the user's settings).

    One option would be if that COMPANY NAME was under you're control, you'd merge it with the background image to make one single HTML image (since you can't count on background images printing... most printers ignore it). Setting it in the HTML fully is the only way you can guarentee anything prints at all on most printers.
     
    Stomme poes, Apr 22, 2008 IP
  6. simnorwebdesign

    simnorwebdesign Peon

    Messages:
    595
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I think the best idea is for me to generate an image with PHP and GD, this obviously doesn't work very well. I tried printing it in IE 6 and it just put it off the right edge of the page, I think there is just too many problems so i will go with PHP, thanks to everyone who helped.
     
    simnorwebdesign, Apr 22, 2008 IP