CSS - Print Style - Don't Want Url

I have pages the when viewed for print in Firefox, show the page going below the page margin and not continuing to the next logical printed page.

This image below, shows better than I can explain. Has anyone ever seen this before?...Any ideas how to make it preview and print correctly?

I am just wondering if there is a way to simply extend a style rule from one previously defined. For instance, if I have this rule:
Code:

 .textarea-box {
	color: #990000;
	background-color: #fff;
	width: 375px;
	height: 200px;
	border: #000 solid 1px;
	} 

...if I want another text area rule to be the same except for one difference, the height should be 80px, do I have to write the rule out again with a new name, incorporating the new height, or is there some nifty way to just change the height in the new rule?
Thanks for help with this.
j9

I have a menu bar made up of <a href> elements that have a hover style of: PHP Code:
#mainMenu a:hover {
    color:#000000;
    background-color: #66c74c;
    padding: 1px 4px 1px 4px;
    margin: 1px 1px 1px 1px;
} 



This will provide a green colored rollover visual as the user moves their mouse over the menu bar.

I just added some JS today that will highlight the clicked (selected) menu so there is visual feedback of the section the user is in. For some reason, after setting the background color of the <a href> and color attributes, the HOVER: no longer functions. Here is the code to do the hilite where I pass the ID of the <a href> menu selection in the variable "menu": PHP Code:
//--- Simplify setup by creating an array of the menus and hilight ID's ---
    var menus = ["menu1","menu2","menu3","menu4","menu5",
                "menu6","menu7","menu8","menu9","menu10"];
    
    function J_hiliteMenu(menu) {
        //--- first make sure all the menu are hidden and unhilited ---
        for(i=0; i < menus.length; i++) {
            if (menus[i] == menu) theIndex = i; // Hold on to the chosen index position
            var obj = document.getElementById(menus[i]);
            if (obj == null) continue;             // if menu is not available skip it
            obj.style.color = "#ffffff";
            obj.style.backgroundColor = "#234fd7";
        }
        //--- hilite the menu we're interested in ---
        var obj = document.getElementById(menu);
        obj.style.color = "#000000";
        obj.style.backgroundColor = "#f8f400";
    } 



Prior to hiliting the menu I un-hilite all the menus (since we may be switching from another). I think this is where the problem is. Maybe I need to redefine the rollover "hover" attribute for all elements during the un-hilite loop? Does anyone know how to set a HOVER: attribute using JavaScript?

Thanks!

Hi,

All the content of my web page is in a table which is 760 pixels width.

This is fine on the screen, but when printing, the right part is cut.

I tried to set a new css print stylesheet <link rel="stylesheet" type="text/css" href="print.css" media="print"> to avoid this problem, but it is not working.

I tried to change the margin and padding, but there is no change. I still have the same problem.

I tried many different configurations, but none of them worked... I did probably something wrong.

I know that the page is properly printed if I change manually the print setting (file -> page setting) margin to 5mm, but how can I do it with the css, in order than everybody who would like to print the page has the complete page printed?

Could someone help me?

Many thanks

Hello all,

I have been trying to get my website to comply with googles page speed and yahoo's yslow.

I had 2 seperate css files one for print and one for screen and they wanted them combined. I searched and searched for a way to do this and well I am going to post here how I got things to work in hopes it helps someone else.

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

NOTE if I make it media="all" print does not work


here is code for the main css file that combines the 2 into 1. NOTE also the print is NOT loaded until it is needed.

@media screen {
/* all screen CSS goes in here */
}

@media print {
/* all print CSS goes in here */
}



U ask why a print.css file? simple it lets me force page breaks so images don't get cut in half. it lets me set a legable size font or larger than what is displayed on screen.

Ok here is my problem... in the print.css I don't want to print my backround image. I want just a plain white background. I use a "sprite" to call picture frames for screen. These frames use part of my background image... thus they look bad printed.

How do I in the print.css file tell it NOT to print this frame.png file?

I assume I will use .noprint DISPLAY:none or something to that effect but where and how to impliment this is over my head and I cannot find any examples of how to do it.

Thanks in advance for any suggestions or help

whonoes

Hello all.
How can I print my scrollable table? I tried this..
table.sql {
overflow: visible;
}
in my print.css but it does'nt work. Please help, I'm stumped!
Tracy

I need to change some page setup setting for print like orientation, headers and footers
Is it possible to define it in CSS.

I have a three column layout page which looks fine in IE as well as Firefox. But if I try to print the page, it prints the entire page in one column. Also, backgrounds are not printed.

Searching on google, it seems CSS is the cause behind this. I could not find any solution though.

Here is my CSS.


Code:

html {overflow-y:scroll;} 

body {
	font-family: Arial, Helvetica, sans-serif;
	color: #354963;
	font-size: 8pt;
	font-weight: normal;
	padding: 0;
	margin: 120px 0px 0 0;  
}

#wrapper {
	position:absolute;
	top:0;
	left:0;
	margin:0;
	padding:0;
	background:#003333 url(/corporateBanner/corporateBanner.jpg) 0 0px;
	width:100%;
	height:100px;
	font-size:8pt;
}

#bannerWrapper {
	position:absolute;
	top:0;
	left:0;
	z-index:2;
}

#bannerTitle {
	position:absolute;
	top:28px;
	left:80px;	
	color:white;
	font-size:26pt;
	width:600px;
	margin:0;
	border:0;
	font-weight:normal;
	z-index:2;
	white-space: nowrap;
}

.hiddenLabel {
	display:none;
}

#topmainMenu {
	position: absolute;
	right: 0;
}
#topmainMenu a:hover {
	text-decoration:underline;
}

#mainTabs {
	position:absolute;
	top:	82px;
	left:	-6px;
	width:	600px;
	margin: 0px;
	padding: 0px;
}
#mainTabs ul li {
	float: left;
	padding: 0;
	margin: 0px;
	list-style-type: none;
}
#mainTabs ul li a, #mainTabs ul li a:visited  {
	font-size:8pt;
	font-weight:bold;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	width:105px;
	text-align: center;
	height:19px;
	display:block;
}
#mainTab1 a:link, #mainTab1 a:visited, #mainTab2 a:link, #mainTab2 a:visited, #mainTab3 a:link, #mainTab3 a:visited, #mainTab4 a:link, #mainTab4 a:visited, #mainTab5 a:link, #mainTab5 a:visited, #mainTab6 a:link, #mainTab6 a:visited, #mainTab7 a:link, #mainTab7 a:visited {
	background: transparent url(../images/tabs/primary/tabBG.gif) top left no-repeat;
	color: #FFFFFF;
}
#mainTab1 a:hover, #mainTab2 a:hover, #mainTab3 a:hover, #mainTab4 a:hover,#mainTab5 a:hover,#mainTab6 a:hover, #mainTab7 a:hover {
	color: #000000;
	background-position: left -19px;
	text-decoration: none;
}
#T1 #mainTab1 a:link, #T1 #mainTab1 a:visited, #T2 #mainTab2 a:link, #T2 #mainTab2 a:visited, #T3 #mainTab3 a:link, #T3 #mainTab3 a:visited, #T4 #mainTab4 a:link, #T4 #mainTab4 a:visited, #T5 #mainTab5 a:link, #T5 #mainTab5 a:visited, #T6 #mainTab6 a:link, #T6 #mainTab6 a:visited, #T7 #mainTab7 a:link, #T7 #mainTab7 a:visited {
	color: #000000;
	background-position: left -19px;
}

#subMenu {
	position:absolute;
	top:100px;
	left: 0px;	
	margin: 0;
	padding: 0;
	background: #FFF;
	height:15px;
	width:100%;
}
#subMenu ul {
	border: 0;
	margin: 0;
	padding: 0;
	text-align: center;
}

#subMenu ul li {
	float: left;
	padding: 0;
	margin: 0px 10px 0px 7px;
	list-style-type: none;

}
#subMenu ul li a {
	float: left;
	padding: 0;
	margin: 2px 1px 0px 0px;
	color:#000066;
	text-align: center;
	display: block;
	line-height: 16px;
	font-size: 8pt;
	font-weight:normal;
	text-decoration: none; 
	width:auto;
	height:15px;
	letter-spacing: 0px;
}
#subMenu ul li a:hover {
	text-decoration:underline;
	color:#0A3C91;
}
#subMenu ul li a.current {
	text-decoration:underline;
	font-weight:bold;
	color:#0A3C91;
}

#dateStamp {
	position:absolute;
	right:5px;
	top:83px;
	letter-spacing:0px;
	font-size: 8pt;
	font-weight:bold;
	z-index:2;
}

#subContentWrapper {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	width:100%;
	height:auto;
	border-top:1px solid #000;
	background: #fff;
	line-height:normal;
}

/* For the text under column */
#subContentWrapper p {
	padding: 0;
	margin: 5px;
	font-size:8pt;
}

/* IE7 1px rounding error. margin-left:-1px; */
/* 25% + 50% + 25% does not work in IE6. (24.8% + 50% + 24.8% works). Overwrote the code in the Home Page. */
#main3Column  {
	float: left;
	width: 50%;	
}
#leftColumn {
	float:left;
	width:25%;
	margin-left:-1px;
}
#rightColumn {
	float:right;
	width:25%;
}
.columnBoxLeft {
	padding: 0px 0px 0px 6px;
	margin: 5px 0px 5px 0px;
}
.columnBoxMiddle {
	padding: 0px 5px 0px 5px;
	margin: 5px 0px 5px 0px;
}
.columnBoxRight {
	padding: 0px 5px 0px 0px;
	margin: 5px 0px 5px 0px;
}

/* Clears the column floats so the footer can center directly below them. */
.cleaner {
	clear:both;
	height:1px;
	font-size:1px;
	border:none;
	margin:0; 
	padding:0;
	background:transparent;
    margin-top: -1px;
    overflow: hidden;
}
	
#revdate { 
	padding: 0px;
	font-weight: normal;
	font-size: 8pt;
	height: 17px;
	width: 100%;
	text-align: center;
	color: #354963;
}

/* Footer styles */
#mainFooter {
	margin: 0px;
	padding: 0px 0px;
	background-color: #363459;
	color: #fff;
	font-weight: bold;
	font-size: 7pt;
	height: 25px;
	border-top: 1px solid #000066;
	text-align: center;
	float: left;
	clear:both;
	width: 100%;
}

#mainFooter p {
	margin: 0;
	padding:0;
	background: transparent;
	color:#FFFFFF;
	font-size:7pt;
	font-weight:bold;
	width:220px;
}
.rightFloat {
	float:right;
	text-align:right;
}
.leftFloat {
	float:left;
	text-align: left;
}
#mainFooter p.leftFloat {
	margin:6px 0 0 4px;
}
#mainFooter p.rightFloat {
	margin:0px 5px 0;
}
#mainFooter p span {
	visibility: hidden;
}

Here is a simple page that I put up using the above CSS (main.css) which has the issue I described above. Use print preview and you will see all the 3 columns one below another.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Page</title>
<link rel="stylesheet" type="text/css" href="main.css" media="screen"/>
</head>

<body>

<div id="subContentWrapper">

<div id="leftColumn">
<div class="columnBox">
<h2 class="channeltitle">Left Column</h2>
<p>Your Text Here</p>
</div><!--/columnBox-->
</div><!--/leftColumn-->

<div id="main3Column">
<div class="columnBox">
<h2 class="channeltitle">Main Column</h2>
<p>Your Text Here</p>
</div><!--/columnBox-->
</div><!--/main3Column-->

<div id="rightColumn">
<div class="columnBox"> 
<h2 class="channeltitle">Right Column</h2>
<p>Your Text Here</p>
</div><!--/columnBox-->
</div><!--/rightColumn-->

</div>

</body>
</html>

Can you only exclude elements from a Print stylesheet?

I'd like to print only a table of data and nothing else on the web page in a print style sheet.

I put together the following site ... http://www.themax.co/

I am trying to create a style sheet for the PRINT pages, but I ran into some problems (the main site looks fine, but the print page doesn't).

First, go to the page...
http://www.themax.co/?page_id=6
When you go to print, and look at the print preview (in Firefox). most of the content is pushed to the second page. I assume this is because of the style .pagesidebox (which is a column that spans the entire page) ... I think this is causing the rest of the content to go to the next page. Any idea how to fix this?

Second, I have a logo that goes against the black background (on the website) and a white logo that is supposed to appear on the print page. So, in the print.css stylesheet, I called the background-image to point to the new image. However, the new image is not showing up when printing. I assume this is because the image is a BACKGROUND image, and the print settings are set to NOT show backgrounds. Is there a way around this (using CSS)? Since there are two logos (one on white, and one on black), I can't place the image inside the html page (I have to use CSS).

Please let me know. Thanks!

if you check out this website you'll immediately understand what the problem is about.

The script I wrote, pulls pictures out of a database and displays them. I have a print feature (click the link that says: Ik wil de klassenlijst van **** afprinten).

With Css I check wether or not a picture can be displayed on this page or if it has to be forced onto another page, when printed.

Code:

<style type="text/css" media="print"> 

	table {
		page-break-befo  auto;
	}
</style>

When you check the webpage, you'll notice this row gives problems in IE.
When I print the page from Internet Explorer: this row shows on the page, but not the picture that goes along with it.
When I print the page from Mozilla: this row does not show on the page, neither the picture that goes along with it. as it should be

Can someone help me? It is very important that the pagebreak is automagically forced when printed, because I can't guess the format on which people will print.

Hello all,

Not sure if this is a CSS or Javascript question..

I have a page which has an external CSS sheet, with a part for the @media print styling.
On this page I'm also using (throughout my site) a javascript navigation bar.
The idea is that when user clicks on a print-button, the whole navigation bar disappears, before printing.

The Javascript seems however to add additional DIVS when loading the page which are without any ID, class or nametag, so I tried to get to this "navigationbar-div" via CSS selector combinations - just to find out that apparently CSS cannot select these divs (- maybe because they were added by javascript at runtime???). No matter what I try, it's like CSS doesn't "see" there's additional divs there..

I've also tried to select the concerning DIVs through DOM, but apparently this is still buggy even for modern browsers, so I rather not touch it..

Is there anyway I can get rid of the Javascript navigation bar in my print stylesheet?

Thanks for your help!

hi I have 2 questions:

- how do I programmatically remove default browser header/footer
- how do I print a header on every page

thanks.

i have this in my css....the image is shown on screen, but if print the page, image wont print...

how can i fix this?

i need the iomage to be printed...help please

Code:

}

#recibo {
		BACKGROUND: url(recibo.jpg);
		WIDTH: 600px; 
		HEIGHT: 400px;
}

Use relative rather than absolute units in CSS property values. WCAG1 AA 3.4 ,
Absolute units are cm, mm, in, pt and pc, as well as absolute size keywords like x-small. Partially sighted users often use the "large fonts" mode of Windows, which makes each pixel larger than usual. This usually causes problems with pixel based layouts, which also perform badly on handheld and widescreen displays. Percentage values "stretch" according to screen size and work on a large range of display sizes.


hello again folks,

Man I am lost on this warning any help? Below is my print.css file

body {
color : #000000;
background : #ffffff;
font-family : "Times New Roman", Times, serif;
font-size : 12pt;
width: auto;
background-position: center center;

}
a {
text-decoration : underline;
color : #0000ff;
}



Thanks once again for all your help!

whonoes