I apologize in advance for this question but it is bugging me and I have not found a solution.
When I view my site tagline in IE the text looks very smooth and sharp but when I view it in Chrome the text has rough looking edges on it. Is there a way I can fix this so that the text looks professional and sharp in chrome as well.
www.jobspark.ca is the website and below is my css
#banner-tagline {
color: #FFFFFF;
font-size: 48px;
font-weight: 500;
position: relative;
text-align: center;
z-index: 4;
top: 50%;
font-family: HelveticaNeueW01-55Roma, Helvetica, Arial, sans-serif;
line-height: 40px;
text-shadow: 0 2px 4px #000;
Thanks for your time
This is not a bug and it is the expected behavior beacuse of the way text-shadow is handled in Google Chrome.
Check the following links to get more information.
http://thomasshields.net/article/3
Font Smoothing Techniques? text-shadow rendering differently in Chrome 14.0.833.0 or higher
Hope this really helps you
Related
I'm trying to get around a irritating issue with fonts. Specific Googles Roboto font.
The thing is that the font appear to be stronger (fat) on dark backgrounds in my tests (Chrome 62.0.3202.62 on OSX Sierra 10.12.6) while it play nice on googles dark font edition (https://fonts.google.com/specimen/Roboto?selection.family=Roboto:300,500,700 - Choose dark background).
Screenshot of my appearing:
vs Google appearing (its the light)
I started to belive there was something wrong with my rendering, but after trying this on several machines with different setup, its all the same.
Do anyone have any idea of how to fix this? Or an explanation of why its different between Google and my test.
Url for testing:
https://jsfiddle.net/fb3umv2e/
.btn {
display: inline-block;
padding: 7px 8px;
text-align: center;
background: #fff;
color: #000;
font-family: "Roboto";
font-weight: 300;
text-decoration: none;
font-size: 20px;
}
.btn.inverted {
background: #222;
color: #fff;
}
Best regards
Richard
Try adding these to your button styling :)
-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased;
I have a logo on my site that uses the Google font "Cinzel". When I view the site on Firefox or on an iPhone, the two centre letters overlap. How could I prevent this overlap from happening?
Note: I have already tried setting letter-spacing with no change in the centre letters.
Related CSS:
.brand {
font-family: 'Cinzel Decorative', serif;
text-decoration: none;
text-transform: lowercase;
}
.home{
font-size: 1.5em;
display: inline-block;
height: 60px;
padding: 16px 0px 4px 0px;
margin-top: 1px;
color: #000000;
}
Chrome:
Firefox/iPhone:
Thanks for any help!
Unfortunately I wasn't able to correct the issue in Google Web Fonts. I resorted to using a webfont kit from FontSquirrel instead and there seems to be no issue. http://www.fontsquirrel.com/fonts/cinzel
Text is distorting and becoming unreadable, but it is happening only in Windows browsers, both FireFox and Chrome. I am trying to reproduce the problem with a sample of the text with the styles in effect on the distorted text, but the sample looks ok.
Link to text that is distorted on windows Firefox and Windows Chrome:
http://dansdemos.info/prelaunch/hitch/20140219_1735/bk_promos/mergecopy
You've already invested in creating a great book...
Link to sample that is supposed to have same styles, but does not distort in windows Firefox and Windows Chrome:
http://dansdemos.info/prelaunch/hitch/20140219_1735/bk_promos/hammeredShitTextProblem
The styles in effect are:
p {
color: #777777;
font-size: 14px;
letter-spacing: 0.1px;
line-height: 23px;
width: 307px;
font-family: open sans,arial;
}
* {
border: 0 none;
margin: 0;
outline: 0 none;
padding: 0;
text-align: left;
}
*::-moz-placeholder {
color: #666666;
font-size: 16px;
font-weight: 300;
}
Any ideas on why the text is distorted in Windows only? And why it is not distorted in the sample with the same styles?
I'm having issues with rounded corners in IE8. I've tried a few methods without success.
Here is my code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
padding: 2px;
margin: 2px;
color: #505050;
line-height: normal;
}
p {
margin: 4px;
}
.categoryheading3 {
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
background-color: #297BB6;
color: #FFFFFF;
font-size: 16px;
font-weight: 700;
padding: 8px 0;
text-align: center;
margin: 0px;
}
.leftcolumn {
width: 174px;
padding: 8px;
float: left;
display: inline-block;
background-color: transparent;
/*--min-height: 500px*/
overflow: hidden;
}
.lefttop {
display: inline-block;
width: inherit;
margin: 0 5px 2em 0;
float: left;
width: 160px;
background-color: #FFFFFF;
border: 2px solid #297BB6;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="leftcolumn">
<div class="lefttop">
<H4 class="categoryheading3">Heading</H4>
<p>sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text </p>
</div>
</div>
</body>
</html>
Which produces this in Firefox:
But this in IE8:
If anyone has any tips I'd be very grateful!
edit: Joseph helped by suggesting to use pie.htc, however I'm still struggling with this element not working:
.categoryheading3 {
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
behavior: url(PIE.htc);
background-color: #297BB6;
color: #FFFFFF;
font-size: 16px;
font-weight: 700;
padding: 8px 0;
text-align: center;
margin: 0px;
}
Internet Explorer (under version 9) does not natively support rounded corners.
There's an amazing script that will magically add it for you: CSS3 PIE.
I've used it a lot of times, with amazing results.
Rounded corners in IE8
Internet Explorer 8 (and earlier versions) doesn't support rounded corners, however there are few other solutions you may consider:
Use Rounded Corners Images instead (this generator is a good resource)
Use a jQuery Corner plugin from here
Use a very good script called CSS3 PIE from here (Pro's & Con's here)
Checkout CSS Juice from here
Another good script is IE-CSS3 from here
Even though CSS PIE is the most popular solution, I'm suggesting you to review all other solutions and choose what works best for your needs.
Hope it was useful. Good Luck!
I didnt know about css3pie.com, a very useful site after seeing this post:
But what after testing it out it didnt work for me either. However I found that wrapping it in the .PHP file worked fine. So instead of:
behavior: url(PIE.htc);
use this:
behavior: url(PIE.php);
I put mine in a folder called jquery, so mine was:
behavior: url(jquery/PIE.php);
So goto their downloads or get it here:
http://css3pie.com/download-latest
And use their PHP file. Inside the PHP file it explains that some servers are not configured for proper .HTC usage. And that was the problem I had.
Try it! I did, it works. Hope this helps others out too.
http://fetchak.com/ie-css3/ works for IE 6+. Use this if css3pie doesn't work for you.
PIE.htc worked for me great (http://css3pie.com/), but with one issue:
You should write absolute path to PIE.htc. It hasn't worked for me when I used relative path.
As Internet Explorer doesn't natively support rounded corners.
So a better cross-browser way to handle it would be to use rounded-corner images at the corners. Many famous websites use this approach.
You can also find rounded image generators around the web. One such link is http://www.generateit.net/rounded-corner/
My CSS for the website all looks fine in Firefox but in both Chrome and Safari, my fonts are coming out looking black color instead of the grey color as is in Firefox.
Why might the fonts/color be different in Safari and Chrome - it looks like bold black.
Header style I am using within my content div, i.e.:
#content {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
color: #333;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #990;
border-bottom-color: #990;
border-left-color: #990;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 10px;
background-color: #FFF;
width: 973px;
text-align: left;
display: block;
background-image: url(images/bgcontent.jpg);
background-repeat: repeat;
}
h1 {
font-family: "Lucida Grande";
background-color: transparent;
height: 20px;
width: 650px;
color: #FF9904;
font-size: 36px;
text-align: left;
float: none;
vertical-align: top;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #999;
letter-spacing: normal;
margin: 0;
padding: 0.5em 0;
}
I also found this link relating to Google Chrome, i.e about using:
#charset "xxx"
http://www.google.com/chrome/intl/en/webmasters-faq.html#fontspecs
I just checked my computer, and there appears to be no difference in color between Firefox and Chrome. I am running Windows (for both of those), and it should be noted that there will always be a difference in color between Macs and PCs as they are calibrated with different gamma values. Read more about gamma stuff here, though note that you can't do much about it from a CSS perspective.
Another possible problem is that it could be just your computer... have you tried this issue on multiple computers? You can always try using a tool such as Browsershots or Browserlab.
Finally, it's possible that there is some relevant code that is triggering some cross browser differences.... is this all of your code or is there more CSS somewhere? Can you provide a live link to the page you're having problems with?
Does it also happen if you make them a color, for example red? If it's not, then it's just the anti aliasing of webkit which is more agressive.
But if it still happens, you can check with the chrome inspector and firebug if the way safari/chrome and firefox interpret the CSS is different. Which color selector they choose
The sample css you posted is ok. Try adding !important to color attribute.
color: #FF9904 !important;
At the time of writing (June 2015) there is a bug in OS X Chrome that means it doesn't apply colour correction to CSS-colours or untagged images. Safari (since OS X 10.9) applies colour correction to both CSS colours and images.