|
CSS - Page Wont Print In Ie7, Prints Fine In Ff 2 Or 3
I have several pages on a website I am developing that will not print correctly in IE7. They print fine in FF 2 & 3, Opera, and Safari. In IE7 the page prints the Header, the menu, and the end content on the second printed page, the main content on does not print on printed page 1. If I comment out enough of either the middle or the end of the html page to make it a single printed page document it prints fine. I have tried building the end of the body content using tables but with the same result: only part of the page prints.
Any ideas on what may be causing this behavior or directions in which I should look? Any help will be greatly appreciated as I have run out of ideas. Thanks, John White Similar Tutorialshi i have a page that contains a large html table. this table spans many pages (in internet explorer it spans 6 pages). however, when i view the print preview in firefox it only shows 1 of 1 page, and at the bottom of the page, where i would expect a page break to exist, the table continues on and then off the bottom of the page. basically, it seems to be attempting to render the entire table on to one page, even though it won't fit. has anyone got any ideas how i can make this table print on multiple pages? i've read somewhere that gecko based browsers have a problem with floated content, but i'm sure i've un-floated everything. thanks in advance. dave http://www.refinethetaste.com/step3.htm Can someone tell me why this page appears perfectly fine with ie but appears awfully wrong with firefox. I am almost done with the project, please help..... s.o.s Code:
style>
/*review order*/
#checkoutprocess { width:576px; float:left; margin-right:2px; }
#checkoutprocess .checkoutprocess { float: left; width: 574px; margin: 10px 0; border: #ece7d1 1px solid;}
#checkoutprocess h1 { height:30px; font-size: 18px; color:#716759; line-height:30px;}
#checkoutprocess .checkoutprocess .thdesc { float: left; width:264px; height:14px; font-size: 14px; color:#716759; background-color: #f2efe9; margin:3px; padding:3px; }
#checkoutprocess .checkoutprocess .th { float: left; width:70px; height:14px; font-size: 14px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;}
#checkoutprocess .checkoutprocess .thh { float: left; width:568px; height:14px; font-size: 14px; color:#716759; background-color: #f2efe9; margin:3px; padding:3px; }
#checkoutprocess .checkoutprocess .tddesc { float: left; width:274px; height:80px; font-size: 14px; color:#716759; margin:3px; padding:3px; vertical-align:text-top; }
#checkoutprocess .checkoutprocess .color { float: left; width:70px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px; vertical-align:text-top; }
#checkoutprocess .checkoutprocess .noncolor { float: left; width:70px; text-align: center; color:#716759; margin:3px; padding:3px; vertical-align:text-top; }
#checkoutprocess .checkoutprocess .intprice { font-weight:bold; }
#checkoutprocess .hline { border-bottom:5px solid #ece7d1; margin:10px 0 10px 0; padding:0; }
#checkoutprocess img#updatesbasket { float:left; width: 141px; height: 15px; border: 0px; }
#checkoutprocess img#remove { float:right; width: 52px; height: 15px; border: 0px; }
#checkoutprocess img#contshopping { float:right; width: 141px; height: 25px; padding-right:50px; border: 0px; }
#checkoutprocess img#checkout { float:right; width: 89px; height: 25px; border: 0px; }
</style>
We'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 See here The center column title. It is aligned properly in Firefox but is shifted in Internet Explorer. Ive been trying to figure out various way to fix the problem but cannot find the solution. Any tips ? This is my first css html design and its been quite a struggle. I've been reading about bugs and hacks for ie 6 but recognising them and implementing the changes I'm stumbling on. The pages that look the worst are : efficient-heat net / form and efficient-heat net / services. They have been decimated by ie 6. I've taken out the javascript navigation for validation reasons. I know about conditional comments so if I can I would like to make adjustments to the code rather than finding hacks. What's going on with these pages. Can you give me some suggestions of what I need to do. I appreciate any help, Thanks. Hi All : Currently i'm running in .NET platform together with VB.net and ASP. I faced a problem regarding to the PAGE BREAK html tag. The problem is when i want to print out a report, it will show with scroll bar and the report is very long. So what i have to do is to apply Page-Break-After/Before into the HTML. how am i know if the report already apply the Page Break function or not? And the only style i can use is CSS. Anyone familiar with this? It's urgent !! Hope can get anyone help asap. Regards, JeFFery I am generating a list with PHP that is going to be printed out and hung up for display. I would prefer if the following weren't printed. 1) Top Left - Page Title (I know I can have this disappear by having a blank title, but I would prefer to have one) 2) Top Right - Page URL 3) Bottom Left - Page number (ex: 1 of 2) 4) Bottom Right - Date Is there any way to print the list without these? I wasn't sure if there is some css I can use, or if this is something that the printer prints automatically. Thanks (The relevant subset of my) website is he http://www.smoli.com (URL address blocked: See forum rules) It was designed using FrontPage 2003 (I know, I know - but it was a long time ago and it was the only thing I had access to at the time...). Everything works fine in: - Preview from within FP. - IE8 and IE9 - Latest version of Chrome. But not with Firefox (latest version). Problem is that the table doesn't seem to resize to the screen size, and the scrolling of the logos at the bottom are "all over the place". I am pretty new to CSS, and the code the scrolling logos was inserted as is from (URL address blocked: See forum rules) Any idea what is causing the incompatibility? Many thanks. I'm building a "Coming Soon" page in Dreamweaver. It looks the way I want it to when previewed in Firefox (version 3.6.13), but not in Safari (version 4.1.2). Specifically, my line breaks and the margins on my image are ignored. Here's my code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Quest Sports Medicine</title>
<link href="file://Macintosh HD/Volumes/My GS Drive/global.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.center-wrap p {
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
color: #000;
font-size: 30px;
line-height: 35px;
padding: 0px;
float: left;
margin-top: 15px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.center-wrap h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 66px;
font-weight: bold;
color: #942610;
text-align: center;
line-height: 64px;
margin-top: 83px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.center-wrap img {
margin-top: 47px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 248px;
}
}
-->
</style>
</head>
<body>
<div class="all-wrap">
<div class="center-wrap">
<h2>NEW WEBSITE<br />
COMING SOON</br></h2>
<p>For information on the products we sell, how to place an order or any questions regarding recent orders, please call us at (717)-687-7178<br />
or toll-free at 1-800-387-1067. You can also reach us at our new e-mail address, questsports@comcast.net</br></p>
<img src="images/qsm-logo.gif" width="436" height="260" alt="Quest Sports Medicine logo" />
</img></div>
</div>
</body>
</html>
Any thoughts on what I need to change? Thank you. if you take a look at http://www.cherrysociety.com/mag/art/ you'll see it works fine in IE, but when it is viewed in firefox it's so messed up. can anyone help me? tell me what i've done wrong? the css is at http://www.cherrysociety.com/mag/style.css thanks guys, i appreciate it a lot. I just finished an element for a redesign of my website. I open it in Firefox, working. I open it in Safari (for Windows), fine. I open it in IE, I almost cry. My entire page is screwed up! I can't tell if it's the floats, the margins, the lists (I think it's the lists). Anyways, does anyone know whats wrong so I could fix it? http://www.politinks.com/topbar Any help would be appreciated. Thanks! I have a three column layout page which looks fine in IE as well as Firefox. But if I try to print the page, it prints the entire page in one column. Also, backgrounds are not printed. Searching on google, it seems CSS is the cause behind this. I could not find any solution though. Here is my CSS. Code: html {overflow-y:scroll;}
body {
font-family: Arial, Helvetica, sans-serif;
color: #354963;
font-size: 8pt;
font-weight: normal;
padding: 0;
margin: 120px 0px 0 0;
}
#wrapper {
position:absolute;
top:0;
left:0;
margin:0;
padding:0;
background:#003333 url(/corporateBanner/corporateBanner.jpg) 0 0px;
width:100%;
height:100px;
font-size:8pt;
}
#bannerWrapper {
position:absolute;
top:0;
left:0;
z-index:2;
}
#bannerTitle {
position:absolute;
top:28px;
left:80px;
color:white;
font-size:26pt;
width:600px;
margin:0;
border:0;
font-weight:normal;
z-index:2;
white-space: nowrap;
}
.hiddenLabel {
display:none;
}
#topmainMenu {
position: absolute;
right: 0;
}
#topmainMenu a:hover {
text-decoration:underline;
}
#mainTabs {
position:absolute;
top: 82px;
left: -6px;
width: 600px;
margin: 0px;
padding: 0px;
}
#mainTabs ul li {
float: left;
padding: 0;
margin: 0px;
list-style-type: none;
}
#mainTabs ul li a, #mainTabs ul li a:visited {
font-size:8pt;
font-weight:bold;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
width:105px;
text-align: center;
height:19px;
display:block;
}
#mainTab1 a:link, #mainTab1 a:visited, #mainTab2 a:link, #mainTab2 a:visited, #mainTab3 a:link, #mainTab3 a:visited, #mainTab4 a:link, #mainTab4 a:visited, #mainTab5 a:link, #mainTab5 a:visited, #mainTab6 a:link, #mainTab6 a:visited, #mainTab7 a:link, #mainTab7 a:visited {
background: transparent url(../images/tabs/primary/tabBG.gif) top left no-repeat;
color: #FFFFFF;
}
#mainTab1 a:hover, #mainTab2 a:hover, #mainTab3 a:hover, #mainTab4 a:hover,#mainTab5 a:hover,#mainTab6 a:hover, #mainTab7 a:hover {
color: #000000;
background-position: left -19px;
text-decoration: none;
}
#T1 #mainTab1 a:link, #T1 #mainTab1 a:visited, #T2 #mainTab2 a:link, #T2 #mainTab2 a:visited, #T3 #mainTab3 a:link, #T3 #mainTab3 a:visited, #T4 #mainTab4 a:link, #T4 #mainTab4 a:visited, #T5 #mainTab5 a:link, #T5 #mainTab5 a:visited, #T6 #mainTab6 a:link, #T6 #mainTab6 a:visited, #T7 #mainTab7 a:link, #T7 #mainTab7 a:visited {
color: #000000;
background-position: left -19px;
}
#subMenu {
position:absolute;
top:100px;
left: 0px;
margin: 0;
padding: 0;
background: #FFF;
height:15px;
width:100%;
}
#subMenu ul {
border: 0;
margin: 0;
padding: 0;
text-align: center;
}
#subMenu ul li {
float: left;
padding: 0;
margin: 0px 10px 0px 7px;
list-style-type: none;
}
#subMenu ul li a {
float: left;
padding: 0;
margin: 2px 1px 0px 0px;
color:#000066;
text-align: center;
display: block;
line-height: 16px;
font-size: 8pt;
font-weight:normal;
text-decoration: none;
width:auto;
height:15px;
letter-spacing: 0px;
}
#subMenu ul li a:hover {
text-decoration:underline;
color:#0A3C91;
}
#subMenu ul li a.current {
text-decoration:underline;
font-weight:bold;
color:#0A3C91;
}
#dateStamp {
position:absolute;
right:5px;
top:83px;
letter-spacing:0px;
font-size: 8pt;
font-weight:bold;
z-index:2;
}
#subContentWrapper {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width:100%;
height:auto;
border-top:1px solid #000;
background: #fff;
line-height:normal;
}
/* For the text under column */
#subContentWrapper p {
padding: 0;
margin: 5px;
font-size:8pt;
}
/* IE7 1px rounding error. margin-left:-1px; */
/* 25% + 50% + 25% does not work in IE6. (24.8% + 50% + 24.8% works). Overwrote the code in the Home Page. */
#main3Column {
float: left;
width: 50%;
}
#leftColumn {
float:left;
width:25%;
margin-left:-1px;
}
#rightColumn {
float:right;
width:25%;
}
.columnBoxLeft {
padding: 0px 0px 0px 6px;
margin: 5px 0px 5px 0px;
}
.columnBoxMiddle {
padding: 0px 5px 0px 5px;
margin: 5px 0px 5px 0px;
}
.columnBoxRight {
padding: 0px 5px 0px 0px;
margin: 5px 0px 5px 0px;
}
/* Clears the column floats so the footer can center directly below them. */
.cleaner {
clear:both;
height:1px;
font-size:1px;
border:none;
margin:0;
padding:0;
background:transparent;
margin-top: -1px;
overflow: hidden;
}
#revdate {
padding: 0px;
font-weight: normal;
font-size: 8pt;
height: 17px;
width: 100%;
text-align: center;
color: #354963;
}
/* Footer styles */
#mainFooter {
margin: 0px;
padding: 0px 0px;
background-color: #363459;
color: #fff;
font-weight: bold;
font-size: 7pt;
height: 25px;
border-top: 1px solid #000066;
text-align: center;
float: left;
clear:both;
width: 100%;
}
#mainFooter p {
margin: 0;
padding:0;
background: transparent;
color:#FFFFFF;
font-size:7pt;
font-weight:bold;
width:220px;
}
.rightFloat {
float:right;
text-align:right;
}
.leftFloat {
float:left;
text-align: left;
}
#mainFooter p.leftFloat {
margin:6px 0 0 4px;
}
#mainFooter p.rightFloat {
margin:0px 5px 0;
}
#mainFooter p span {
visibility: hidden;
}
Here is a simple page that I put up using the above CSS (main.css) which has the issue I described above. Use print preview and you will see all the 3 columns one below another. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Page</title> <link rel="stylesheet" type="text/css" href="main.css" media="screen"/> </head> <body> <div id="subContentWrapper"> <div id="leftColumn"> <div class="columnBox"> <h2 class="channeltitle">Left Column</h2> <p>Your Text Here</p> </div><!--/columnBox--> </div><!--/leftColumn--> <div id="main3Column"> <div class="columnBox"> <h2 class="channeltitle">Main Column</h2> <p>Your Text Here</p> </div><!--/columnBox--> </div><!--/main3Column--> <div id="rightColumn"> <div class="columnBox"> <h2 class="channeltitle">Right Column</h2> <p>Your Text Here</p> </div><!--/columnBox--> </div><!--/rightColumn--> </div> </body> </html> hey all, my pages do not print, err they only produce a white page. i have my css set to all media - maybe there is sth. wrong with my jungle of css? i hope someone can help me out on that one. the site is: http://www.chocolateriewanders.com Hello, I have tried to make a print page using CSS to set the display to none for areas that I don't want printed. This works fine in Firefox but Exploder always pritnts a blank page first. Has anybody had similar problems? Thanks I have to design a site using a 750 pixels table. Of course, when I print the text, my text get cut off on the right hand side. Using a Print style sheet, is there any ways to avoid loosing the text on the right. Everywhere I look suggest to design into a 600 pixels table but they really want it to 750. Thanks for any help. I added a tab content js to my main page. I did not change anything at css file. Area where I added tab content js works fine with Firefox but not with Internet Explorer. What happens with IE is that contents at the center of the page moves under. I am not sure if I clearly described the problem. Please take a look at: http://www.pearl.ru/isdunyasi/ In the html below I try to print (click print-icon) all letters "a" on page 1 and all letters "b" on page 2. For this I use the css .break (pagebreak-after: always). But I don't get it working. Could some-one help? This is the HTML: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <style type="text/css"><!-- .break (pagebreak-after: always) --> </style> </head> <body bgcolor="white" text="black"> <br>a <br>a <br>a <br>a <br>a <br>a <br>a <br>a <br>a <br>a <br>a <br>a <br>a <br>a <br>a <br>a <br>a <br>a <br>a <br>a <br>a <br>a <br class="break"> <br>b <br>b <br>b <br>b <br>b <br><br> <a href="javascript:print();" onfocus="this.blur();"><img id="print" src="http://www.inspiration-company.nl/printnew.gif" alt="Print page " width="29" height="29" border="0" style="position: absolute; left: 100px; top: 100px;"></a> </body> </html> Hi, Is there anyway to specify the printed page orientation using CSS? e.g. make the printed copy landscape or portrait. thanks! |
|||||||