I have a pretty simple HTML document, a visual representation of a card, that is sent to people who purchase a gift card via our website. The dollar amount is added to the background image and is styled by CSS. Like I said. Pretty simple.
On screen, the dollar amount (in the upper right) shows as white, which is what I want.
How it appears on screen
But when printed (and in print preview), the dollar amount is a dark gray, which makes it hard to see against the background.
How it appears when printed
The same thing happens regardless of which browser the customer uses. I've tested it myself on Chrome and Safari with the same results. Depending on the customer's printer, the dollar amount can be very difficult to read.
Any color other than white seems to work fine. When I look at printer emulation in Inspect Element, red CSS appears red, and it will print as red; black CSS appears black, and it will print as black; but while white CSS appears white, it will print as gray every time. This is driving me crazy, and I'm sure it's a simple solution.
We need for customers to be able to print these e-gift cards legibly. What am I missing here?
Story of my life: I work on a problem for hours, post a question asking for help, and almost immediately figure out the answer.
The issue appears to be that browsers don't want to print white when it appears on a web page. Makes sense. White wouldn't show up on white paper, so it makes it gray.
The solution seems to be to add -webkit-print-color-adjust: exact; to the styles. At least that works for Chrome and Safari.
With my worked, in print they have some different css style code to display.
You can use
#media print { //your css code }
and check results.
I suggest to use table layout in all page.
Related
I am using same style, however, it rendered different in chrome. It shows lighter. Is there a way to fore chrome render the style same with other browsers ?
.text {
color:#333435;
font-size:13px;
font-family:arial;
}
<div class="text">Test text</div>
Check out this link for more information.
Colours aren't numbers. Each browser will use numbers to represent the colour but it will each display the colour slightly differently.
First off, I feel your pain. I come from print and it can be infuriating that you can't get everything perfect.
But, alas, you can't get everything perfect. If you want to know why here's a little article for you: font rendering
Each browser will handle fonts a little differently and you kind of have to get right with it. When you have title or logo that needs to be exact consider converting it to an SVG.
I'm building a Wordpress website by customizing and editing an existing theme called 'onetone'. It's an one-pager theme. The problem I'm having is that neither the homepage (the one-pager landing page) nor the individual posts/pages will extend to full height.
Under the footer, there's a thin black line 23 pixels in height, that extends 100% of the width.
Here's the quirky thing: while I'm logged into the site as an admin, the line disappears. When I'm visiting as an unlogged, regular user the line is there. All major browsers (FF, Opera, IE, Chrome). Also, on my sister's computer with FF installed the line didn't show even when unlogged.
I've searched StackOverflow, and the usual answer to have <body> and <html> set to height:100%; (including min-height:100%;) isn't working. I've also added height/min-height to containers and wrappers to test the setting. (Not all, though, only the ones I thought were relevant to the issue I was trying to solve) I've also tried the margin: 0; & padding: 0;, but NOTHING works.
I suspected it's the footer's fault, but using the inspect element function in my browser (and some further tests) I found the footer has nothing to do with it.
In the original, untouched theme, the line doesn't appear. So it must be some of my edits causing it, though even by comparing the original and my edited CSS file line by line, I couldn't find something that should've caused this error. And the CSS is the only thing I've edited.
I'm not a coding expert, and I've about exhausted my wits and available knowledge trying to figure this out. Does anyone have any idea what may be causing this glitch?
This is my site. The glitch is best seen on posts / pages. If any specific code samples are needed, just say and I'll post them.
Your code has this weird image just before the <body> tag ends, after all javascript calls:
<img src="http://pixel.wp.com/g.gif?v=ext&j=1%3A3.4.1&blog=50532064&post=651&tz=1&host=firstinkstudios.com&ref=http%3A%2F%2Ffirstinkstudios.com%2F&rand=0.7281985701993108" id="wpstats">
Remove it and you're golden
There's a background color on body. Getting rid of that fixes the "border".
body.custom-background {
background-color: #000000;
}
Also there's a smiley on the bottom
It looks like this
<img src="http://pixel.wp.com/g.gif?v=ext&j=1%3A3.4.1&blog=50532064&post=444&tz=1&host=firstinkstudios.com&ref=http%3A%2F%2Ffirstinkstudios.com%2Fblog%2F&rand=0.1907386933453381" id="wpstats" scale="0">
I've picked out a color that I want to use throughout my website - it's the color of the logo and of the header, among other things. In my case, it's #7ed321. I've created the logo and exported it as a PNG with the color profile stripped.
Problem is, the page looks completely different in Firefox, Safari, and Chrome - each are rendering the colors their own way.
Chrome, Safari, and Firefox, from top to bottom. That's the logo and a piece of the header below. They might look the same on your screen, but they sure don't on mine.
Chrome - renders both header and logo as native #7ed321 (sRGB #94C9D6).
Safari - renders both header and logo as native #54df16 (sRGB #7ed321), a much brighter green.
Firefox - renders logo as native #54df16 (sRGB #7ED321) and header as native #7ed321 (sRGB #94C9D6). So the colors don't even match.
Basically, Chrome realizes if I asked for #7ed321 in my PNG and my CSS, that I always want to see #7ed321 on my screen, so it does the necessary conversion to sRGB to match my monitor's color profile.
Safari assumes I provided both values in sRGB, so it does no conversion to my target monitor.
Firefox does no conversion for my logo but does convert my CSS-provided #7ed321 to sRGB #94c9d6.
As a result, the same page is looking inconsistent among browsers. The difference isn't significant, but I'd like to get them looking closer if I can. Is there anything I can do to my CSS/PNG to make the page look the same?
There is a way to ensure the logo and any other occurrences of the brand color in the code are the same. That is to use CSS to color any instance of the green.
Export the logo as just the white leaf with a transparent background. Then you can form the logo using CSS to create the circle and fill in the background color. For example:
HTML
<div class="logo"></div>
CSS
.logo {
display: block;
width: 100px;
height: 100px;
border-radius: 50px;
background: #7ed321 url(../img/logo.png) center no-repeat;
}
Now the code has applied the green color, so it will match any other green you apply with CSS such as the header.
As for making all browsers and screens look the same - that's a bit of a losing battle. Users all use different screens and the color will be rendered differently. It would quite honestly be pointless spending any time trying to do anything about that.
An alternative to using CSS to build the logo like this would be to show the logo as a font. You can do that will a tool like Fontastic which allows you to then do resizing and cool CSS transitions on the logo if you wanted: http://fontastic.me/
If you have a vector version of the image you could use the svg format. With svg you can access the color hex codes for stokes and fills directly from the markup. But the problem probably has something to do with that some browsers can make use of your operating systems colour profile and others can't.
It's an ancient and crappy solution, but sometimes the best way to make sure that at least the two elements match is to color the box created with css with a 1 pixel png that you export with all the same color settings as the logo.
I have a HTML "report" page that contains amongst other things a HTML view that looks like this:
When you print preview this though, it looks a lot less nice :)
I know about CSS for printing, but what I don't understand is how my HTML is being interpreted like that - for example why do my blue borders come up fine, but my colored boxes (which are actually just empty divs inside a td cell) don't show up at all in the print preview. Also, why would the white text on black on the left not print like that?
Are there some rules for print-friendly css? Any suggestions here?
BTW - I tried previewing in both IE 10 and chrome - both pretty much did the same
I guess the problem is related to "background-color" and "background-image" properties that are ignored by default on many browsers (when printing).
For chrome you can add the following code to your print css, in firefox and IE you must select "print background" in the print dialog.
:root {
-webkit-print-color-adjust: exact;
}
EDIT: AN ALTERNATIVE APPROACH
Since you're looking for a way to provide readable information also on the printer you may provide specific content just for that:
in your HTML:
<td class="green_background blue_border">
<img src="img/green_bk.png" class="show_on_print">
</td>
<td class="orange_background blue_border with_star">
<img src="img/orange_with_star_bk.png" class="show_on_print">
<span class="hide_on_print">*</span>
</td>
in your stylesheet:
#media screen,print
{
.blue_border {border: 1px solid #00F;}
}
#media screen
{
.green_background {background-color: #0F0;}
/* hide something when displayed on screen */
.show_on_print {display: none;}
}
#media print
{
img.show_on_print {/* add size, etc. */}
.hide_on_print {display: none;}
}
you have to create also the images. The idea is to replace the background with some small sprites, or an alternative text only on printers. This works in any browser
The reason why you don't see the colored boxes is because the color is applied via background-color. This was one of the main sources of problems with printing HTML in the past, so many browsers ignore background colors and images to make the printout more readable (text is hard to read on a B&W printer when it's on top of a "gray" area).
In your case, this is problematic since there is no text.
Here is a question which explains how to turn background color printing on in Chrome. Other browsers have an option in the printing dialog.
Alternatively, "print" the page into a PDF file and then use a PDF viewer to print it. In this case, the browser might preserve the background settings.
Check if your browser suppresses background colours when printing.
I applied "border-bottom:#F60 dotted .3em;" to a div and while Firefox renders the dots as round, Chrome shows them as blocky dashes. Any takers?
If it's important that the borders are the same you can look into the CSS3 border image property: http://www.css3.info/preview/border-image/ for Chrome it will be -webkit-border-image:
The specification doesn't define what 'dotted' means to that level of detail. The two browsers just interpret it differently. This is not a problem.
As a graphic designer, this is indeed a problem for me.
:dotted; and :dashed; are specified separately for a reason - a rectangle is not a circle. While it is possible to work around, web builders working at a remove often don't spot the difference. As far as they are concerned, the brief has been met.
to be fair, at 1px, it is less of a problem but when heavier weight dotted lines are used as design elements and code is selected over graphics to save on page load, things can go quite wrong.
For those needing a single dotted line that absolutely has to be a true dotted line, I would suggest a div with a small repeating background image. Could also try styling up a <ul> if you want to keep it all code.