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?
Related
Please see this minimum example:
span {
font-family: Helvetica;
border: 1px solid red;
font-size: 40px;
}
<span>1299</span>
Screenshot:
Chrome
Firefox
As you can see, Firefox renders the typeface a little taller; why is this?
Is it possible to make Firefox look like Chrome?
Update
Adding line-height and display: inline-block makes the red container same height, but the font position remains incorrect, please see this minimum example:
span {
font-family: Helvetica;
border: 1px solid red;
font-size: 40px;
line-height: 1.5;
display: inline-block;
}
<span>1299</span>
i can not figure out how to address this issue with safari browser. Note the images attached. One Chrome, shows box with background color and there is also a hover effect, that works. (works in FF and IE as well), Nothing works in Safari. no hover, background just white, so you can't see the text. Here is the code of that box. I am using safari's version of chrome dev tools to test different css, but I can't get that background within the box to change and no hover is working. Any suggestions on how to attack this problem would be greatly appreciated.
<ul>
<li class="acet-sum-item--clear"><a href="/applies/apples-tie-back-comments">
“Clear Filters”
::after
</a>
</li>
.acet-sum-item--clear a {
color: #fff;
display: inline-block;
text-align: center;
border-radius: .15rem;
background-color: #999;
font-size: .65rem;
padding: 0 1.5em;
line-height: 1.3rem;
font-weight: 400;
border: none;
margin: 0 .4rem 1rem .5rem;
-webkit-appearance: button;
cursor: pointer;
margin-left: 0;
}
.acet-sum-item--clear a:hover {
cursor: pointer;
color: #fff;
background-color: #20558a;
text-decoration: none;
border: none;
}
This ended up being a -webkit issue. It was set to something - can't remember what, but I added code targeting safari and then set it to none. viola - the color and hover effect work.
I just started to learn html and css again and I am struggling with some weird stuff that I didn't see before.
I have this button
.btn {
display: inline-block;
font-size: 1em;
background: #fff;
padding: 30px 30px;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
}
Explore
this all good but if you pay attention there is some margin or just some space at the bottom
inside the blue square I just want to be the text height so it will be centered perfectly
I check your codes in my editor and it is correct perfectly. Your codes' problem is due to over-code or other ones.
This image is from my Chrome browser:
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
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.