Forum Moderators: not2easy
Basically, I've made a simple print.css stylesheet. You can see how things SHOULD look when the page is printed here:
<snip>
The actual page itself is here:
<snip>
But if you try to print this, you can see that the justified column from the screen stylesheet is somehow bleeding through into the print stylesheet.
You can see a print preview demonstrating this here:
<snip>
I am utterly stumped by this, so if anyone has any ideas, I'd be very grateful!
cheers,
Ollee.
[edited by: swa66 at 4:50 pm (utc) on Mar. 30, 2009]
[edit reason] No personal URLs please see ToS [/edit]
I know the code below is really messy, but I'm dealing with an existing site and there's not really the option of redoing it at this stage.
print.css is as follows:
body, .div_col1
{
margin: 0;
width: 100%;
float: none;
background: #fff url(none);
text-align: left;
}
#hoznav, .div_top1, .sp_nav, .div_bot1, .div_col2, .div_r, .div_top1, .div_bot2, .div_bot3, .div_menu, .div_top1, .pa1, .noprint {
display: none;
}
img {
border: none;
}
body {
color: #000;
font: 1em "Times New Roman", Times, Georgia, serif;
border-width: 0;
}
h1,h2,h3,h4,h5,h6 {
color: #000;
font-family: "Times New Roman", Times, Georgia, serif;
}
h1 { font-size: 250%; }
h2 { font-size: 175%; }
h3 { font-size: 135%; }
h4 { font-size: 100%; font-variant: small-caps; }
h5 { font-size: 100%; }
h6 { font-size: 90%; font-style: italic;
}
a:link, a:visited {
text-decoration: none;
color: black;
}
styles.css is:
body { margin: 0px; font: 11px Verdana, Arial, sans-serif; line-height: 1.2em; color: #000; background: #fff; text-align: center;}
div, td { vertical-align: top; text-align: left;
}
.swf { margin:0px; border:none; display:block; }
.swf1 { margin:10px 0px; border:none; display:block; float: right;
}
/*TDs*/
table.tform { margin: 10px 0px 0px 30px; width: 452px;} /* 393 */
table.tform td { border-bottom: 5px solid #fff; background: #D8DDE5; padding: 3px 3px 3px 5px; line-height: 1.3em;}
table.tform td.tda { border-bottom: none; background: #D8DDE5; padding: 3px 3px 3px 5px;}
table.tform td.td1 { background: #EBEEF2; }
table.tform td.td1a { background: #EBEEF2; border-bottom: none;
}
table.t1 { margin: 20px 46px 0px 0px; width: 482px;}
table.t1 td { padding-bottom: 20px;}
/* table.t1 td.td1 {padding: 0px 15px 20px 88px; background: url(../images/bul.gif) no-repeat 59px 3px; font-weight: bold; color:#FF9900; } */
table.t1 td.td1 {padding: 0px 15px 20px 30px; background: url(../images/bul.gif) no-repeat 0px 3px; font-weight: bold; color:#FF9900;
}
/* DIVS */
div.div_l {float: left; }
div.div_r {float: right; }
div.div759 { margin: 0px auto; width: 759px; clear: both;}
div.div_top1 {float: right; padding-top: 49px; background: #fff;; }
div.div_menu { width: 759px;}
div.google
{
PADDING-RIGHT: 2px;
}
div.div_col1 {float: left; width: 528px; margin: 20px 0px; background: url(../images/bk_col2.gif) repeat-y right; line-height: 1.5em; color: #333333; overflow: visible;}
div.div_col1 p { margin: 20px 0px 0px; background: url(../images/bul.gif) no-repeat 0px 3px; padding: 0px 46px 0px 30px; text-align: justify;}
div.div_col1 p.pa_noicon { margin: 20px 0px 0px; background: none; padding: 0px 46px 0px 30px; text-align: justify;}
div.div_col1 p.pa_nobreak { margin: 0 0px 0px; background: none; padding: 0px 46px 0px 30px; text-align: justify;}
div.div_col1 p.pa_noiconadvert { margin: 20px 0px 0px; font-weight: bold; font-size: 12px; color: #0000FF; background: none; padding: 0px 46px 0px 30px; text-align: justify;}
div.div_col1 p.pa_noiconadvertnojust { margin: 20px 0px 0px; font-weight: bold; font-size: 12px; color: #0000FF; background: none; padding: 0px 46px 0px 30px; text-align:left;}
div.div_col1 p.pa_noiconadvertblk { margin: 20px 0px 0px; font-weight: bold; font-size: 12px; color: #000000; background: none; padding: 0px 46px 0px 30px; text-align: justify;
}
div.div_col1_claim {float: left; width: 759px; margin: 20px 0px; line-height: 1.5em; color: #333333;}
div.div_col1_claim p { margin: 20px 0px 0px; background: url(../images/bul.gif) no-repeat 0px 3px; padding: 0px 0px 0px 30px; text-align: justify;}
div.div_col1_claim p.pa_noicon { margin: 20px 0px 0px; background: none; padding: 0px 0px 0px 30px; text-align: justify;}
div.div_col1_claim p.pa_noiconadvert { margin: 20px 0px 0px; font-weight: bold; font-size: 12px; color: #0000FF; background: none; padding: 0px 0px 0px 30px; text-align: justify;}
div.div_col1_claim p.pa_noiconadvertblk { margin: 20px 0px 0px; font-weight: bold; font-size: 12px; color: #000000; background: none; padding: 0px 0px 0px 30px; text-align: justify;
}
/* for ul in content */
div.div_cont1 { margin: 0px 46px 0px 6px;} /* div.div_cont1 { margin: 0px 46px 0px 64px;} */
/* for ol in content */
div.div_cont1a { margin: 0px 46px 0px 12px;} /* div.div_cont1a { margin: 0px 46px 0px 70px;} */
/* for ul in content with bullet */
div.div_cont1b { padding: 0px 46px 0px 6px;}
/* for ul in content without bullet */
div.div_cont1b { padding: 0px 46px 0px 6px;}
/* was 88 */
div.div_cont2 { margin: 0px 46px 0px 30px;} /* was 88 */
/* case transcripts */
div.div_cont3 { margin: 0px 46px 0px 0px; line-height: 1.3em; width: 479px;}
div.div_cont3 p { margin: 20px 0px 0px; background: none; padding: 0px;
}
div.div_h_cont { margin: 0px 26px 0px 0px; line-height: 1.3em; text-align: justify;
}
div.div_col2 {float: left; width: 216px; margin: 7px 0px 20px 15px;
}
div.div_right1 { background: url(../images/bk_but1.jpg) no-repeat #8C9CB3; color: #fff; border: 1px solid #fff; border-width: 1px 0px; padding: 10px 0px 10px 10px; font-weight: bold;}
/*top menu bar*/
div.div_utility1 {padding: 2px 22px 0px 5px;color:#FFFFFF;background: url(../images/bk_bot1.gif) repeat-x 0px 17px #728297; font-size: 10px; float: left; width: 500px; height: 19px;}
/**/
div.div_utility2 { padding: 3px 0px 0px 22px; background: #dedede; float: left; width: 210px; font-size: 10px; color: #8C9CB3; height: 18px;}
/*print, cani claim, how much?*/
div.div_bot1 { padding: 2px 0px 0px 88px; background: url(../images/bk_bot1.gif) repeat-x 0px 17px #728297; font-size: 10px; float: left; width: 439px; height: 19px;}
/*terms, privacy,contact us*/
div.div_bot2 { padding: 3px 0px 0px 22px; background: #dedede; float: left; width: 210px; font-size: 10px; color: #8C9CB3; height: 18px;}
/*footer links*/
div.div_bot3 {padding: 10px 0px; font-size: 10px; text-align:justify; line-height:1.3em; border-bottom: 1px solid #8C9CB3;}
/*copyright*/
div.div_bot4 {text-align: right; padding: 10px 0px; font-size: 10px; color: #777;
}
div.div_line1 { background: url(../images/bk_line1.gif) repeat-x; padding: 1px; margin-bottom: 8px;
}
/* UL */
ul li { margin-bottom : 7px; }
ul li nobullets { margin-bottom : 7px; list-style-type: none;}
ul li.bulletjustify {margin-bottom : 7px; padding: 0px 46px 0px 0px; text-align: justify;}
ol li { margin-bottom : 7px; }
ul.ul1 { margin: 15px 0px 30px 17px; padding: 0px; }
ul.ul1 li {margin-bottom : 7px;
}
ul.ul_menu1 { margin: 0px; padding: 0px; white-space: nowrap;}
ul.ul_menu1 li { display: inline; list-style-type: none; margin: 0px;}
ul.ul_menu1 li a { background: url(../images/bk_bot2.gif) no-repeat 0px 12px; float: left; padding: 0px 20px 5px 0px;}
ul.ul_menu1 li a:hover { background: url(../images/bk_bot2a.gif) no-repeat 0px 13px;
}
/* EM */
h1 { font-size: 16px; font-weight: bold; color: #f90; margin: 0px 46px 0px 30px; padding: 0px; line-height: 1.1em;} /* was 88 */
h2 { font-size: 16px; font-weight: bold; color: #5B708C; margin: 20px 46px 0px 30px; padding: 0px; line-height: 1.1em;} /* was 88 */
h3 { font-size: 15px; color: #000; margin: 20px 46px 0px 30px; padding: 0px; line-height: 1.1em;
}
h4
{
font-weight: bold; font-size: 11px; font-family: Verdana, Arial, sans-serif; color: #000;margin: 20px 0px 0px; background: url(../images/bul.gif) no-repeat 0px 3px; padding: 0px 46px 0px 30px; text-align: justify;
}
div.div_cont1a h3 { margin: 0 0 10px;
}
h1.h { font-size: 16px; color: #8C9CB3; margin: 0px 0px 7px; padding: 0px 0px 0px 24px; line-height: 1.1em; font-family: arial, sans-serif; background: url(../images/bul.gif) no-repeat;}
h2.h { font-size: 16px; text-decoration: underline; margin: 0px 0px 7px; padding: 0px 0px 0px 24px; line-height: 1.1em; font-family: arial, sans-serif; background: url(../images/bul.gif) no-repeat;} /* was 88 */
em.emor1 { font-style: normal; font-weight: bold; color: #FF9900;}
em.emor2 { font-style: normal; color: #FF9900; font-size: 15px;}
em.emblue1 { font-style: normal; color: #5B708C; }
em.emblue2 { font-style: normal; color: #5B708C; text-align: left; font-size: 13px; font-weight: bold;}
em.emblue3 { font-style: normal; color: #5B708C; font-weight: bold;
}
br.br1 { clear: both; }
br.br2 { clear: both; margin: 0; padding: 0px; line-height: 1px;
}
p.pa1 { margin: 0px }
span.sp_nav { padding: 0px 46px 2px 30px; margin: 0px; font-size: 10px; display: block; color:#0000FF} /* color:was #8C9CB3 DPH*/
span.sp_form1 { display: none; }
span.sp_form2 { color:#f00;;
}
/* A */
a.l0 { margin: 0px;
}
/* bot*/
a.l1:link {text-decoration: underline; } /* color:was #8C9CB3; DPH*/
a.l1:visited {text-decoration: underline; } /* color:was #8C9CB3; DPH*/
a.l1:active, a.l1:hover {color: #f90; text-decoration: underline;
}
a.l2:link, a.l2:visited {color: #f90; text-decoration: none; }
a.l2:active, a.l2:hover {color: #f90; text-decoration: underline; background: #FCEAD0;
}
a.l3:link, a.l3:visited {color: #fff;text-decoration: none; }
a.l3:active, a.l3:hover {color: #f90; text-decoration: none; }
/* text */
/*
a.l4:link, a.l4:visited {color: #f90; text-decoration: none; background: #FCEAD0; font-weight: bold;}
a.l4:active, a.l4:hover {color: #5B708C; text-decoration: none; background: #EEF0F4;}
*/
/* more & back to top, back to list, etc */
/*
a.l5:link, a.l5:visited {color: #f90; text-decoration: none; }
a.l5:active, a.l5:hover {color: #f90; text-decoration: none; background: #FCEAD0;}
*/
/* bot links */
a.l6:link {text-decoration: underline; }
a.l6:visited {text-decoration: underline; }
a.l6:active, a.l6:hover {color: #f90; text-decoration: underline;
}
a:link {text-decoration: underline;} /*color: was #5B708C; */
a:visited {text-decoration: underline;} /*color: was #5B708C; */
a:active, a:hover { color: #f90; text-decoration: underline;
}
/* FORMS */
form { margin:0px; padding:0px; clear: both;}
button, select, input, textarea { font: 11px Verdana, Arial, Helvetica, sans-serif; color: #000;
}
.f_search { border: 1px solid #000; float: left; margin: 2px 7px 0px 0px; width:86px; height: 14px;}
.f_r1 { border: 1px solid #38485C; float: left; margin: 0px 0px 7px 0px; width:86px; height: 14px;}
.f_r2 { border: 1px solid #38485C; float: left; margin: 0px 0px 7px 0px; width:66px; height: 14px;}
.f_r3 { width: 200px; margin-top: 4px;}
.f_1 { border: 1px solid #000; width:200px; height: 16px;}
.f_2 { border: 1px solid #f00; width:200px; height: 16px;
}
div.div_lab1 {float: left; width: 109px; padding: 3px 0px 0px;}
div.div_lab2 {float: left; width: 129px; padding: 3px 0px 0px;
}
.but1{ width: 150px; background: #8C9CB3;border: outset #000; border-width: 1px 2px 2px 1px; color: #000; font-weight: bold; margin: 0px 0px 0px 330px;
}
/* IMG */
img {margin: 0px; padding: 0px; display: block; border:0px;}
img.img1 { float:left; margin: 0px;}
img.img2 { margin: 0px; display: inline;
}
.p_menu { float:left; margin: 0px 18px 0px 0px;
}
.p_print{ border: 1px solid #fff; margin: 0px 12px 0px 0px; }
A:hover .p_print, A:active .p_print { border: 1px solid #8C9CB3
}
/* Helper Classes*/
.underlineit
{
FONT-WEIGHT: underline;
text-decoration: underline;
}
.boldunderlineit
{
FONT-WEIGHT: bold;
text-decoration: underline;
}
.italicit
{
FONT-STYLE: italic;
}
.boldit
{
FONT-WEIGHT: bold;
}
.italicboldit
{
FONT-STYLE: italic;
FONT-WEIGHT: bold;
}
.salesbullet
{
margin:0px 30px 0px 17px;
font-weight:bold;
font-size:13px;
}
can anyone see why this would be happening?
has anyone had any experience something like this before?
I'd be really grateful for your insights!
