I have a simple style for a 'dropcap' type design for p tags in my CSS.
p.introduction:first-letter {
float: left;
font-family: 'Times New Roman' , Times, serif;
font-size: 300%;
line-height: 1em;
margin-right: 0.08em;
margin-bottom: -0.25em;
}
This seems to be working fine across all browsers, however I am getting peculiar behavior in Firefox. The letter drops down into the text below it.
Normally, I would debug it in Firebug, but here's the strange part - It doesn't show up in Firebug! I really have no clue what is causing it. I have reproduced it in the following jsFiddle.
http://jsfiddle.net/4zMex/
My standard browser is Chrome. This works in Safari and IE9 as well. Only Firefox exhibits the strange behavior.
Removing your negative margin-bottom solves the problem. Why is this needed?
Related
From the images below, you can see that the font rendering used by safari adds some white lines to some characters. This occurs in Safari for both iOS and Mac. While in the example below it is not as noticeable, in practice it can be quite distracting.
I noticed this happened after I added font-weight: 400; to my text. The reason I added it was to fix another issue by Safari which rendered by font with large kerning between letters see this Stack Overlow question.
This is the entire CSS for the text:
h2 {
font-family: 'My-Font', sans-serif;
font-size: 3.5em;
line-height: 1.2em;
margin-bottom: 0.5em;
text-align: center;
}
Is this another bug in Safari and is there a workaround if so? Thanks.
Some folks recommend
text-rendering: optimizeLegibility;
Other
transform: perspective(1px);
Hope it helps.
Having issues with aligning my button text across browsers. I've combed similar questions and have tried the suggestions but to no avail (display: inline-block for my hyperlinks, line-height: 1). There is too much headroom in firefox with my buttons (see homepage slider) and it looks just fine though in Chrome. Site is: jdd.meteor.com
*I was told this question was "off topic" when I tried to ask before. Please let me know what I can do to keep this question active if it is not on topic, whatever that means, so I can make changes.
Thanks!!
Screen captures (Chrome then Firefox):
#middle-section #slider .item .content hgroup a.call-to-action {
background: #820024;
color: white;
padding: 20px 30px;
letter-spacing: 0px;
font-size: 1.2em;
}
a {
color: #00aab5;
display: inline-block;
line-height: 1;
}
I had the same issue this morning, you need to define a height as well, that solved the problem for me, it looked great in Chrome but without height it looked squished in Firefox. Hope this helps.
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 have been playing with Prettify and I got it working quickly. However when I tried to change the font in the css file i can't seem to see any change in the browser. I am using Silver Stripe as a CMS. In the CSS file from the website I have:
.typography * {
font-family: Ariel, sans-serif;
}
I have a separate CSS for prettify (and I know it works because the bg color changes, etc. only the font-family and font-size doesn't. Strangely font-weight does work).
pre.prettyprint, code.prettyprint {
font-family:monospace; /* doesn't work why? */
overflow: auto;
display: block;
font-size: 8pt; /* doesn't work */
background-color: #333; /* this works */
}
I am using Safari. I don't understand what I am doing wrong? I only seem to get an Arial font.
Apparently Safari doesn't support the monospace correctly. See more about it:
http://www.markwyner.com/post/16123207332/safari-vs-monospace-fonts
Here you can find the appropriate font for Safari to support:
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
For the not working measurement unit - pt try using another unit to see if it gives you any result. Let me know if it worked.
I am having a lot of trouble vertically aligning an entypo icon font.
Here is the codepen which currently displays as intended on Safari and Chrome on mac - http://codepen.io/anon/pen/jJtwz
As you can see the right arrow is vertically centred. Now the problem browsers...
Mac Firefox - The arrow is slightly lower but can tolerate this
It appears too low on the following browsers... (Every PC browser)
Mac Opera PC Chrome PC Firefox PC IE 10 PC IE 9
All the PC browsers seem to be resolved by adding a line-height:5px and getting rid of the top value.
Has anyone experienced the line height inconsistencies between browsers with icon fonts and know of a fix? It seems the OS has something to do with this as opposed to just browser inconsistencies.
I have tried all sorts of tricks like negative margins, absolute/relative positioning but cannot get consistent results.
Thanks
P.S. This was tested on all latest versions of browsers on the latest Mac OS and Windows 8
Here is the code if you cant view the link...
HTML
<section class="hbox hshop cfix">
<img src="http://placekitten.com/g/600/400">
<h3>Clothing</h3>
</section>
CSS
.hshop > a {
display: block;
border: 1px solid #ccc;
}
.hshop > a >img {
vertical-align: bottom;
padding: 0.75em 0.75em 0;
}
.hshop > a > h3 {
padding: 0.5em 0.6em;
position: relative;
font-weight: normal;
}
.hshop h3:after {
content: '\E766';
font-family: 'entypo';
position: absolute;
right: 0.3em;
font-size: 2em;
top:3px;
}
img {max-width:100%}
It was an entypo problem. The spacing around their glyphs was causing the issue. I used the icon fonts from fontello and this worked http://codepen.io/anon/pen/sidje
There are still inconsistencies in that entypo font. In all icon fonts.
The best solution I have found is set a baseline font size, and play around with you font metrics until you get something semi consistent Matching the base font metrics is a good start .This method works best if you keep the same size icon-font, changing the size throws everything off.
Also IE reacted better when I set the line-height a little smaller then the font size.
Really sloppy, but it got me close enough.
I fixed the font vertical space oiand made it available here https://github.com/zenx/entypo