CSS - Firefox Only Prints 1 Page Of Long Table

/* = Default Layout
-----------------------------------------------------------------------------*/

/* Remove padding and margin */
* {
  	margin: 0;
	padding: 0;
}

/* Remove border around linked images */
img {
	border: 0;
}

body {
	text-align: center;
	min-width: 800px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}



/* = Basic Layout and Typography
-----------------------------------------------------------------------------*/

h1 {
	margin: 8px 0;
}

h2 {
	margin: 8px 0;
}

p {
	margin: 4px 0;
}

ul {
	margin: 8px 0;
}

li {
	font-size:14px;
}

form {
	margin: 8px 0;
}



/* =Advanced Layout and Typography by Area
-----------------------------------------------------------------------------*/

#wrapper {
	width:760px;
	margin: 0 auto;
	text-align: center;
}

#masthead {
	width:760px;
	margin: 0;
	background: url(../images/indexheader.jpg) no-repeat center;
	height: 270px;
}

#mainbody{
	width:760px;
	margin: 0;
	text-align: center;
}



/* = Basic Links
-----------------------------------------------------------------------------*/

a, a:visited {
	color: #000000;
	background-color: #EEEEEE;
	width: 150px;
	line-height: 18px;
	text-decoration: none;
	font-size: 14px;
	font-weight: bold;
	display: block;
}

a:hover, a:visited:hover {
	color: #FFFFFF;
	width: 150px;
	text-decoration: none;
	background-color:#00FF33;
}





/* = Advanced Links
-----------------------------------------------------------------------------*/

.c0000FF a, .c0000FF a:visited {
	width: 150px;
	text-decoration: none;
	font-weight: bold;
}

.c0000FF a:hover, .c0000FF a:visited:hover {
	color: #FF6600;
	width: 150px;
	text-decoration: none;
	background-color: #0000FF;
}


.c990000 a, .c990000 a:visited {
	width: 150px;
	text-decoration: none;
	font-weight: bold;
}

.c990000 a:hover, .c990000 a:visited:hover {
	color: #FFCC00;
	width: 150px;
	text-decoration: none;
	background-color: #990000;
}


.cCC6600 a, .cCC6600 a:visited {
	width: 150px;
	text-decoration: none;
	font-weight: bold;
}

.cCC6600 a:hover, .cCC6600 a:visited:hover {
	color: #FFFFFF;
	width: 150px;
	text-decoration: none;
	background-color: #CC6600;
}


.c3366CC a, .c3366CC a:visited {
	width: 150px;
	text-decoration: none;
	font-weight: bold;
}

.c3366CC a:hover, .c3366CC a:visited:hover {
	color: #FFCC33;
	width: 150px;
	text-decoration: none;
	background-color: #3366CC;
}


.c333366 a, .c333366 a:visited {
	width: 150px;
	text-decoration: none;
	font-weight: bold;
}

.c333366 a:hover, .c333366 a:visited:hover {
	color: #CCCC99;
	width: 150px;
	text-decoration: none;
	background-color: #333366;
}



/* = Basic Lists
-----------------------------------------------------------------------------*/

ul {
	list-style-position: inside;	
	list-style-type: none;
}

ul li {
}



/* = Advanced Lists
-----------------------------------------------------------------------------*/

.schoollist {
	text-align: center;
}

.schoollist li {
	line-height: 16px;
	padding: 1px 1px;
	width: 150px;
}



/* = Tables
-----------------------------------------------------------------------------*/

table {
	border-spacing: 0;
	border-collapse: collapse;
	padding: 0;
	margin: 8px 0;
}

tr {
	padding: 0;
	margin: 0;
}

td {
	padding: 0;
	margin: 0;
}



/* = Advanced Tables
-----------------------------------------------------------------------------*/

#schoolstable {
}

#schoolstable tr {
}

#schoolstable td {
}



/* = Forms
-----------------------------------------------------------------------------*/

fieldset {
}



/* = Advanced Forms
-----------------------------------------------------------------------------*/

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-top: 1px solid #C0C0C0; border-bottom: 1px solid #C0C0C0" bordercolor="#111111" width="100%" id="AutoNumber1" background="network_bg.jpg">
<tr>
<td width="100%">
<table border="0" cellpadding="6" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" id="AutoNumber2" align="right" width="947">
<tr>
<td>&nbsp;</td>
<td> 

<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title>Table Height</title>
<style type="text/css">
.wrapper {
  min-height: 100%;
  max-height: 100%;
  height: auto !important;
  height: 100%;
  overflow: auto;
}
#divider {
	cursor: e-resize;
	width: 8px;;
	background-color: #444444;
	vertical-align: center;
	min-height: 100%;
	max-height: 100%;
	height: auto !important;
  	height: 100%;
}
</style>
<script type="text/javascript">
<!--
//global variables used to track status
var curWidth=0
var curPos=0
var newPos=0
var mouseStatus='up'

//this function gets the original div height
function setPos(e){
	//for handling events in ie vs. w3c
	curevent = (typeof event == 'undefined' ? e:event);
	//sets mouse flag as down
	mouseStatus = 'down';
	//gets position of click
	curPos = curevent.clientX;
	//accepts height of the div
	tempWidth = document.getElementById('leftMenu').style.width;
	//these lines split the width value from the 'px' units
	widthArray = tempWidth.split('px');
	curWidth = parseInt(widthArray[0]);
}

//this changes the height of the div while the mouse button is depressed
function getPos(e){
	if(mouseStatus=='down'){
		curevent = (typeof event == 'undefined' ? e:event);
		//get new mouse position
		newPos = curevent.clientX;
		//calculate movement in pixels
		var pxMove=parseInt(newPos-curPos);
		//determine new width
		var newWidth = parseInt(curWidth+pxMove);
		//conditional to set minimum width to 5
		newWidth = (newWidth < 10 ? 10:newWidth);
		//set the new width of the div
		document.getElementById('leftMenu').style.width = newWidth+'px';
	}
}

function toggleMenu(e) {
	e.stopPropagation();
	if (document.getElementById('leftMenu').style.display != 'none') {
		document.getElementById('leftMenu').style.display = 'none';
	} else {
		document.getElementById('leftMenu').style.display = '';
	}
}

//-->
</script>
</head>

<body style="margin: 0; width: 100%; height: 100% !important;" onmousemove="getPos(event)" onmouseup="mouseStatus='up'">
<table cellspacing="0" style="width: 100%; height: 100%;">
  <tr valign="top">
    <td id="leftMenu" style="width: 230px;">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
    </td>
    <td id="divider" onmousedown="setPos(event)"><a href="javascript:void(0);" onclick="toggleMenu(event);" style="color:white;"><></a></td>
    <td id="mainContent">
      <div class="wrapper">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras quis nisl in lectus consectetuer ornare. Phasellus mi lectus, laoreet nec, bibendum eget, posuere sit amet, urna. Sed ut sem. Mauris tincidunt. Sed suscipit ultrices orci. Morbi quis augue. Ut id felis quis ipsum vestibulum vulputate. Nulla sit amet tellus ut nisl varius scelerisque. Nulla commodo eros. Maecenas luctus, nisi in pulvinar malesuada, magna felis egestas pede, tempus sagittis metus quam ut orci. Quisque quis mauris id dui venenatis adipiscing. Nulla cursus nulla dictum mi. Sed sollicitudin sapien sit amet tellus.</p>
        <p>Aenean eros lectus, pulvinar id, varius et, eleifend in, erat. Curabitur non ipsum in risus cursus faucibus. Sed aliquet lectus id neque gravida pulvinar. Fusce tincidunt tortor sit amet mauris tempor dapibus. Integer quis nulla. Maecenas sit amet eros. Aliquam ac massa. Ut commodo dapibus dolor. Proin ut tortor. Suspendisse pharetra laoreet mauris. Aenean viverra turpis auctor mauris. Vivamus tristique.</p>
        <p>In faucibus rhoncus mauris. Etiam lacinia suscipit arcu. Etiam consectetuer pharetra nisi. Cras dolor ante, ultrices suscipit, gravida sit amet, auctor tincidunt, purus. Integer ut nisl eget mi vestibulum viverra. Donec ac nibh. Vestibulum vel lorem. Sed sed orci at libero tempus tincidunt. Integer feugiat convallis nisl. Sed luctus sodales risus. Morbi eu neque. Donec lobortis gravida tellus. Pellentesque viverra bibendum lacus. Fusce nunc massa, tincidunt nec, porta ut, euismod a, quam. Nulla semper, dui sed nonummy cursus, velit lectus vestibulum enim, eu accumsan mi quam sed lorem. Cras suscipit, leo a vulputate pharetra, enim mi posuere turpis, non nonummy arcu nibh quis ante. Suspendisse sagittis facilisis turpis. In dui. Ut vitae est.</p>
        <p>Vivamus quis risus quis justo facilisis nonummy. Duis eget massa. Sed lacus purus, adipiscing quis, accumsan sit amet, gravida at, nibh. Nullam malesuada. Morbi molestie. Praesent rhoncus, dui quis pharetra tristique, leo mauris semper nisi, eu pellentesque est quam volutpat quam. Nunc congue, nisi at cursus suscipit, eros metus faucibus eros, sed eleifend enim lacus sit amet dolor. Maecenas sed lectus consequat magna aliquet rhoncus. Nullam purus. Cras rutrum, neque in aliquam aliquet, felis nisl semper ligula, id scelerisque tellus orci at massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sit amet est.</p>
        <p>Morbi eget tellus vel ante rhoncus placerat. Maecenas libero. Fusce quis massa. Vestibulum euismod, nisl eget congue lobortis, mauris dolor aliquet dui, eu auctor tellus ligula eu justo. Donec mollis dolor interdum nunc. Quisque eget ipsum ut turpis aliquam volutpat. Aenean ac enim vitae purus fringilla consectetuer. Etiam consectetuer augue a enim. Sed felis. Maecenas et elit a lectus nonummy tincidunt. Morbi nulla ante, pharetra quis, egestas quis, commodo id, tortor. Quisque dignissim dapibus arcu. Cras rhoncus. Quisque fringilla sapien id pede. In vehicula pretium libero. Pellentesque ut lectus. Vestibulum pulvinar nibh sit amet justo. Phasellus a lacus in purus congue accumsan. Nullam luctus laoreet arcu. Praesent nonummy, arcu ut porttitor dapibus, nunc augue nonummy quam, et consectetuer nunc mi vel tortor.</p>
      </div>
    </td>
  </tr>
</table>
</body>
</html>

table.listings{
	border-collapse: collapse;
	border-style: none;
}
table.listings tr{
	border-style: solid;
	border-color: #4D3D4D;
	border-width: 1px;
}
.darkRow td{
	background-color: #4D3D4D;
	color: white;
	padding-left: 4px
}
.lightRow td{
	background-color: #BFACBF;
	color: #4D3D4D;
	padding-left: 4px;
}

<table class="listings">
<tr class="darkRow"><td>bla</td></tr>
<tr class="lightRow"><td>bla</td></tr>
</table>

-- HTML

<div id="Dashboard">
<table id="Overview">
<tr>
<td>Cost <span>$10,710</span></td>
<td>Visits <span>51,907</span></td>
<td>Cost / Visit <span>$0.21</span></td>
<td>Conv. Rate <span>1.3%</span></td>
<td>Cost / Conv. <span>16.11</span></td>
<td>Conversions <span>655</span></td>
<td class="Detail">>></td>
</tr>
</table>
</div>

-- CSS

/*  Dashboard */

#Dashboard {
	border: 1px solid #b5bfbf;
	padding: 2px;
}

/* Overview Table */

#Overview {
	width: 100%;
	border-collapse: collapse;
	height: 50px;
	background-image: url(../images/dashboard/overviewtable_bg.png);
	background-repeat: repeat-x;
}

#Overview td {
	padding-top: 8px;
	padding-left: 5px;
	border: 1px solid #b5bfbf;
	margin: 0;
}
#Overview td.Detail {
	width: 45px;
}
#Overview span {
	font-size: 20px;
	font-weight: bold;
	display: block;
	margin-top: 2px;
}

<html style="height:100%;">
<body style="height:100%; margin:0;">
<table style="height:100%; width:250px;">
	<tr><td style="vertical-align:top; background-color:#eee;">row 1<br />fixed height, some navigation links</td></tr>
	<tr><td style="height:100%;"><div style="vertical-align:top; height:100%; background-color:#ccc; overflow:auto;">text<br />text<br />text<br />text<br />text<br />text<br />text</div></td></tr>
	<tr><td style="vertical-align:top; background-color:#eee;">row 3<br />fixed height again, some navigation links</td></tr>
	<tr><td style="vertical-align:top; background-color:#eee;">row 4<br />fixed height again, some navigation links</td></tr>
	<tr><td style="vertical-align:top; background-color:#eee;">row 5<br />fixed height again, some navigation links</td></tr>
</table>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Patrick Allard's Very Graphic Website</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>

<img src="backgroundfire2.gif" alt="background image" id="bg" />

<table border="1" class="introlayout">
<tr>
<td class="introtitle">

<img src="titlemaxfontgreyredfire.gif" alt="background image" id="titleimg" />

</td>
</tr>
<tr>
<td class="skillpics">

<img src="analogskillspic.jpg" alt="background image" id="analogskillsimg" />
<img src="programmingpic.jpg" alt="background image" id="programmingimg" />

</td>
</tr>
<td class="skilltext">

<img src="analogskillsmaxfontblackbluefire.gif" alt="background image" id="analogskillstext" />
<img src="programmingmaxfontblackbluefire.gif" alt="background image" id="programmingtext" />

</td>
</tr>
<td class="menu">

<img src="mainmenumaxfontblackbluefire.gif" alt="background image" id="mainmenuimg" />

</td>
</tr>
</table> 
</body>
</html>

html, body 
{
height: 100%;
margin: 0;
padding: 0;
}

img#bg 
{
position:fixed;
width:100%;
height:100%;
z-index:-1;
}

img#titleimg 
{
width:100%;
}

img#mainmenuimg 
{
text-align:center;
width:30%;
}

img#analogskillsimg 
{
width:40%;
height:60%;
}

img#programmingimg 
{
float:right
vertical-align:bottom;
width:40%;
height:60%;
}

img#analogskillstext 
{
vertical-align:bottom;
width:40%;
}

img#programmingtext
{
float:right
width:40%;
}

table.introlayout
{
width:100%;
height:100%;
}

td.introtitle
{
width:100%;
height:10%;
}

td.skillpics
{
vertical-align:bottom;
width:100%;
height:70%;
}

td.skilltext
{
vertical-align:top;
width:100%;
height:10%;
}

td.menu
{
text-align:center;
width:100%;
height:10%;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"(URL address blocked: See forum rules)">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">

<title>Ultrasonic Blind Company - Elk Grove Village, Illinois</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css" media="screen">

a:link {color: #FFF4D1;}
a:visited {color: #FFF4D1;}
a:hover {color: #74060c;}
a:active {color: #FFF4D1;}


.top a
{
display: block;
width: 794px;
height: 120px;
background-image: url('navigate.png');
}

.top a:hover { 
background-position: 0px -601px; 
}



#left {
 left: -40px;
 width: 150px;
 height: 460px;
 display: block;
 background: url('navigate.png');
 background-repeat: no-repeat;
 background-position: 0px -120px;
 position: relative;
 }

#left li {margin: 0px; padding: 0px; list-style: none; position: absolute;
text-align: center;
font: bold 18px Batang;
line-height: 50px;
}


#left li, #left a {height: 50px; width: 146px; display: block;}
#panel1b {top: 10px;}
#panel2b {top: 63px;}
#panel3b {top: 116px;}
#panel4b {top: 169px;}
#panel5b {top: 223px;}

#panel1b a:hover {background: transparent url('navigate.png') 0px -730px no-repeat}
#panel2b a:hover {background: transparent url('navigate.png') 0px -785px no-repeat}
#panel3b a:hover {background: transparent url('navigate.png') 0px -839px no-repeat}
#panel4b a:hover {background: transparent url('navigate.png') 0px -890px no-repeat}
#panel5b a:hover {background: transparent url('navigate.png') 0px -945px no-repeat}

#right {
 width: 154px;
 height: 460px;
 display: block;
 background: url('navigate.png');
 background-repeat: no-repeat;
 background-position: -640px -120px;
 position: relative;
 }

#right li {margin: 0px; padding: 0px; list-style: none; position: absolute;
text-align: right;
font: bold 18px Batang;
}

#right li, #right a {height: 85px; width: 154px; display: block;}
#panel1r {top: 0px;}
#panel2r {top: 100px;}
#panel3r {top: 200px;}
#panel4r {top: 300px;}

#panel1r a:hover {background: transparent url('navigate.png') -640px -721px no-repeat}
#panel2r a:hover {background: transparent url('navigate.png') -640px -821px no-repeat}
#panel3r a:hover {background: transparent url('navigate.png') -640px -921px no-repeat}
#panel4r a:hover {background: transparent url('navigate.png') -640px -1021px no-repeat}


</style>
</head>
<body bgcolor=#74060c>
<div align=center>
<table id="Table_01" width=794px height=600px border=0 cellpadding=0 cellspacing=0>
<tr>
		<td colspan="3" height="120" width="794" bgcolor="#FFF4D1">
			<div class="top"> 
			<a href="(URL address blocked: See forum rules)"></a> 
			</div>
		</td>
</tr>
<tr>
		<td align=left valign=top height=674px width=150px bgcolor="#FFF4D1">
		 	<ul id="left">
  			<li id="panel1b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Contact</a></li>
 		 	<li id="panel2b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Residential</a></li>
  			<li id="panel3b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Commercial</a></li>
  			<li id="panel4b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Coupons</a></li>
  			<li id="panel5b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Questions</a></li>
 			</ul>
		</td>
		<td align=left valign=top width=490px height=674px bgcolor="#FFF4D1">
		aaa</td>
		<td align=left valign=top width=154px height=674px bgcolor="#FFF4D1">
			<p align=right> <ul id="right">
  			<li id="panel1r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
  			<li id="panel2r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
  			<li id="panel3r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
  			<li id="panel4r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
 			</ul>
 		</td>
</tr>
	
</table>
</div>
</body>
</html>