582115 - printed font size should be medium, not xx-large

Status: RESOLVED INVALID

(Firefox :: General, defect)

Description

[Jim Michaels]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8 ( .NET CLR 3.5.30729)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8 ( .NET CLR 3.5.30729)

a span within an h1 that has a different font setting will not be rendered correctly in print.  on screen it's OK. see title bar of http://JesusnJim.com and watch what happens when it's printed.  the text at the bottom of the title bar should come out smaller, and in a different font, but it doesn't.

<style>
@media screen {
	.maintitlebar {
		/*
		background-color:#9f9;color:#f93;font:Georgia,'Times New Roman',Times,serif;padding:8px;text-align:center;text-shadow:#555 3px 3px 2px;box-shadow:inset 0 10px 15px yellow, 0 1px 1px #9f9;-o-box-shadow:inset 0 10px 15px yellow, 0 1px 1px #9f9;-webkit-box-shadow:inset 0 10px 15px yellow, 0 1px 1px #9f9;-moz-box-shadow:inset 0 10px 15px yellow, 0 1px 1px #9f9;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 24px;border-width:5px;border-style:outset;border-color:#9f9;

		border-style:outset;
		border-width:7px;
		border-color:#9f9;
		*/
		font-size:xx-large;
		background-color:#9f9;
		color:#f93;
		font:Georgia,'Times New Roman',Times,serif;
		padding:8px;
		text-align:center;
		text-shadow:#555 3px 3px 2px;
		box-shadow:inset 0 10px 15px yellow, 0 1px 1px #9f9;
		-o-box-shadow:inset 0 10px 15px yellow, 0 1px 1px #9f9;
		-webkit-box-shadow:inset 0 10px 15px yellow, 0 1px 1px #9f9;
		-moz-box-shadow:inset 0 10px 15px yellow, 0 1px 1px #9f9;
		border-radius: 5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 24px;
		border-width:5px;
		border-style:outset;
		border-color:#9f9;
		behavior:url(/ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
	}
	.mainsubtext {
		font-size:medium;
		font-family:Arial,Helvetica,sans-serif;
	}
}
@@media print {
	.maintitlebar {
		/*
		background-color:#9f9;color:#f93;font:Georgia,'Times New Roman',Times,serif;padding:8px;text-align:center;text-shadow:#555 3px 3px 2px;box-shadow:inset 0 10px 15px yellow, 0 1px 1px #9f9;-o-box-shadow:inset 0 10px 15px yellow, 0 1px 1px #9f9;-webkit-box-shadow:inset 0 10px 15px yellow, 0 1px 1px #9f9;-moz-box-shadow:inset 0 10px 15px yellow, 0 1px 1px #9f9;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 24px;border-width:5px;border-style:outset;border-color:#9f9;

		border-style:outset;
		border-width:7px;
		border-color:#9f9;
		*/
		font-size:xx-large;
		background-color:#9f9;
		color:#000;
		font:Georgia,'Times New Roman',Times,serif;
		padding:8px;
		text-align:center;
		/*text-shadow:#555 3px 3px 2px;
		box-shadow:inset 0 10px 15px yellow, 0 1px 1px #9f9;
		-o-box-shadow:inset 0 10px 15px yellow, 0 1px 1px #9f9;
		-webkit-box-shadow:inset 0 10px 15px yellow, 0 1px 1px #9f9;
		-moz-box-shadow:inset 0 10px 15px yellow, 0 1px 1px #9f9;*/
		border-radius: 5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 24px;
		border-width:5px;
		border-style:outset;
		border-color:#9f9;
		behavior:url(/ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
	}
	.mainsubtext {
		color:#000;
		font-size:medium;
		font-family:Arial,Helvetica,sans-serif;
	}
}	
</style>

<h1 class="maintitlebar">Jesus 'n Jim<br>
<span class="mainsubtext">a PC and somewhat Mac oriented site with Software and Repair Info and how-to's on Using Computers</span>
</h1>




Reproducible: Always

Steps to Reproduce:
1. go to http://JesusnJim.com
2. examing the title box at the top for font sizes and font type.
3. print the first page.
4. examine the results from printing and note any differences.
Actual Results:  
font comes out all in all Arial, xx-large.  the whole title box.


Expected Results:  
first line should be in georgia xx-large,
rest should be in Arial, medium.

Comment 1

[Jim Michaels]

as for the georgia font, I can't explain it - Georgia is a serif font, and my site is displaying as a sans-serif font, both on IE8 as well as on FF.

I did discover the problem with the print problem, it was caused by using @@media instead of @media in the css code (my error).

there is still a font rendering problem I can't explain.  maybe this also is web author error. (?)

Comment 2

[Jim Michaels]

yup user error.  was using font instead of font-family in my CSS. closing as resolved invalid.