I have a problem with the font icon in firefox please check the Image
CSS:
[class^="icon-"]::before, [class*=" icon-"]::before {
font-family: "untitled-font-1" !important;
font-style: normal !important;
font-variant: normal !important;
font-weight: normal !important;
line-height: 1;
text-transform: none !important;
}
The top bar in the firefox and the bottom in the Chrome and here the Live Link
http://mohammadsamy.com/Nest/
This would be easier to answer for me if you also supplied the relevant html code in order to try and test this out, but have you considered a more browser/screen-agnostic measurement type such as vh or em? Example:
[class^="icon-"]::before, [class*=" icon-"]::before {
line-height: 1vh;
}
If that still doesn't work, you can always play with their margin-bottom or padding-bottom attributes.
Margin-bottom MDN Article
Padding-bottom MDN Article
Related
How to remove spacing from top and bottom on Ion Icons?
I use it in my html like :
<div><i className="close ion-ios-close-empty" /></div>
and this is default style for all ionicons:
display:inline-block;
font-family:"Ionicons";
speak:none;
font-style:normal;
font-weight:normal;
font-variant:normal;
text-transform:none;
text-rendering:auto;
line-height:1;
font-size: inherit;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale
And close class is as follows :
.close{
color: #ffffff;
font-size: 50px;
}
I didn't add any style to it, I only increased font-size, but the icon is shown like on the photo.
Is there any way to remove the spacing on top and bottom?
It's a little bit later, but my solution is to set the line-height to 0.6 em:
.close{
color: #ffffff;
font-size: 50px;
line-height: 0.6em;
}
It's more like a work around, but if you play a liite bit with the line-height property, you can get good results.
Hint: If you want to choose shadow, use text-shadow and not box-shadow.
Use line height property if you want 20px height.
Example:
[selector] {
line-height: 20px;
}
I set the font-size style of a <textarea> to 120%. But the text turns out to be much bigger under Firefox compared to that under Chrome.
After checking the style using developer's tool I found the following preset style under Chrome:
input, textarea, keygen, select, button {
margin: 0em;
font: normal normal normal 13.3333330154419px/normal Arial;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
}
It seems that under Chrome the 120% is computed against 13.333px, while Firefox will computed it against the real default font-size 16px and finally make the text appears much bigger.
I do use css reset to override the default style but Chrome insists computing 120% against the 13.333px preset font size.
Please anyone tell me how can I make Firefox and Chrome render percent font size in textarea the same?
A webpage I'm working on for a client www.afterthemagic.com (slightly NSFW) looks OK in Firefox & IE but I can't for the life of me make it look properly in Chrome or Safari. I'm trying to mess with different variables the following element in style.css, but can't seem to get it to go.
#banner-text .left span {
font-size: 96px;
font-style: normal;
text-transform: uppercase;
position: static;
}
Any pointers on how to get the "THE" text to look fine in Chrome or Safari?? Thanks!
I would argue that you're going about this layout incorrectly.
Semantically speaking, you shouldn't be combining your H1 heading with the 'begin reading' link.
Your heading, 'begin reading' and author subsections should be floated and styled independently. Otherwise, I'm not sure what you mean by 'look properly'. Your h1 heading has a font-size of 200px, and your h1 .left span has a font-size of 96px. If you're referring to the text alignment, try:
#banner-text h1 .left span {
display:inline-block;
margin:0 0 10px 0;
font-size: 96px;
font-style: normal;
text-transform: uppercase;
}
Play with the margins until you get the alignment you're looking for.
This is a good resource to better understand the CSS 'display' property:
http://css-tricks.com/almanac/properties/d/display/
This problem exists ONLY on Mac Safari.
Other browsers / other OS works properly.
The problem:
Observe the font weight of the top navigation here: http://www.octa.com (WordPress)
Then observe the font weight of the top navigation here: http://www.octa.com/products (Magento)
Note that while they are served by different code (WP vs Magento), the css is nearly identical between the two pages.
Here's the relevant bits of the css:
nav.menu li a {
font-family: 'VegurLight','Myriad Pro',Arial,Helvetica,Sans-Serif;
font-size: 20px;
text-align: left;
}
nav.menu li a, #subnavwrapper nav li a {
color: #FFFFFF;
font-weight: normal;
height: 50px;
line-height: 50px;
padding: 0 46px 0 0;
}
nav li a {
display: block;
line-height: 1em;
text-decoration: none;
}
body {
color: #000000;
font-family: "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans- serif;
font-size: 14px;
line-height: 1.55em;
text-align: center;
background: black;
}
Note that the font is imported using #font-face.
I've tried everything - many answers here on SO and other articles. Note that none of the below styles gleaned from other answers / resources corrected the font display.
font-variant:normal;
-webkit-font-smoothing: antialiased;
text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
Try -webkit-font-smoothing: antialiased;
I've found that this simple change made Safari's font-weight property much more reliable.
(I cannot post comments so I can only add my findings to the conversation by posting.)
I have found that text in fixed position elements appears lighter weight than other types of positioning in Safari. Therefore could not be ignored as suggested in other places.
Adding --webkit-font-smoothing: antialiased does solve this , but then it looks lighter than in Firefox. Which can be fixed with -moz-osx-font-smoothing: grayscale
fiddle here to show the problem - Safari only
With the comments / prodding from #JukkaK.Korpela, I discovered a few things:
First, the root of the problem is this:
-webkit-backface-visibility: hidden;
Which was added to the code to solve an animation problem per this answer: iPhone WebKit CSS animations cause flicker
Don't know how to solve the font and solve the flicker, but I can at least choose which one to solve now.
Second, as an avid Firefox/Firebug user, I had tried using Firebug Lite in Safari, as well as another extension for Safari, and they did not work. So, for all of you out there who may be trying to troubleshoot Safari-only issues, here's a big tip:
Safari's "Develop" tool. Didn't know about it at all until I did some searching today, but it's a menu item in the toolbar. If you don't see it, then go to Preferences->Advanced, and check the "Show Develop Menu in Toolbar"
With that tool, I was able to troubleshoot and solve this quickly.
I want to scale down my fonts for the mozilla browser by say, 10%.
So I have the following code in my stylesheet:
body{ font-size: 62.5%; }
#-moz-document url-prefix() {
body{ font-size: 56.25%; }
}
But for some reason, it doesn't seem to do anything.
Changes on individual divs work fine though.
Example:
#footer-links{ font-size: 1em; }
#-moz-document url-prefix(){
#footer-links{ font-size: .9em; }
}
I will probably just end up doing this for all divs then...
But I'm just puzzled why the body setting above isn't working.
EDIT:
I've also just tried with the html tag:
#-moz-document url-prefix(){
html{ font-size: 56.25%; }
}
Although this does rescale the font, it's not to the size specified, but to much smaller than the original.
Thanks for the fiddle.
rem units are root em. That is, they're in terms of the font size of the root element. Which in HTML is html, not body. So changing the font size of body doesn't change the size of a rem.