Let's say I have the following:
<p>This is a paragraph containing some <code>code</code>.</p>
with the following styling:
p {
font: 16px/24px sans-serif;
}
code {
font: 16px/24px monospace, sans-serif;
}
Why does the code element throw out my line-height? Here is a jsFiddle that illustrates the issue: http://jsfiddle.net/sl1dr/chgyb/
EDIT: Upon further investigation I have discovered the the fiddle I linked to works fine on a Mac, but not on Windows. This is getting more and more intriguing as the site I am working on is having the issue on both Mac and Windows.
It is not a line-height change, it is because mostly different font-family's have a different margin around the font. But font-margin is not something what you can change with css. So you're right, you need to change the line-height: http://jsfiddle.net/chgyb/2/
I found here a working solution which is to set the font-size again and set the font-family to monospace, monospace.
Related
I realize this sounds absurd, but I'm unable to change the font-family for an input type=submit button.
I've tried referencing it by id and input[type=submit], adding a !important tag in the css, and changing it in the dev tools, but nothing works. However, other css attributes are working (such as width, margins, etc).
Is there a css solution I'm overlooking here or should I change paths and style through jquery?
codepen:
http://codepen.io/blakeface/pen/mEJWQj?editors=1100
#submit-button {
font-family: cursive;
font-size: 10em;
margin-top: 30px;
}
Similar question:
Input password font -family
Perhaps you are looking for something more like this?
font-family: Vivaldi;
The 'cursive' font family for HTML/CSS isn't like conventional cursive handwriting. Your code works and displays 'cursive' font.
One of the weirdest CSS issues I've seen. The .product-bottom and .product-title classes have the font-family: Roboto. This displays fine in IE and Chrome. Inspecting the elements in Firefox, the font is apparently used on the element and is successfully used throughout the site in other elements.
Editing the font-family attributes when inspecting the element has no affect on it. The computed css values show !important is not used. When used in the inspector on font-family, it has no affect. There are no jQuery or CSS errors, though there are plenty of CSS warnings.
The site is [removed after fix].
Screenshot of the font issue in FF. Problem text is: "Grey Hair Color Body Wave Human Hair Weave"
Disable
.product-title {
text-transform: full-width;
}
and it looks fine. The full-width value is only experimental and mainly supposed to be used with square letters like in Chinese.
Replease this css:
.product-title {
text-transform: full-width;
}
with this:
.product-title {
text-transform: capitalize;
}
In Chrome, the font size and font family of form 'select' fields is not following css rules as expected.
My stylesheets declare the font-family should be 'Open Sans', and font-size should be 14px.
But, it is reverting back to 'Lucida Grande' and 11px.
This screenshot of Chrome's developer tools sums it up - the Country select field is the item in question:
The following didn't fix the issue:
html, body, input, select, textarea, button {
font-family: 'Open Sans', sans-serif;
font-size: 13px;
}
Interestingly enough, it is only doing this on my machine (mac mini mavericks); testing on others (windows 7/8) in the same browser results in no error. Has anyone else dealt with this issue? Is there some setting necessary to override default values?
One near-solutionis to use the following to increase the font size to 13px on Mac - but this results in a massive 48px on Windows:
select {
font-size: -webkit-xxx-large;
}
Alternatively, the following would reset everything about the menulist appearance, to build up from scratch (font size/family take CSS rules or inherit):
select {
-moz-appearance: none;
-webkit-appearance: none;
}
Ideally a simple font adjustment wouldn't require resetting everything about the menulist...
Whenever something unexpected happens with the cascading aspect of CSS, and it's clearly not an error introduced by the developer, then there's a good chance it has something to do with the !important command. Someone may have applied !import to a style in some earlier part of the CSS. Try applying it to your styles to see if it has an effect.
I've seen a few issues with the cursor being improperly spaced in the ace editor. The problem has to do with the font-spacing and apparently the solution is to only use monospaced fonts.
Here's another SO question about the issue.
ace editor cursor behaves incorrectly
My problem may have something to do with using a Bootstrap theme, but I'm not entirely sure.
When I open chrome dev tools and look at the font used in the ace editor, it says that my Bootstrap template is using the fonts
input, textarea, input[type="submit"]:focus, div {
outline: 0 none;
font-family: 'Open Sans', sans-serif;
}
If I add to my css
.ace-editor {
font-family: monospace !important;
}
I still have a problem with the cursor spacing being wrong, and strangely, the font which is being used looks exactly the same as the 'Open Sans' defined in Bootstrap.
Opening in Chrome dev tools, says that the computed property is 'monospace', so something is supposed to be working, but it isn't. Here is where it get really weird.
If I remove the font entries for both .ace-editor and input, textarea..., I get a perfectly good looking font that works.
Going to the computed properties, is shows the font-family to once again be 'Open Sans'.
So the question I'm trying to answer, is how can I either figure out what font is ACTUALLY being used when I cancel out the textarea entry from Bootstrap? Or why is this not accepting the monospace font when it is specified.
I'm somewhat assuming that 'Open Sans' may be monospaced, but whatever, it's still causing massive headaches.
The issue is caused by div included in bootstrap rule.
It is too broad and breaks character width measurements for ace.
You can add
.ace_editor div {
font: inherit!important
}
as a workaround. Would be good to also report an issue to the creator of your bootstrap template.
Given this CSS
body {
font-size: 62.5%;
font-family: Arial,sans-serif;
line-height: 2em;
color:#333
}
.post_text p {
font-size: 1.2em
}
why doesn't text in .post_text p scale on Chrome when I click Ctrl-+?
It does behave correctly on Firefox.
It does scale correctly, which I've checked using Chrome 21.0.1145.0 dev-m using this jsFiddle here: http://jsfiddle.net/9yuPN/
I'm guessing that you may have some other conflicting style rules or a problem with your browser? Try viewing that jsFiddle above and see if the example scales when you use Ctrl + '+' and Ctrl + '-'. If this doesn't work for you, it's not the code that is the problem and it's likely your browser/OS or something else, and if the jsFiddle DOES work for you, the problem is somewhere else in your code.
As you have written it, it should scale correctly in Chrome (and does for me).
I found this buried in my css
-webkit-text-size-adjust:none
which obviously will cause the behavior I described in OP.