Posted by Barry Morris on 10/25/07 17:12

Hello

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;
}

• Next in forum: Re: <td> and font sizes...
• Prev in forum: Re: are poor people the only ones who have their own web servers?
• Thread view: Print CSS

[Reply to this message]