PDA

View Full Version : CSS Tiny Printer Friendly CSS Bug



thedaveyb
January 23rd, 2009, 06:21 AM
Hi Kirupians - I have a puzzler thats cropped up. I dont claim to be an expert on printer friendly css and i think this is my 3rd attempt ever - seems to have gone ok aside from one little bug which is all my headings (h1, h2, h3) are right aligned when checking on print preview of infact printing!..

There is nothing from my screen CSS causing this as that is set to screen and my print CSS has nothing at all right aligned! very puzzled.. :stare:

Site: worldwideestates.co.uk (http://www.worldwideestates.co.uk)



p, td, li, ul,ol, h1, h2, h3 ,h4 ,h5 ,h6, label, input {font: normal 12px "arial", Arial;}
body {margin: 0px; padding: 0px;font: normal 12px "arial", Arial;color:#000; text-align:left;}
#main_container {}

/* HIDDEN ELEMENTS / IDS ------------------------------------- */
#header {display:none; }
#top_nav {display:none;}
#banner {display:none;}
#left_column {display:none;}
#footer { display:none;}
#filter_box { display:none;}

/* NEEED TO KEEP ------------------------------------- */
#back_container {}
#right_column {width: auto; margin: 0 5%;padding: 0; color:#000; border: 0;float: none !important;color: black; background: transparent; text-align:left; margin-left: 10%;
padding-top: 1em;}

/* ------------------------HEADERS & TEXT STYLES---------------------------*/
h1 {background: white;font-size: 18pt;}
h2 { background: white;font-size: 15pt;}
h3 { background: white;font-size: 14pt;}
h4 { background: white;font-size: 12pt;}
h5 {background: white;font-size: 12pt;}
h6 {background: white;font-size: 12pt;}
p {background: white;font-size: 11pt; }
ul {}
li { }
em {color:#FF0000; }

.property_box { float:left; width: 20%; margin:10px;}

/* HIDDEN ELEMENTS / PESKIES ------------------------------------- */
.spacer { display:none;}
.grad { display:none;}
.full_details { display:none;}
.help {display:none;}

fasterthanlight™
January 26th, 2009, 12:56 PM
from what i can see, #right_column is floated right, and your logo is floated left.

this makes your <h1> float around your logo all ugly-like when I print preview,

clear all your floats, or set float: none; to floated elements from within your print.css