css - print and screen? - CSS forum at WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

css - print and screen?

cyberpac9

2:33 pm on Jan 5, 2006 (gmt 0)

ok...i have two css files that are linked within the webpage like so:


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

and then here are the codes for each of the files:


print.css:
@media print{
body{font-family: arial; font-size: 6pt; width: 30%; border-width: 1px; border-style: dashed;}
.trans{visibility: hidden; position: absolute; bottom: 0; right: 0;}
}
screen.css:
@media screen{
body{font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;}
h1{color:#FF0000; font-size: 14px;}
}

for some reason in IE the print comes out full page instead of 30%...why is that? it works perfectly in Firefox and passes validation...any thoughts?

cuce

11:58 pm on Jan 5, 2006 (gmt 0)

maybe try using an actual measure rather than a percentage? Just a guess.

cyberpac9

1:43 pm on Jan 6, 2006 (gmt 0)

tried changing the print.css from a % to fixed px...same result using IE...it prints full page...

now i'm not even sure if i've created the print.css and screen.css files correctly (i'm just assuming i have and made the suggested change)...if there is anything wrong with the way i have my css files written, please let me know...

this is driving me crazy... ;)

HelenDev

2:52 pm on Jan 6, 2006 (gmt 0)

I don't think you can put a width on the <body> for IE. Try wrapping your content in a container div and putting a width on that instead.

cyberpac9

3:03 pm on Jan 6, 2006 (gmt 0)

ding ding ding! you got it...i changed my css from body to div#main and wrapped the body in <div id="main"></div> and that solved it...whew! that was frustrating..

thanks for the help...

cyberpac9

3:36 pm on Jan 6, 2006 (gmt 0)

@HelenDev
see if you can tell me why this is: i've made the change you mentioned above....now, for some reason i cannot change the font size for the print version....i'd like the info that is printed to be pretty small...i obviously only want the printed material to fill ~30% of the width (which i've figured out) but i'd like the text to be smaller as well...

any thoughts?

HelenDev

10:14 am on Jan 9, 2006 (gmt 0)

Can you post your code as it is now?

SilverLining

12:20 pm on Jan 9, 2006 (gmt 0)

Hi cyberpac9

Did you remember to change your css in print.css to something like

body, #main{}

Else you might have an ID within and ID

Just guessing here anyway.
Cheers

cyberpac9

2:25 pm on Jan 9, 2006 (gmt 0)

here is my code as it stands right now (note: the font sizes are not set in stone, so to speak....i'm just trying to figure out how to make it readable on the screen but print pretty small):

screen.css:
div#main{font-family: Arial, Helvetica, sans-serif; font-size: 12px;}
h1{color:#FF0000; font-size: 14px;}

print.css:
div#main{font-family: Arial; font-size: 4pt; width: 15em; border-width: 1px; border-style: dashed;}
.trans{visibility: hidden; position: absolute; bottom: 0; right: 0;}

the div#main controls the body:
<body><div id="main"></div></body>

cyberpac9

7:27 pm on Jan 10, 2006 (gmt 0)

...bump...anyone have any idea what might be going on?

HelenDev

10:56 am on Jan 11, 2006 (gmt 0)

Your code looks fine to me. I tested it and it appears to work as it should.

What's the problem exactly?

cyberpac9

6:08 pm on Jan 12, 2006 (gmt 0)

@HelenDev:
i can send you a link to try it out...(i'd rather not post the link publicly)...but the problem is that no matter what setting i try to use for my font size in print.css, it still comes out large (something like 12px or so)...i can make it 1px in the print.css file and it will have no impact on the size at all...