PDA

View Full Version : CSS @media print


davidj
04-28-2008, 12:29 PM
I am switching stuff on and off using CSS for printing purposes


@media print{

}


i have a scrolling DIV which displays nice on the screen but when i print the scroll bars and the size of the div is still set. I cant seem to turn off the scroll bars using the @media print function


@media print{

#ContactDetails, #CustomerDetails, #menuBar {

display : none;

}

#CampaignScript{

position:absolute;
left:10px;
top:0px;
overflow:visible; /* << this is the bit that switches off the scrolling but is not working */
float:left;
background-color:#ffffff;
padding:4px;

}


}


the bit that sets the scrolling in the first place is as follows...

#CampaignScript{

position:relative;
width:350px;
height:400px;
overflow:scroll;
background-color:#ffffff;
padding:0px;
overflow-x:hidden;

}

any ideas???

I need the print version to print the entire contents of the div

domedia
04-28-2008, 03:02 PM
width: auto and height: auto in the print.css. It will grab all styles from your regular stylesheet unless you change them in the print stylesheet

davidj
04-28-2008, 04:35 PM
OK

replicated the first style in my media print style and adjusted the dimensions but still nothing.

**** more info ****

my index.php pulls in the default CSS which defines a "container" div

all my modules (includes) are pulled into the index.php and into the "container" div

The **scrolling div i want to print resides in a page called prospecting.php and is called into the main container div in the index.php...

NOTE: dont be confused by the **scrolling div above. Its the container div in the index which is causing the problem


div.container {
width:95.7%;
height:86%;
overflow: scroll;
padding-top:10px;
border:1px outset;
padding-left:20px;
padding-right:20px;
}


this container div scrolls only if needed (depending on whats called in) and is used to hold many pages and reports.

in my prospecting.php i have my @media print CSS which should take over


@media print {

#container{

position:relative;
scrollbar-face-color:orange;
width:90%;
height:2000px;
overflow: visible;
padding-top:10px;
padding-left:20px;
padding-right:20px;
}

}


as you can see the debug scroll colourings is working so I'm targeting the correct div scrollbar-face-color:orange;
but you can also see...overflow: visible; This is getting ignored and the print comes out with scroll bars. Orange buggers!

this is driving me up the wall

any ideas before i program the bloody thing and force it to work kicking and screaming!

domedia
04-28-2008, 06:00 PM
#container or .container?
Class or ID?

Your regular stylesheet is a class and the print stylesheet an ID.
Would this might be the root of the problem?

MSN?