|
CSS - Print Stylesheet Not Displaying All Of The Text.
Hi
I am really struggling to get my print stylesheet as it is. The site is http://calibrehr.com/new/ and the stylesheet is http://calibrehr.com/new/print.css If you print preview say the home page in firefox it cuts off the text at the bottom. IE displays this page ok. Could someone please give me some help with reagrd to this problem, and any advice on making print stylesheets!! Thanks alot! Similar TutorialsWe're having a weird problem with a print stylesheet - a little bit of the javascript menu appear on the printed over the top of the content. eg: (http://www.lawhandbook.sa.gov.au/ch10.php ) - Print Preview this page and you will see "Chapters A-Z" in the middle. This seems to happen in all browsers. We've looked into many css solutions to the issue - but to no avail - we cant make the damn thing disappear. One long winded solution is to change the stylesheet to be built dynamically - so a call to ch10.php=true would build the page differently. But this seems to defeat the purpose of using a print stylesheet in the first place. Another long winded soltuion is to change the (Rather old) menu script - but that not really an option in this case either. So my question is - What happens when a browser prints a page? Does it send anything back to the server indicating it is loading the print stylesheet instead? (eg: Some sort of request variable) Or does the client's browser simple request the CSS file and reformat the page it has already downloaded? If so I could detect this event with PHP or Javascript to not load the offending menus when the print css had been loaded Hi Could someone assist me in making a print stylesheet for this site please! http://calibrehr.com/new/ What I need is: just the logo to display (remove nav) The text in the orange block to span the width of the page Remove subnav Some how diplsay the text that is in the purple boxes below the main content text I am stuck as to what to do and could really appreciate some help Many thanks! Can you only exclude elements from a Print stylesheet? I'd like to print only a table of data and nothing else on the web page in a print style sheet. Hiya, theres a website I'm creating a print stylesheet for which includes the company logo in the header, with a footer of contact details. problem is, the website is all static pages and 100 odd pages, so as I'm having to deal with the static state of the site for now, is there a way I can have in the Print stylesheet or in the CSS where the logo can be inserted in a header and a footer created with text? hope this makes sense? One of the websites, that I frequently visit, uses different stylesheet for printing. I want the same (i.e. "screen.projection") stylesheet to be used while printing. I will like to have a bookmarklet that will disable the "print" stylesheet mentioned on the second line in the following example. <style type="text/css" media="screen,projection">/*<![CDATA[*/ @import "/style/main.css"; /*]]>*/</style> <link rel="stylesheet" type="text/css" media="print" href= "/style/commonPrint.css"/> Shantanu Oak shantanuo@yahoo.com Hi all I am using a style sheet with the print media type to controll how my site looks when it is printed out. It works very well the only problem being that I have <div>s which make boxes for the content and I would like for the boxes to not get split upon diffrent pages. Idealy I would like to make it so that if the the <div> is going to split over two pages it just gets put at the start of the next page. This probaly isn't possiable but you never know. Any Ideas would be helpfull Nick Carlevaris Quote: Dan Cederholm of SimpleBits: It's important to note that the cascading effect of CSS still applies, and alternate style sheets work just like any other style sheet, in that only common rules are overridden when the alternate styles are active. So if we had layout, positioning, and other site-wide rules in default.css that weren't repeated in the alternate style sheets, those default rules would still work. I'm making a site that has a default stylesheet with a fixed layout and an alternative one with a fluid layout. The problem I'm having is the alternative sheet not inheriting css from the default stylesheet even though the rules are not overridden. At the moment, my alternative stylesheet is an exact copy of the original (everything included) with only 3 width values changed to percentages. Theoretically, I should be able to only include these three rules alone in the alt sheet, as rules are carried over from the default sheet unless overridden. However, when I do try to reduce the alt sheet to just: Code: #container { width: auto; }
#main { width: 65%; }
#navbar { width: 30%; }
all unincluded formatting is lost. Am I doing something wrong? Cheers, Sam. My logo is defined as a background image in my .css. It appears in IE when I print/print preview, but in FF it does not. This is the .css code for the logo div: #logo { float: left; margin-left:1px; width: 200px; background:url(../images/mm-logo.jpg) no-repeat; height:50px;} Any ideas or suggestions? I have a very strange problem. My firefox is ignoring the changes I made to the style sheet. I have this in my webpage and the style.css file location is right (one directory up). <link href="../style.css" rel="stylesheet" type="text/css"> Because it's ignoring my new changes, I deleted everything in my style.css file, and the page still displays as though the file exists. However, if I delete the above line, then the page will display without any style. IE is loading with the changes I made though. I have also checked my stylesheet with the W3C css validation and it has no error. So, any body know why this is happening? I created a print.css for my site, but it still does not work and would appreciate any help. Here's my site: http://seniormobility.org/test/actionplan.html Here's the print.css code: Code:
body, .maincopy {
background-color: transparent;
font-size: 12pt;
font-family: "Times New Roman", Times, serif;
color: #000000;
}
#navcontainer, #header, #header_pic, #text_control, #header_breadcrumb #search_box {
display: none;
}
#container {
width: 100%;
margin: 0;
float: none;
}
#pagename, #main_content, #main_content_home {
border: 0;
width: 100%;
margin: 0 5%;
padding: 0;
float: none;
overflow: auto;
}
When I do a print preview or actually print in both IE8 and FF, all the text gets cut-off on the right. I'm not sure what I'm missing. Thanks in advance for everyone's help! Does anyone know if it is possible to get text to print white with CSS when printing a page? I know generally you want text black, but this text will be positioned over a black graphic. It seems even when you set the color to white and set it to important in a print style sheet, the print driver sets it to black. Is there any way with a print style sheet to force it to white? Hi all, Simple issue - got a form with textboxes whose screen width will be less than the max width (for design and spacing purposes). However, I'd like the print stylesheet to make the entire contents of the textbox visible when they print. A year or two ago, setting input{width: auto;} in the print stylesheet worked fine, but it seems the newer browsers (IE 6+. latest FF) do not support this method. Any thoughts on how to do this? Thanks, AJ Hi there...First post in this forum cause Firefox (and mozilla / netscape) are driving me mad! Please consider the following code: Code: <html>
<head>
<style type="text/css">
@media print {
p {font-size:11px;text-align:justify;}
table {width:100%;}
}
</style>
</head>
<body>
<table width="770" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFCC">
<tr>
<td>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam molestie, tortor id tempor fringilla, ante massa consequat dui, eget fermentum ante dolor sed felis. Curabitur mollis, velit sit amet lobortis pulvinar, mi lorem condimentum metus, cursus malesuada lectus leo in purus. Suspendisse vehicula, nisl ac varius iaculis, purus felis sodales lorem, in porttitor massa risus a odio. Cras urna felis, sagittis bibendum, ultrices vel, accumsan ac, pede. Maecenas felis nisl, rhoncus non, imperdiet in, tincidunt vitae, ante. Vestibulum cursus, elit non rutrum eleifend, arcu ligula bibendum velit, eget pharetra dui ipsum et tortor. Praesent lectus felis, consectetuer a, varius fringilla, elementum quis, diam. Morbi posuere sem eget odio. Pellentesque imperdiet tellus eget augue. Aliquam et tortor et libero nonummy tristique. Sed feugiat pellentesque sem. In hac habitasse platea dictumst. Vivamus a ipsum eu odio fringilla scelerisque. Ut et neque. Sed fermentum neque nec pede. Morbi enim erat, tempor nec, porttitor eu, tempus ut, nunc. Pellentesque lacinia dapibus urna. Curabitur leo tortor, cursus quis, semper quis, luctus ac, quam. Phasellus sit amet nisl. Nullam molestie nonummy lorem. Etiam consectetuer, ante in lacinia molestie, tellus nisl tincidunt dui, in commodo lectus elit ut elit. In ornare fermentum ante. Nullam felis. Maecenas tempor, lectus vel dignissim tincidunt, metus erat feugiat odio, eu dapibus mauris orci vitae enim. Etiam quis quam vitae risus aliquam iaculis. Ut nunc nulla, hendrerit ut, auctor id, ullamcorper a, risus. Integer fringilla, erat eu interdum imperdiet, lorem purus fermentum wisi, at mattis lectus nisl sit amet ante. Cras dolor. Nunc elementum quam at ligula. Maecenas ut mi ornare neque suscipit vulputate. Praesent ornare. Pellentesque nonummy posuere massa. Morbi sed risus et purus eleifend pulvinar. Proin suscipit ultricies enim. Morbi luctus. Nam quis sem. Quisque mattis. In laoreet velit eu nunc.
</p>
</td>
</tr>
</table>
</body>
</html>
This is basically a reconstruction of an existing problem of a far more complex design...in any case, if you try to print->Preview from Opera or IE 5+ everything is sweet...However, Firefox (and the other Gecko browsers) will not properly justify the text when previewing. More precisiely: Firefox will wrap text over 12px correctly yet for small text, the p block will not wrap properly and some text will be cropped. I'm not fussy about justification but even when I removed it I would get the same problem. I'm sure there's a perfectly logical solution to this problem. Maybe the width:100% gets inherited by the td and p but that should not affect the layout...Despite my various experiements of chaging the width and the wrapping properties, I could not solve this. I'm still learning the intricasies of block elements in CSS2 so I would definitely appreciate any help! Thanks in advance, Angelos I have pages the when viewed for print in Firefox, show the page going below the page margin and not continuing to the next logical printed page. This image below, shows better than I can explain. Has anyone ever seen this before?...Any ideas how to make it preview and print correctly? Hi guys .... I've been all over google looking for the answer and nothing I've tried works. I'm trying to make a print-friendly css page but my browsers (FF and IE7) both ignore the CSS and apply their own standards to it no matter what I do, it's driving me positively INSANE because it feels like I've done everything according to the instructions I found online for print CSS. Could you please take a look at my code and make some suggestions? You'd be saving my sanity. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)"> <html xmlns="(URL address blocked: See forum rules)" lang="en" xml:lang="en"> <head> <title>CLOColors3</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="mainstyle.css" type="text/css" /> <link rel="stylesheet" href="mainstyleprint.css" media="print" type="text/css" /> the print css: Code:
@media print {
html{
height:auto;}
body{
background-color:#FFF;}
#header{
display:none;}
#body{
position:relative;
background-color:#FFF;
background-image:none;
height:auto;
width:auto;
left:0px;
top:0px;
z-index:0;
padding-bottom:0px;}
#textbox{
position:relative;
overflow:visible;
float:none;
margin-left: 0px;
top: 0px;
width:auto;
bottom:0px;
background-color:#FFF;
border:hidden;
border-color:#FFF;
z-index:0;
padding:0px;}
#textbox img{
display:none;}
.searchbar{
display:none;}
#linkbar{
display:none;}
.map{
display:none;}
.video{
display:none;}
#linktext{
display:none;}
#clear_both{
display:none;}
#menu{
display:none;}
#footer{
display:none;}
}
Currently the main CSS is being used and none of the elements I set to be "hidden" are hidden. Help!!! UPDATE: Ok, so IE seems to be PARTIALLY responding to the print CSS. It responds to all the "display:none;" commands but refuses to format the #textbox div according to my instructions, a border persists and the div has an overflow scrollbar for some reason. Firefox is still unresponsive. I was wondering does anyone know where I can obtain the Internet Explorer 6 stylesheet for Windows XP? The UI components in IE6 look different in Windows XP than IE6 for Windows 2000. I would like to obtain the stylesheet if it is available somewhere. Thanks for your help. Val I have three different css Stylesheets. Now I want to give access to my users to change their required styles using dropdownlist. And next time when the user is login in the same last selected style sheet should be displayed to him. How can i do this please help me its urgent ? Hi people, I am completely new to programming and have only spent this weekend learning it! I have managed to create a decent website already, however i am stuck at a point. On my main page, i have attached a CSS stylesheet with all the formatting for my page. My problem however is that when i try to format one section (<div id="gallery">) the formatting messes with the rest of the page. Is there a way that i can assign a style sheet to only that <div id="gallery"> without it applying to the entire html page. Any help is greatly appreciated! Thanks Chris I'm fairly new at web development and pretty much a newbie at using CSS. I noticed on foxnews.com that they use a parameter with the CSS file. I've did searches on this but not turned up alot. Code: <LINK REL=STYLESHEET TYPE="text/css" HREF="/css/mainStyles2004.css?v2"> <LINK REL=STYLESHEET TYPE="text/css" HREF="/css/rootStyles.css?v3"> I'm assuming the ?v2 and ?v3 are PHP like paramters. I looked at the CSS file using the firefox web developer toolbar and I didn't see any referance to v2 or v3 in those files? Can anyone explain this to me? |
|||||||