Forum Moderators: not2easy
I've been reading through various posts on this forum and on the Web looking for some help and thought I'd see what happened if I posted here.
I have created a print CSS for my web pages but...
In Mozilla Firefox only the first page prints. In IE all pages print but the first page contains only the logos (which have been defined as display: none; - obviously not supported (outdated?) in IE) and the rest of the page (over 2/3s) is blank.
Using display:none; leaves big chunks of white space - is there any way to move content into this space?
Here is my print CSS (I'm pretty new to CSS so forgive any glaring mistakes)
Thanks,
ElizaJo
===================================================================
/* #############################################
SCREEN STYLES
############################################ */
/* #############################################
COMPLETE DOCUMENT STYLES
############################################# */
html {
margin: 0;
}
body {
background: #fff;
margin: 0;
}
/* #############################################
LINK STYLES
############################################# */
a {
color: #006699;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-weight: bold;
font-size: 13px;
text-decoration: none;
}
.vplNavbar {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
text-decoration: none;
vertical-align: middle;
text-align: center;
}
a.vplNavbar {
color: #006699;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
text-decoration: none;
}
.vplOnline {
color: #666666;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-weight: bold;
font-style: italic;
font-size: 12px;
text-decoration: none;
text-align: left;
}
a img {
border: 0;
color: #ffffff;
}
.menulink {
color: #ffffff;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-decoration: none;
text-align: center;
font-size: 13px;
font-weight : bold;
}
.topofpage {
color: #ffffff;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-decoration: none;
font-size: 12px;
font-weight: bold;
text-align: center;
}
.contentBoxmenulink {
color: #ffffff;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-decoration: none;
text-align: center;
font-size: 20px;
font-weight: bold;
}
/* #############################################
STYLES/CLASSES
############################################# */
h1 {
color: #000000;
font-family: Trebuchet, Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
text-decoration: none;
line-height: 20px;
}
h2 {
color: #000000;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-weight: bold;
font-size: 15px;
text-decoration: none;
line-height: 16px;
}
h3 {
color: #000000;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-weight: bold;
font-size: 13px;
text-decoration: none;
line-height: 14px;
}
p,div {
color: #000;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-decoration: none;
font-size: 13px;
line-height: 17px;
}
p.tableTop {
line-height: 8px;
}
ol {
color: #000000;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-decoration: none;
font-size: 13px;
}
ul {
color: #000000;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-decoration: none;
font-size: 13px;
}
li {
color: #000000;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-decoration: none;
font-size: 13px;
list-style-type: square;
list-style-image: none;
}
.strong {
color: #000000;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-decoration: none;
font-weight: bold;
}
/* #############################################
CONTENT STYLES
############################################# */
.topalign {
vertical-align: top;
}
.up {
color: #999999;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
font-style : italic;
line-height: 18px;
text-align: left;
vertical-align: top;
}
p.tableTop {
line-height: 8px;
}
/* #############################################
TABLE STYLES
############################################# */
td {
vertical-align: middle;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 13px;
}
table#content {
width: 700px;
border-collapse: collapse;
border: 0px solid #000;
empty-cells: show;
background: #fff;
margin: 10px;
}
table#content td {
width: 50%;
padding: 5px;
border-bottom: 0px solid #000;
border-right: 0px solid #000;
vertical-align: top;
}
table#header {
width: 700px;
border-collapse: collapse;
border: 0px solid #000;
empty-cells: show;
background: #fff;
}
td#header {
width: 65%;
}
table#share {
width: 500px;
border-top: 2px solid #006699;
empty-cells: show;
background:#fff;
}
table#share td {
width: 10%;
padding: 2px;
border-bottom: 0px;
vertical-align: top;
}
/* #############################################
DATABASES STYLES
############################################# */
.dbNote {
color: #666666;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-decoration: none;
font-size: 11px;
line-height: 13px;
}
.dbDesc {
color: #000000;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-decoration: none;
font-size: 13px;
line-height: 17px;
}
.dbLinksListHdr {
color: #000000;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-decoration: none;
font-size: 19px;
font-weight: normal;
line-height: 21px;
}
/* #############################################
DISPLAY URL STYLES
############################################# */
.printurl {
display: none;
}
/* #############################################
LASTMOD/COPYRIGHT FOOTER DIV STYLES
############################################# */
.lastMod {
color: #999999;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
font-style : italic;
line-height: 16px;
text-align: center;
vertical-align : top;
}
If I understood SuzyUKs suggestion I removed position: relative; from my style but the problem persists.
ElizaJo
