Print CSS
am 25.10.2007 19:12:55 von Barry MorrisHello
I am having trouble with print CSS and would like some advice please.
The web-site is in IE quirks mode but I guess this should only affect IE and
in view mode only?
The print CSS works fine in IE 6 and IE 7 with page breaks been put in where
they are required. In Opera the print preview (and print) page is truncated
on the right and the home page repeats page 1 twice, the print 'center'
seems to be based on the view window and not the printed page - IE correctly
shows the two pages.
Basically everything prints okay in IE 6 and 7 but not in Netscape 8.1.3,
Firefox 2.0.0.6 or Opera 9.22.
Firefox or Netscape does not put in a page break at all.
I have uploaded the test site to:
http://test.aquarius-is.co.uk
T.I.A.
Barry
Here is the print CSS (followed by the main CSS):
p {font-size:10pt; color:#000000}
body {
margin: 0;
background-image:none;
background-color:#FFFFFF;
}
#menu {
display:none;
}
#menubar {
display:none;
}
..footer {
display:none;
}
..content {
padding: 0px;
overflow:visible;
}
#container {
top:0px;
background:#FFFFFF;
padding-top: 0 0 0 0;
margin-top:0px;
width:100%;
overflow:visible;
}
#textarea {
padding: 0px;
width:100%;
overflow:visible;
}
Main CSS =====================================================
body {
margin:0;
border:0;
padding:0;
height:100%;
max-height:100%;
background:#000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10pt;
overflow: hidden;
}
h1 {font-size:16pt; color:#AAAAFF}
h2 {font-size:14pt; color:#AAAAFF}
h3 {font-size:12pt; color:#AAAAFF}
h4 {font-size:10pt; color:#AAAAFF}
p {font-size:10pt; color:#FFFFFF}
img {
border:0;
}
/* for internet explorer */
* html body {
padding:84px 0 0 0;
}
..highlight1 {
color:#AAAAFF;
}
..highlight2 {
color:#EEEEEE;
font-size:8pt;
}
#container {
font-size: 1.2em;
position:fixed;
top:84px;
left:0;
bottom:0;
right:0;
overflow:auto;
background:#000000;
}
#textarea {
padding: 20px;
}
* html #container {
height:100%;
width:100%;
}
..header {
position:absolute;
top:0;
left:0;
width:100%;
height:80px;
overflow:auto;
background:#000000;
border-bottom:4px solid #666666;
font-family:"Times New Roman", Times, serif;
}
* html .header {height:84px;}
..header h1 {
margin:10px 10px 0 10px;
color:#AAAAFF;
}
* html #footer {height:50px;}
..piccontainer {
margin-left:auto;
margin-right:auto;
text-align:center;
}
a, a:visited {
font-size:10pt;
font-weight:bold;
text-decoration:none;
color:#AAAAFF;
}
a:hover {
color:#fff;
text-decoration:none;
}
#menu {
position: relative;
height: 30px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#menu ul {
clear:both;
text-align:center;
}
#menu ul {
margin:0;
margin-top:8px;
padding:0;
list-style-type:none;
background:transparent;
}
#menu ul li {
display:inline;
color:#73a2bd;
}
#menu li a.home {
color:#CCFFFF;
}
#menu #form1 {
display:inline;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
..menu1 {
border: 0;
padding: 0;
font-size:10pt;
font-weight:bold;
background: #000000;
color: #AAAAFF;
}
..footer {
margin:0px;
border-top:5px solid #666666;
font-size:10pt;
text-align:center;
color: #AAAAFF;
}
..formerrors h2 {color: #FF0000;}
..formerrors {font-size: 1.1em; color: #FF0000; font-weight:
bold;position:relative;}
..formerrors2 {padding-left:20px;}
..tableline {
clear:both;
font-size:2px;
line-height:2px;
}
..tablinebig {
clear:both;
font-size:10px;
line-height:10px;
}
..itemname {
float:left;
width:150px;
padding-top:6px;
font-size:10pt;
font-weight:bold;
color:#AAAAFF;
}
..iteminput {
float:left;
width:auto;
height:auto;
}
#menuesub {position: absolute;
visibility:hidden;
z-index: 3;
}