Another CSS Print Question

[budha1]

I'm having problems formatting my content so that it will fit on a page when it is printed (it runs off the edge right edge). I have two style sheets, one that defines style for the web page, and another that defines style when the page is printed. Both style sheets are linked to the web page as follows:

<link rel=&quot;stylesheet&quot; href=&quot;content.css&quot; type=&quot;text/css&quot;>
<link rel=&quot;stylesheet&quot; href=&quot;print_content.css&quot; type=&quot;text/css&quot; media=&quot;print&quot;>

In the first style sheet I define two divs, one for navigation and one for content:

#Content {
height: 639px;
left: 150px;
position: absolute;
top: 0px;
width: 550px;
z-index: 1
; font-family: Arial, Helvetica, sans-serif; font-size: 80%
}

#Navigation {
height: 550px;
left: 0px;
position: absolute;
top: 0px;
width: 150px;
z-index: 2
}

When I print the page, I want the #Navigation div to disappear and the content included in the #Content div to move to the left.

In my style sheet for printing I define the divs as follows:
#Content {
height: 639px;
left: 1px;
top: 0px;
float: none;
z-index: 1
; font-family: Arial, Helvetica, sans-serif; font-size: 80%
}

#Navigation {
display: none;
}

However, when I print, the content still appears on the page as if it were positioned 150 pixels from the left, as is defined in the first style sheet.

Does anyone have any suggestions as to what I might be doing wrong?

Thanks!!

 

[4x4uk]

have you tried adding media=&quot;screen&quot; to your first stylesheet link It's not a lie if you believe it!

http://www.ne4x4.org.uk/

http://www.ne4x4.org.uk/Ian/

http://www.ne4x4.fsnet.co.uk/beck/

 

[budha1]

Thank you!! That made the difference.

 

[4x4uk]

You're welcome It's not a lie if you believe it!

http://www.ne4x4.org.uk/

http://www.ne4x4.org.uk/Ian/

http://www.ne4x4.fsnet.co.uk/beck/

 

[budha1]

I have another quick question -- Shouldn't my media=&quot;screen&quot; style sheet override my media=&quot;print&quot; style sheet when I veiw my page through a browser?

Right now when I preview my page thorugh a browser, the Content div appears at the left of the screen (0 px)as is defined in my print style sheet, instead of 150 px from the left as is defined in my other style sheet.

Any thoughts?

Thanks again!

 

[4x4uk]

Try altering the format slightly as follows
position:absolute;left: 150px;top: 0px;width: 550px;height: 639px;

instead of

height: 639px;left: 150px;position: absolute;top: 0px;width: 550px;

I think it may make a difference
Regards
Ian It's not a lie if you believe it!

http://www.ne4x4.org.uk/

http://www.ne4x4.org.uk/Ian/

http://www.ne4x4.fsnet.co.uk/beck/

 

[budha1]

I seem to be running into the same problem. Here is my code in my style sheets:

Screen Style Sheet:
#Content {
font-family: Arial, Helvetica, sans-serif;
font-size: 80%;
position: absolute;left: 152px;top: 12px;width: 550px;height: 639px;
z-index: 1;
clip: rect( )
}

#Navigation {
position: absolute;left: 0px;top: 0px;width: 150px;height: 550px;
z-index: 2
}



Print Style Sheet:
#Content {
clip: rect( );
float: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 80%;
position: absolute;left: 1px;top: 0px;width: 600px;height: 639px;
z-index: 1
}

#Navigation {
display: none
}

.image {
display: none
}

 

[4x4uk]

If you change your stylesheet references to class rather than id type

ie
.Content {position: absolute;left: 152px;top: 12px;width: 550px;height: 639px;
z-index: 1;
font-family: Arial, Helvetica, sans-serif;
font-size: 80%;

clip: rect( )
}
and your div tags to <div class=&quot;Content&quot;> instead of id=&quot;Content

it should give you what you expect
Regards
Ian It's not a lie if you believe it!

http://www.ne4x4.org.uk/

http://www.ne4x4.org.uk/Ian/

http://www.ne4x4.fsnet.co.uk/beck/