How to fix some issues with printing very basic HTML - css

I have some very simple HTML:
<div id="advisor">
<div id="print_this_container">
<form>
<input type="button" value=" Print this page "
onclick="window.print();return false;" />
</form>
</div>
<div id="top_section">
<div class="left_box" style="position: relative;">
<div id="avatar_container">
<img class="avatar" src="<%= #advisor.avatar_url %>" />
</div>
</div>
<div class="right_box">
<h2><strong>Council on Emerging Markets</strong></h2>
</div>
</div>
</div>
The associated CSS is:
#advisor{
width: 800px;
}
#top_section{
border-bottom: 1px solid #666 !important;
height: 200px;
}
.right_box{
float: left;
padding-left: 25px;
padding-top: 50px;
width: 550px;
}
.left_box{
background: #ccc;
width: 200px;
float: left;
text-align: center;
height: 100%;
}
img.avatar{
width: 150px;
}
And in my print.css
#advisor{
width: auto;
}
#print_this_container{
display: none;
}
It looks great in my web page. However, when I print it the following issues occur:
The top section border disappears
The image shrinks
The right box is displayed under the
left box, it does not float
The left box background color
disappears
Does anyone know how to fix these issues?

There are a number of problems with printing from within a browser. A lot of the printing-specific stuff doesn't work on most browsers and even where it's supported by multiple browsers, it is handled differently
We've jsut spent two weeks trying to print labels using a browser - in the end, we've gone for multiple solutions which fail as gracefully as possible...
Firstly, we detect silverlight and flash - if either is present, we use them to print.
Next, we have a piece of code which loads a web browser in memory on the server and takes a screenshot of the page at a specific URL - this generates an image which we then return to the client for printing. This is okay for our scenario but you might want to check mem usage/etc. for high volume sites.
Some things we've found: Page margins are a REAL pain (especially for labels!). It seems that only certain versions of Opera will allow you to modify page margins from CSS
Background images and colors aren't usually printed by browsers (to save ink) - There's an option in most browsers to enable printing BG.
In firefox look in about:config
print.printer_<PrinterName>.print_bgcolor
print.printer_<PrinterName>.print_bgimages
In IE I think it's under File->Page Setup...
Obviously, neither of these help you much as they can't be set by the site itself - It depends who the users are going to be whether or not you can ge tthis set intentionally. Failing that, you might try using a normal non-background image placed behind your content?
In my experience float doesn't work on printing - However, it's been a while since I've tried and it's possible this will now work as long as you provide an explicit width for your page (100%?) at present, I think most browsers use shrink-to-fit as default on print media.
Page width is another interesting one - I've only found very limited "width" properties that seem to work - at one point I almost resorted to tables. So far percentages seem to work fine, auto doesn't.
Try having a look Here and Here for some solutions and Here for a browser compatability chart

Related

Image CSS not changing for iPad kindle from MOBI KindleGen

I'm writing an ebook in HTML and converting to MOBI with Kindlegen. I want to make sure the images never take up the whole page. However some images are doing just that.
I've tried multiple CSS styles but nothing seems to change. I'm testing on Kindle Previewer, iPhone X, kindle paper white (older device) and iPad. All these devices seem to react to CSS differently and the iPad seems to completely ignore my image styles. No matter what I set the iPAD images don't change. How can I make sure the images are never too large? I want the image to be small enough so that text is also on the same page. Ideal never larger than about 30% of the screen.
I've tried setting a percentage
width: auto;
height: 30%;
and setting em
width: auto;
height: 20em;
I get an error from Kindlegen if I use max-height
.image {
width: auto;
height: 30%;
}
.centerImg {
text-indent: 0;
margin: 1em 0 0 0;
padding: 0;
text-align: center;
}
<!-- Page 29 -->
<p class="centerImg">
<img class="image" alt="lock" src="images/page29.jpg" />
</p>
<p class="collector">
Text
</p>
<br />
<p class="description">
Text
</p>
<div class="pagebreak"></div>
What's the best way to do this?
CSS with ebooks on Amazon can be a bit daunting. I've even seen major bestsellers where the layout didn't work out as intended. Although I've never gotten an ebook to look exactly the same across all devices, I have been able to size my images satisfactorily. I use the free program Sigil for editing, then convert to .mobi with Calibre.
Because CSS can be so unreliable on ebooks, I sized the image in the HTML itself:
<div align="center"><img height="148" src="../Images/stars-300.jpg" width="200"/></div>
<br/>
<h1 class="cinz" id="sigil_toc_id_21">-21-</h1>
<br/>
<h1 class="toocinz sigil_not_in_toc">Between Worlds</h1>
Below is an image of the above code on Kindle Paperwhite. On the iPad, the image is a bit smaller, and some of the spacing is different, but it looks close enough. Another trick I've used to 'force' the ebooks to use your styling, is to use two CSS stylesheets. The first one simply refers to the second, "real" one. This can get around some of the default styles that override custom styles. I'm not sure how well it's worked, but it hasn't hurt:
Style0001.css has only this line:
#import url(../Styles/Style0002.css);
Style0002.css is where all my actual styling is. All my book pages link to the first stylesheet:
<link href="../Styles/Style0001.css" rel="stylesheet" type="text/css"/>.

Need image to automatically resize to browser window in IE 8

I created some pages to display a simple picture gallery, just the picture in the middle with next and back to click on either side of it. The picture sizes average about 800X1050, which fit great on my 1920X1200 monitor. What I needed was a way to automatically resize the picture to the browser height for use on smaller monitors, and I managed to get that to work after much searching on this site and others. I tested this on my wife's laptop and was happy with the results. However, when I tested it at work on our IE8 browsers (don't ask me why...), it doesn't work. Some of the people I will be sharing this gallery with will have to view it on our woefully outdated computers, so I've been trying the past couple of days to get it work and I can't. Here's the sample code I currently have for each of the gallery pages. There could very well be some unnecessary / redundant bits as I cobbled this together from many sources. Any help for this problem, and possibly even any improvements would be greatly appreciated!
<html>
<title>Picture Gallery</title>
<head>
<style>
.numbering {
vertical-align: top;
}
img {
max-height: 100%;
vertical-align: middle;
}
</style>
</head>
<body bgcolor="silver">
<center>
<img src="10.png" class="numbering">
<img border="0" src="back.png">
<img src="picture.jpg">
<img border="0" src="next.png">
<img src="spacer.png" class="numbering">
</center>
</body>
</html>
As the Max-width property works in ie8, Use width: inherit; to make it work with pure CSS in IE8.
like this
img {
width: inherit; /* This makes the next two lines work in IE8. */
max-width: 100%; /* Add !important if needed for the code to work. */
height: auto; /* Add !important if needed. for the code to work */
}

Div element size changes when printing in Chrome

I'm writing a page that is meant to be printed and styling is different from the rest of the pages in my application. Essentially I'm trying to create a wallet card with login information for a user to print out, cut, and keep with them.
I've only tried printing my login card with chrome and IE. IE get's it perfectly but chrome unfortunately makes the card too big. Not sure if it matters (I'm not a CSS expert) but I tried using different units; inches, pixels, and points.
When I use the developer tools in chrome, I see that the pixels are calculated correctly. I checked that to see if the browser was adding additional padding inside the div.
Here's what I have for the login card elements.
<div id="divLoginCard">
<div id="divLoginCardHeader">
<h3>User Login - <span id="spnUserName"></span></h3>
</div>
<div id="divLoginCardContent">
<div class="fieldRow">
<span class="fieldLabel">Website:</span>
<span class="fieldValue">http://www.xxx.zzz</span>
</div>
<div class="fieldRow">
<span class="fieldLabel">ID:</span>
<span class="fieldValue" id="spnUserID"></span>
</div>
<div class="fieldRow">
<span class="fieldLabel">Contact's Name:</span>
<span class="fieldValue" id="spnContactsName"></span>
</div>
</div>
</div>
Here is my CSS styling. I'm trying to achieve a physical size of 3.5" x 2" which is a standard US business card size.
#divLoginCard
{
margin:0 auto;
width:252pt;
height:144pt;
border-style:dashed;
border-color:gray;
}
#divLoginCardHeader
{
text-align:center;
}
#divLoginCardContent
{
margin-left:25px;
margin-right:15px;
padding-top:15px;
}
.fieldRow
{
margin-bottom: 3px;
display: table;
width: 100%;
}
.fieldLabel
{
font-weight: bold;
width: 96px;
text-align: left;
display: table-cell;
}
.fieldValue
{
min-width: 100%;
display: table-cell;
word-wrap: break-word;
width: 200px;
}
body
{
font-family:Arial;
}
Naturally, I would prefer to have a cross browser solution for this where I don't have to use a lot of browser specific style rules but that may not be possible in this case.
Do I need some sort of CSS reset in order to properly size this for printing with any browser?
UPDATE
Chrome renders my html as a PDF document when it is printed. I noticed that the print dialog in chrome is simply a modal window on top of the page. I checked out the elements in developer tools and the print preview is a pdf document. The html provides the source URL (chrome://my_path/print.pdf) which is the full document that is printed by a printer.
SO, long story short; my issue seems to be how chrome renders my html as pdf. Is there a way to control how it renders the html or maybe some chrome friendly CSS that I could use?
Try the #media print specification in your CSS. Chrome is probably overriding your on-screen CSS with print CSS that sizes the elements to fit the printed page.
#media print {
/* put your fixes here */
}
I think this is more likely to be the issue than that Chrome is translating to pdf.

Checkbox with label in the middle

I need to figure out how to to put label text next to checkbox button. I need the text in the middle of the checkbox button. I always got the checkbox a little above the text or little below it. Hard to get it exactly in the middle. When I fix in to the middle in one browser, in other browser it doesn't exactly in the middle. There is always a pixel or two that ruins it.
Here's the fiddle
http://jsfiddle.net/JhPHm/
<style>
.field input
{
margin: 0;
padding: 0;
vertical-align: top;
}
.field label
{
margin: 0;
padding: 0;
vertical-align: top;
font: normal 12px/14px arial;
}
</style>
<div style="padding: 30px;">
<div class="field">
<label for="x"><input type="checkbox" id="x" name="x" value="1" /> Text in the middle</label>
</div>
</div>
Please help me get the text in the middle in all browsers. Here a picture with the differences:
http://img708.imageshack.us/img708/5410/checkbox.png
Instead of vertical-align:top, try vertical-align:middle. It may help a bit, but input elements are notorious for being uneven across browsers.
Aligning input elements is tough, and sometimes nearly impossible.
If the problem is that it's misbehaving in old browsers, consider that people browsing the web with these browsers will stumble upon misaligned checkboxes on more places than just yours. They are browsing the web while it's crumbling around them so to speak. They won't care because they either know they're using an old browser or they don't notice because all sites show these tiny glitches.
If you're going to have to add all sorts of tweaks and fixes for various browsers to get to an acceptable end result, also consider that all these tweaks add to the size of your CSS and to the complexity making it tougher to maintain in the future.
In the end for me, this stuff depends on the audience, the budget and obviously the amount of checkboxes. ;-)
The way I've hacked around this is to use relative positioning, like this:
input[type="radio"], input[type="checkbox"] {
cursor: pointer;
line-height: normal;
margin: 0px;
position: relative;
top: -3px;
}
For example, if you want to shift them up 3 pixels. Like you've pointed out above, you might get different results in different browsers.
In this situation, Firebug or Chrome Developer Tools is going to help you a lot. There may be some garbage you're inheriting from elsewhere. Like in the example above, I set the margin back to 0px because something higher up (and unavoidable) in the CSS structure was setting a margin of 4px on all input and screwing me.
Good luck!

CSS Float Working in All Browsers Except IE

I have a website that renders perfectly in Safari, FF, Chrome, and Opera. However, in IE, my website renders slightly off.
HTML:
<div align="center" id="headerdiv"><div id="log"><font id="subtitleAttribs" onclick="login()">Login أدخل حساب</font></div>
<a class="infoHme"><font id="titleAttribs" onclick="home()">T h e<font color="#999999" size="6px"> | </font>A r t i s a n a t<font color="#999999" size="6px"> | </font>N e t w o r k</font><span>Home دار</span></a>
<div id="lang"><font id="subtitleAttribs" onclick="arb()">العربية</font><font color="#999999"> | </font><font id="subtitleAttribs" onclick="eng()">English</font></div></div>
CSS:
#log
{
float: left;
padding: 5px;
}
#lang
{
float: right;
padding: 5px;
}
#titleAttribs
{
color: #6699cc;
font-size: 26px;
}
#headerdiv
{
background-color: #faf8cc;
margin: 0px 45px 0px 45px;
}
In my code snippet there are four parts. First, "headerdiv" is the container. Second, "log" is the div that should be on the left. Third, "titleAttribs" is text that sits in the middle. Fourth, "lang" is the div that should be on the right.
"log" and "lang" float so that they are on each side of the "titleAttribs" text. My problem is that in IE "lang" ends up rendering below "log" and "titleAttribs" on the right. I test my code with a Mac so it is hard for me to test in IE. When I use a PC and run the .html and .css files in IE9, everything renders just fine. However, when I go to my website from the internet, IE has the rendering problem, which makes even more difficult for me to resolve.
Would anyone know an easy way to correct this issue without having to make too many changes. I understand that I could add widths, however I tried with no luck. Also, the website url is:
http://www.imkenliya.com/artisan_network.html
If you run the website in IE, you will notice that the English language button below the search box is not in the yellow banner to the right of the title, which is the rendering problem.
Thanks,
I figured out my problem through persistent trial and error. Basically, IE read my html differently from the other browsers. By ordering the information in my html page differently, IE was able to render it properly. The ordering follows:
container, div float: left, div float: right, middle info
Originally, I had the following:
container, div float: left, middle info, div float: right
This seemed logical, however not to IE. Additionally, the other browsers still render my html properly.
Use a CSS reset sheet (like this one => http://meyerweb.com/eric/tools/css/reset/).
Also separate styles from your HTML markup (ditch div align="center" and the font tag. Replace them with proper CSS).
If this doesn't solve it, please provide a link to the site.

Resources