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.
Related
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.
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 understand that with CSS formatting the first letter of each paragraph is possible via:
p:first-letter
{
font-size:20px;
}
However upon using this code it is impossible to highlight/select these "First Letters" from the web browser, is there a way to amend this?
Edit - It is possible to select the text, however it isn't shown visually, how can I change this?
This is a bug in Chrome/ium/WebKit: https://code.google.com/p/chromium/issues/detail?id=17528
Right, it is not visually selected but in the background it is. If I select and copy and then paste it, I get "Hello" so this just might be a problem with the different font-sizes. font-variant:small-caps works perfectly (but uses uppercase).
You might want to try Lettering.js or alternatives
http://letteringjs.com/
https://github.com/davatron5000/Lettering.js
I'm working on a site and I have some problems that I hope you guys can help me with :)
If I put bold on my text in the menu it looks too bold in Firefox :S, but it looks fine in Chrome.
In Firefox the double border on the #content container is outside of the shadow effect :S, but looks good in Chrome.
Screen shot on Mac Firefox 5.0.1 and Chrome 13.0.782.112:
This is my project.
I hope some one can help me out with this.
If you have something I better I can do, I will be glad to hear that too :)
Your first issue regarding bold font looking different between the browsers is just because of the way browsers render text differently. There is nothing you can do about it, unless you go the horrible route of using images instead.
Your second issue is not about the border but rather the outline. It is caused because of the way Firefox interprets the outline when box-shadow is applied. It applies it outside of the shadow instead.
You can put the code below in your css to target Firefox and bring the outline back in:
#-moz-document url-prefix() {
#content{
outline-offset: -11px;
}
}
Live example: http://jsfiddle.net/tw16/n8bet/
#1: There differences in font rendering in every browser. You can try numeric values instead of simply bold to narrow the results ( http://clagnut.com/blog/2228/ ). Also read the answer on this SO entry: Same font except its weight seems different on different browsers
#2: remove this line from #content css:
outline: 1px solid #B9BDBE;
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.