CSS - Does @media Print{} Inherit?

I've looked over my syntax a hundred times, but I can't get the print preview in IE to match the style declarations I've put in my css document. None of them work, so obviously it's something i've messed up in the overall structure of the code, and not minor errors.

This is at the end of my .css document that I linked to my html:

Code:

 @media print {body {font-family: arial, helvetica, sans-serif}
               a {text-decoration: none; color:pink}
               img {border-width: 0px}
               #hideprint {display: none}
               #instruction {display: none}
               #lpmap {page-break-after: always}
               .notes {page-break-inside: avoid; margin: 30px 30px 30px 30px; }}

Thanks

Hello! Newbie back again. I'm rolling along on using CSS for the first time (hooray!) including that wonderful bit of coding in order to center a #Container. The threads here have been *very* helpful.

Due to printing problems with having everything centered at a fixed width (text on the right getting chopped off), I've created a style for media="screen" AND media="print" which works just fine in Netscape and IE.

Question: When I pull the style out of the page so that I can reference it as an external css, do I need to create TWO files?

Also, I would appreciate any/all comments about my first attempt so far. Is there a better way I should be designating font-family and margins for my elements?

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

h1 {color:#003366; font-family:sans-serif; font-size:100%; font-weight:bold; margin:0.4cm 0.4cm}
p {font-family:sans-serif; font-size:85%; margin:0.4cm 0.4cm}
ul {list-style-image: url("redarrow.gif"); font-family:sans-serif; font-size:85%; margin:1cm 1cm}
a:link {color:#003366} a:visited {color:#003366} a:hover {background:#ccccff; text-decoration:none}
html, body {margin: 0; padding: 0; text-align: center; /*for IE stupidity*/}

#container
{
position: relative; /*The container must be positioned
/*in order to contain positioned
/*elements*/
margin: 0 auto; /*This is the proper way to center an element*/
width: 700px;
border: 1px solid gray;
text-align: left; /*corrects for IE hack*/
padding: 0px;
}
</style>

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

h1 {color:#003366; font-family:sans-serif; font-size:100%; font-weight:bold}
p {font-family:sans-serif; font-size:85%}
ul {list-style-image: url("redarrow.gif"); font-family:sans-serif; font-size:85%}
a:link {color:#003366} a:visited {color:#003366} a:hover {background:#ccccff; text-decoration:none}
</style>

And here's the page I'm working with so far:

http://www.accd.edu/sac/lrc/librns/celita/design/linktest.htm

Thanks so much for all your help.

Hi

I have a legacy site which is laid out in tables, and rather large. There is a cell holding a table which holds, amongst other things, a link to a couple of js scripts which generate a dynamic menu.

I have been trying to use a media=print stylesheet to set display:none on that cell (which I have given an ID). This works fine in terms of the static content in that cell - the adjacent 100% width cell 'expands' leftwards to fill the gap, which is what I want, but the menu is still being generated over the top. The links to the two scripts are within the <td> which has been hidden by the css, but the menu is still being generated.

I would convert the whole site to css pos if I had the time...

Hi folks,

I am getting this error and it makes little sense to me. I am getting the following warning...


Ensure web pages print well. No Print links or CSS print styles were found on the site. Usability.gov 2:9 ,
Add a CSS style sheet for print media, or include a print media section in the current style sheet.


here is my code

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


Thanks once again in advance for any suggestion or help!

whonoes

Hi all

I am using a style sheet with the print media type to controll how my site looks when it is printed out. It works very well the only problem being that I have <div>s which make boxes for the content and I would like for the boxes to not get split upon diffrent pages. Idealy I would like to make it so that if the the <div> is going to split over two pages it just gets put at the start of the next page.

This probaly isn't possiable but you never know. Any Ideas would be helpfull

Nick Carlevaris

Hi there...First post in this forum cause Firefox (and mozilla / netscape) are driving me mad!

Please consider the following code:

Code:

<html>
<head>
<style type="text/css">
@media print {
p {font-size:11px;text-align:justify;}
table {width:100%;} 
}
</style>
</head>

<body>
<table width="770" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFCC">
<tr>
<td>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam molestie, tortor id tempor fringilla, ante massa consequat dui, eget fermentum ante dolor sed felis. Curabitur mollis, velit sit amet lobortis pulvinar, mi lorem condimentum metus, cursus malesuada lectus leo in purus. Suspendisse vehicula, nisl ac varius iaculis, purus felis sodales lorem, in porttitor massa risus a odio. Cras urna felis, sagittis bibendum, ultrices vel, accumsan ac, pede. Maecenas felis nisl, rhoncus non, imperdiet in, tincidunt vitae, ante. Vestibulum cursus, elit non rutrum eleifend, arcu ligula bibendum velit, eget pharetra dui ipsum et tortor. Praesent lectus felis, consectetuer a, varius fringilla, elementum quis, diam. Morbi posuere sem eget odio. Pellentesque imperdiet tellus eget augue. Aliquam et tortor et libero nonummy tristique. Sed feugiat pellentesque sem. In hac habitasse platea dictumst. Vivamus a ipsum eu odio fringilla scelerisque. Ut et neque. Sed fermentum neque nec pede. Morbi enim erat, tempor nec, porttitor eu, tempus ut, nunc. Pellentesque lacinia dapibus urna. Curabitur leo tortor, cursus quis, semper quis, luctus ac, quam. Phasellus sit amet nisl. Nullam molestie nonummy lorem. Etiam consectetuer, ante in lacinia molestie, tellus nisl tincidunt dui, in commodo lectus elit ut elit. In ornare fermentum ante. Nullam felis. Maecenas tempor, lectus vel dignissim tincidunt, metus erat feugiat odio, eu dapibus mauris orci vitae enim. Etiam quis quam vitae risus aliquam iaculis. Ut nunc nulla, hendrerit ut, auctor id, ullamcorper a, risus. Integer fringilla, erat eu interdum imperdiet, lorem purus fermentum wisi, at mattis lectus nisl sit amet ante. Cras dolor. Nunc elementum quam at ligula. Maecenas ut mi ornare neque suscipit vulputate. Praesent ornare. Pellentesque nonummy posuere massa. Morbi sed risus et purus eleifend pulvinar. Proin suscipit ultricies enim. Morbi luctus. Nam quis sem. Quisque mattis. In laoreet velit eu nunc.
</p>
</td>
</tr>
</table>
</body>
</html>

This is basically a reconstruction of an existing problem of a far more complex design...in any case, if you try to print->Preview from Opera or IE 5+ everything is sweet...However, Firefox (and the other Gecko browsers) will not properly justify the text when previewing.

More precisiely: Firefox will wrap text over 12px correctly yet for small text, the p block will not wrap properly and some text will be cropped. I'm not fussy about justification but even when I removed it I would get the same problem.

I'm sure there's a perfectly logical solution to this problem. Maybe the width:100% gets inherited by the td and p but that should not affect the layout...Despite my various experiements of chaging the width and the wrapping properties, I could not solve this. I'm still learning the intricasies of block elements in CSS2 so I would definitely appreciate any help!

Thanks in advance,
Angelos

Using code from this example, I've modified a 15 column (ColdFusion) table to have fixed headers. I've got it working/displaying quite nicely in both IE and Firefox/Netscape, but am having two seperate browser problems when I print the page. Here's the print CSS I'm using Code:

<style type="text/css" media="print">
div.tableContainer {overflow: visible;	}
.tablenoscroll>tbody	{overflow: visible; }
thead td	{font-size: 11pt;	}
tfoot td	{
	text-align: left;
	font-size: 9pt;
	border-bottom: solid 1px slategray;
	}
thead	{display: table-header-group;	}
tfoot	{display: table-footer-group;	}
thead th, thead td	{position: static; } 
</style>

The problems I'm having are...

1) IE prints like crap. The table's 15 columns don't fit on the page (but they do in FF/NS...does FF/NS have an automatic "shrink to fit" feature?), the rows wrap between pages (they break nicely in FF/NS), and the font is big...overall it's just plain ugly. For a report with 252 rows, IE takes 18 pages to print, whereas FF/NS only takes a tidy 6 pages to print. I guess the good news is the headers do indeed repeat at the top of each page...

2) After the report table, there's a separate "Report Summary" table. IE prints this at the end of the report table (where it should be), but FF/NS print this summary table within the report table...so I'm getting some sort of overlapping error when I print in FF/NS. I wrapped the Report Summary in <DIV CLASS="summary"> tags but everything I tried with DIV.summary {} positioning in the media="print" CSS didn't do the trick.

I'd love it if anyone had help/advice on both of these problems and/or if there's a better way to do this (fixed table headers on the screen, and repeating headers when you print). Thanks

Just a quick question.

Do IFrames inherit css from the parent window? Because in firefox is seem to but in IE it doesn't.

Any explaination?

Hi all

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>
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style>
    body {
    }

    .page {
      background-color: red;
    }

    .menu {
      float: left;
      width: 100px;
      background-color: yellow;
      height: 100%;
    }

    .content {
      margin-left: 101px;
      background-color: blue;
      height: 100%;
    }
  </style>
 </head>

 <body>
  <div class="page">
    <div class="menu">asdf</div>
    <div class="content">content<br />asdf</div>
  </div>
 </body>
</html>

Is there a way to make the yellow div.menu exactly as high as the height of the enclosing div.page? So div.menu and div.content have always the same length no matter which of them has the longer content?

Thanks for help
Josh

Here is a small snippet of my CSS:

Code:

body {
	font-family: verdana, arial, sans-serif;
	color: #0A142B;
	background-color: #006699;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	text-align: left;
}
#main {
	background-color:#FFFFFF;
	height: inherit;
	padding: 5px;
}

My question is that in the <div id="main"> how can I get that to set the height to 100% from the body, I have tried both setting it to 100% and inherit and it just stays the same height.

Hello there,

I have a question about floating and automatic heights.

First, i don't want to use tables becouse of layout etc...
I want to have a "row" with 3 seperate "columns".
Each "Cell" should have the same height as the heighest "Cell".

Now this is where the problem is.
The height isn't correct .

I Tryed height: auto and 100%. But nothing is working.

How can i fix this?

Thx in advance.

CSS:
Code:

.divRow {
	float: left;
	position: relative;
	height: auto;
	margin: 2px 0;
}

.columnTo, .columnMessage, .columnDate {
	height: 100%;
	float: left;
	padding: 0;
	padding-right: 2px;
	background-color: #f0f0f0;
	vertical-align: middle;
}

.columnTo {
	width:75px;
	overflow: hidden;
	background-color: #ff0000;
}

.columnMessage {
	margin-left: 2px;
	width:270px;
	overflow: hidden;
	background-color: #00ff00;
}

.columnDate {
	margin-left: 2px;
	width:40px;
	overflow: hidden;
	background-color: #0000ff;
}

HTML
Code:

<div class="divRow"><div class="columnTo" style="background:#ffad39">Column#1:</div><div class="columnMessage" style="background:#ffad39">Column#2:</div><div class="columnDate" style="background:#ffad39">Column#3:</div><div class="clearBoth"></div></div>
<div class="divRow"><div class="columnTo clearBoth">Foobar #1</div><div class="columnMessage">This is a peace of text etc.. etc.. etc.. etc.. And Some more text, and some more..............</div><div class="columnDate">blah</div><div style="clear:both"></div></div>
<div class="divRow"><div class="columnTo clearBoth">Foobar #1</div><div class="columnMessage">This is a peace of text etc.. etc.. etc.. etc.. And Some more text, and some more..............</div><div class="columnDate">blah</div><div style="clear:both"></div></div>

Hi everybody

Is there a way to inherit the height of a surrounding table cell?

<td>
<a href="..." style="display: block;">...</a> <!-- Should have the same height as the td -->
</td>

Thanks for help :-)
Josh

Hello everyone!

my apologies if this is a dumb/old question - I did a search but didn't find anything like this...

Question is, how can I make a page within an Iframe inherit the parent pages css? Reason is, I have a site with a css switcher (using php - a copy and paste job, still learning!) that uses iframes.

Or would I be better ditching the iframes and using hidable DIV's?

cheers guys!

We're having a weird problem with a print stylesheet - a little bit of the javascript menu appear on the printed over the top of the content.

eg: (http://www.lawhandbook.sa.gov.au/ch10.php ) - Print Preview this page and you will see "Chapters A-Z" in the middle.
This seems to happen in all browsers.


We've looked into many css solutions to the issue - but to no avail - we cant make the damn thing disappear.
One long winded solution is to change the stylesheet to be built dynamically - so a call to ch10.php=true would build the page differently.
But this seems to defeat the purpose of using a print stylesheet in the first place.
Another long winded soltuion is to change the (Rather old) menu script - but that not really an option in this case either.

So my question is - What happens when a browser prints a page?
Does it send anything back to the server indicating it is loading the print stylesheet instead? (eg: Some sort of request variable)
Or does the client's browser simple request the CSS file and reformat the page it has already downloaded?

If so I could detect this event with PHP or Javascript to not load the offending menus when the print css had been loaded

Hi guys .... I've been all over google looking for the answer and nothing I've tried works. I'm trying to make a print-friendly css page but my browsers (FF and IE7) both ignore the CSS and apply their own standards to it no matter what I do, it's driving me positively INSANE because it feels like I've done everything according to the instructions I found online for print CSS. Could you please take a look at my code and make some suggestions? You'd be saving my sanity.

Code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)" lang="en" xml:lang="en">

<head>
<title>CLOColors3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="mainstyle.css" type="text/css" />
<link rel="stylesheet" href="mainstyleprint.css" media="print" type="text/css" />

the print css:
Code:

	  @media print {
		 html{
			height:auto;}
		body{
			background-color:#FFF;}
		#header{
			display:none;}
		#body{
			position:relative;
			background-color:#FFF;
			background-image:none;
			height:auto;
			width:auto;
			left:0px;
			top:0px;
			z-index:0;
			padding-bottom:0px;}
		#textbox{
			position:relative;
			overflow:visible;
			float:none;
			margin-left: 0px;
			top: 0px;
			width:auto;
			bottom:0px;
			background-color:#FFF;
			border:hidden;
			border-color:#FFF;
			z-index:0;
			padding:0px;}
		#textbox img{
			display:none;}
		.searchbar{
			display:none;}
		#linkbar{
			display:none;}
		.map{
			display:none;}
		.video{
			display:none;}
		#linktext{
			display:none;}
		#clear_both{
			display:none;}
		#menu{
			display:none;}
		#footer{
			display:none;}
		}
	

Currently the main CSS is being used and none of the elements I set to be "hidden" are hidden. Help!!!


UPDATE: Ok, so IE seems to be PARTIALLY responding to the print CSS. It responds to all the "display:none;" commands but refuses to format the #textbox div according to my instructions, a border persists and the div has an overflow scrollbar for some reason. Firefox is still unresponsive.