I have a website similar to SO. Moderators have a diamond sign in the end of their name. Bud I don't know why it looks red and weird in my iPhone (on chrome it is fine).
See? It looks red and huge. Why? And how can I fix it? Noted that SO looks fine in my iPhone:
Also my styles are the same as SO:
.mod-flair {
color: #07C;
margin-left: 3px;
font-weight: bold;
font-size: 15px;
line-height: 8px;
margin-right: 4px;
}
I copy/pasted the same character from SO
This is likely to be the problem, as you're leaving it up to the browser to encode the character. I'd suggest explicitly using a character entity instead. Stack Overflow uses ♦
♦
Related
i have got several ::after elements with text. Firefox is cutting off some letters - but not in a line (see picture). I wanted to find the mistake, but when I open the developer tools the text is rendered correctly. I do not understand this. in safari and chrome everything is fine...
Missing:
Not missing:
Here is the after-Elements CSS-Code:
font-size: 15px;
hyphens: none;
padding: 10px;
display: inline-block;
line-height: 1.3em;
I figured out the mistake. It was a mistake in the font-family, not an issue in firefox. curious thing for me: after opening developer tools it seems to render or load again and so the text was rigth displayed.
The filter bar on my site - http://grailed.com is rendering differently in Chrome on Windows and Mac even though Chrome says the height is 31px on both.
Here is an image of the Mac rendering. This is how I want it to show up.
Here is an image of the PC rendering. Zoomed in on the offending area.
On top of that the globe icon and the dollar sign are at differing heights. I have no idea where to start with this issue, any tips would be appreciated!
Let's take a glimpse at your CSS (after being run through an un-minimizer, and using some of the DOM inspection tools of different browsers):
.filterhead {
text-align: center;
cursor: pointer;
background-color: #e1e1e1;
padding-top: 10px;
}
...
h3 {
font-family: "SackersGothicStd-Heavy";
text-transform: uppercase;
font-size: 13px;
letter-spacing: 6px;
padding-bottom: 5px;
padding-top: 4px;
color: black;
font-weight: normal;
}
The majority of the height of your header is defined by the the "padding-top: 10px" setting as specified by the filterhead class. Padding-bottom is 5px as specified by h3. And the font size is effectively 16px. (10+5+16 == 31).
Change the padding-top attribute of .filterhead from 10px to 5px and it starts to look like what originally showed in the pic representing the Mac rendering. That should probably do it for you.
But no matter what, I'll never be able to rock that $500 dress shirt with the hearts printed on it that you have for sale on your website. That takes some serious stylin' to pull that look off.
http://assets3.grailed.com/uploads/photo/image/11138/display_upload_2F1393376651400-xu5dk1ezfx-b4c0f2f9854185bc01c09e5a9b232221_2F
Try using CSS to specify the size an margins.
I've used a CSS from Goolge and I'm getting puzzling result. Below are two screenshots. The one from Firefox shows the correct (or, at least, the expected rendering), the one from Chrome shows some random font...
Firefox
Chrome
This is how I load it:
<link href='http://fonts.googleapis.com/css?family=Lobster+Two:700italic'
rel='stylesheet' type='text/css'/>
The relevant CSS rule:
.digit {
font-family: 'Lobster Two', cursive;
font-size: 24pt;
background-color: #d1d2d4;
color: #ebebec;
padding-left: 5px;
padding-right: 5px;
margin-bottom: 10px;
cursor: pointer;
display: block;
float: left
}
I'm at a loss...
Following, somewhat, Fluidbyte's advice I decided to use the font file I have, rather than the one from Google's CDN and it worked. I'd still be interested to know why wouldn't it work the first time I tried, but as the practical solution (possibly only relevant to this particular font) this should help you, if you are facing the same problem.
Here is a link to the page that is giving me trouble:
http://youtube.thegoblin.net/layoutfix/
If you view the website in firefox and chrome you can see that the spacing is different. The way it looks in chrome is the way I meant it to look.
I have tried linking in the YUI 2: Reset CSS as it as suggested in another question, but I cannot seem to get it to work.
Here's the stylesheet link: http://youtube.thegoblin.net/layoutfix/styles/style.css
You should change line-height on some elements that contains text. These are line-heights for some (maybe all) elements you need to change:
#title: 56px
.yoText: 46px
#buttonTitle: 68px
#buttonText: 34px
Looks like browsers count differently line height for font you choose, so defiantly line-height could make it better.
Just short example, not full fix:
#dl-button #buttonTitle {
color: #37590B;
float: right;
font-family: "TallDark";
font-size: 600%;
line-height: 0.7;
margin-right: 60px;
margin-top: 20px;
text-shadow: 1px 1px #BDF277;
}
makes green button much better, so you may play around with others the same way.
I have the following style:
background-color: #C9C5BC;
color: #FFF;
font-size: 10px;
font-weight: bold;
padding: 0 3px;
text-transform: uppercase;
cursor:pointer
the HTML element is
<span class="name-indicator">NameIndicator1</span>
IT looks like this is Firefox (desired)
and in Chrome it looks like this (wrong)
The problem is that in chrome there is no white space between the span elements and it is caused by the fact that in FF the height is 13px and in Chrome it's 15px, when setting the font size in chrome to 7px I achieved the right effect.
How can I fix this to be the same on both browsers? I want to keep the font-size to be 10px
EDIT:
I've created a fiddle please take a look at both FF and Chrome
I noticed that the codes in the stackoverflow answers look similar to your provided image (2nd one). If you put this CSS line-height: 21px on the container .wmd-preview p, then a separation appears between the codes. So your problem could be solved by adding line-height to the container of those span.
To have better chance of achieving same results across many browsers use css-reset at the beginning of your page. This little piece of css will make sure that all elements have same default values in all browsers. You can get one from here.