Simple code, but in chrome font-size is always 12px, in IE it's 10px.
For px larger than 12, it's ok to change. But for px under 12, it cant be changed....how to fix this?
<html>
<head>
<style type="text/css" >
body{
font-size: 10px;
}
div{
margin: 0 auto;
border: 1px solid #000;
width: 60em;
}
</style>
</head>
<body>
<div>
wrapper
</div>
</body>
In chrome://settings/fonts, there is a setting for "minimum font size". You probably have that set to 12px.
You can adjust the size of text in chrome.
Click Chrome menu on the browser toolbar.
Select Settings.
Click Show advanced settings.
In the "Web Content" section, use the "Font size" drop-down menu to make adjustments.
see here
Try change size like this:
body {
font-size: 10px !important;
}
If it still doesn't work, you would probably have some javascript changing it on the fly (do you have some javascript plugins or code loaded with your project?
Or maybe css from other plugins/modules/code etc.
Or maybe you have really set some minimum font size in chrome settings. Try to check taht also.
Related
So I'm having an issue with consistent sizing of "em" values and I can't seem to figure out why.
I am using SCSS for my site and preprocessing all my SCSS files to a single CSS file.
Let me illustrate how my structure is set up.
/* Value used for border width
$defaultBorderWidth: $sizeSmallest; */
.test {
width: 5em;
height: 5em;
border-style: solid;
border-width: 0.15em; /* normally $defaultBorderWidth */
}
.test div {
width: 1em;
height: 1em;
border-style: solid;
border-width: 0.15em; /* normally $defaultBorderWidth */
}
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=3.0">
</head>
<body>
<div class="test">
<div></div>
</div>
</body>
</html>
This in turn shows the result I am expecting, which is a 2px border on both div tags. I am able to replicate this on my site in exactly the same way.
My issue is that in some of my widgets, there are instances where I get a 3px border instead of 2px.
I've read that my border-width could be cascading with another attribute value, but for the life of me can't figure out where or why it's happening. When I look at the developer tools in my browsers I see all instances of border-width are 0.15em.
If an explanation / debug cannot be determined, I can provide a live site example, with the expectation that it will be corrected on the live site ( FYI for future viewers of this article ).
since095 provided the answer to use rem as opposed to em. Where rem always uses the root default font size of the <html> tag (which you can override), in contrast em uses the current tag font size and adjusts other em values accordingly (good for inheritance).
There are advantages and disadvantages of both, and it really comes down to how you intend to structure your site. Inheritance can get messy and complicated really fast, but if used correctly can be very powerful. Controlling every aspect of your site with uniform measurements can help streamline and simplify, but doesn't carry the power of inheritance.
I've come across those that suggest a combination of the two, using rem to set constants such as font size, borders, and em for spacing such as margins and padding.
Below is an example of the use of using rem and em.
.testRem h1 {
border-style: solid;
font-size: 3rem;
width: 15rem;
height: 3rem;
margin: 0.5rem;
border-width: 0.5rem;
}
.testEm h1 {
border-style: solid;
font-size: 3em;
width: 5em;
height: 3em;
margin: 0.5em;
border-width: 0.5em;
}
<!doctype html>
<html>
<head>
</head>
<body>
<div class="testRem">
<h1>Test rem</h1>
<div class="testEm">
<h1>Test em</h1>
</div>
</body>
</html>
I am new to CSS/HTML. I have created this website and I want it to look good on mobile phone as well. When I browse the website from my iphone it is scrolled out at max and the text from frow(first row -£20 voucher),srow(second row-at),trow(third row - £4.99) are very small, unreadable. What's wrong?
.frow {
font-size: 60px;
font-weight:900;
}
.srow {
margin-top:10px;
line-height:5px;
font-size: 45px;
font-weight: 600;
}
.trow {
color: #FF0000;
text-shadow: 2px 2px #000;
font-size: 100px;
font-weight: 900;
}
You will have to define the meta viewport in order to support mobile devices the way you want:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
Include this in your <head>.
Modern mobile browsers usually scale the page down, if the viewport doesn't define something else. With the viewport, the page is not scalable (user-scalable=no) so it just looks like opened on a small window.
The next step would be, if not already made, making the page usable on small screen resolutions. In order to achieve this, CSS media queries might be helpful.
About the viewport meta tag: http://html5-mobile.de/blog/meta-viewport-fuer-mobile-anpassen
About CSS media queries: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Instead of hard coding the length, you can try out twitter bootstrap framework from: http://getbootstrap.com/, which can easily create mobile friendly layout.
I understood that the default font-size was 16px on browsers. Then why is the height of the inline-block(12px) same as the font-size (I've tried in Chrome and FF) ? Please help me understand. Thank you.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font: 100% helvetica, arial, sans-serif;
line-height: 1.625;
}
#tempTest {
display: inline-block;
width: 10px;
height: 12px;
background-color: orange;
}
</style>
</head>
<body>
<p class="heading"><span id="tempTest"></span>Remember, when you were young, you shone like a sun. Shine on you crazy diamond</p>
</body>
</html>
If you inspect the inline box using a browser’s Developer Tools (hit F12 to open them), you can see that its height is indeed 12px, as set in your code. This happens because there is nothing in it that would require more height; in general, the exact calculation of heights of inline blocks is browser-dependent.
The font size of the text is still the browser default, typically 16px. The font size does not mean the height of any particular letter. It is just a fundamental property of the font; typographers usually design characters so that they - together with ascenders, descenders, and diacritic marks - fit into the limits set by the font size (or extend over them just a little), and normally most letters have smaller height.
I have a quite unusual problem with the rendering of a textarea-field in Firefox. I haven't tested other versions than 18.0 on a Mac until now.
My problem is, that the font-size always is relative to 13px (the os-default) and not to 16px what it's parent has.
If I define a fixed font-size for it's parent, it works as expected. But if all parents have a relative font-size the textarea's font-size is just relative to my OS-default.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Firefox ..</title>
<style>
/* Fixed sizes */
/* body { font-size: 12pt; } */
/* body { font-size: 16px; } */
/* body { font-size: 0.4234cm; } */
/* Dynamic sizes */
/* body { font-size: 1em; } */
/* body { font-size: 100%; } */
/* body { font-size: medium; } */
textarea { font-size: 1em; }
</style>
</head>
<body>
<textarea rows="4" cols="20">abc</textarea>
</body>
</html>
Similar question, but does not cover my case: Why <textarea> and <textfield> not taking font-family and font-size from body?
Anyone experienced something similar before, or can confirm this behaviour in other Browser(version)s or OSes?
EDIT: Here's the code on jsfiddle.net: http://jsfiddle.net/E4WwV/
In Firefox (I don't know if other browsers have that too) you have the possibility to set two default font-sizes:
Default font-size (16px)
Default font-size for text having the generic font-family monospace (13px)
Since the default font-size in my example is just 1em (for the textarea and the body) it's 1 times the default font-size which is 13px for all monospaced text and 16px for all other text.
Here is an article that has a great explanation and also a usable work-around to this:
http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/
Textarea and body use different font families. Textarea defaults to using a monospace system font, and there is some weirdness for system fonts to size them based on your browser's font preferences in Gecko. So if your preference set the normal size for your monospace font to 13px, that's what you're going to end up with in this case...
I'm trying to remove the 8px margin from the body tag.
I've tried (not all at once)
* { padding:0; margin:0; }
and
html, body { padding:0; margin:0 !important; }
and
body { margin:-8px; }
and even
<body style="margin:0">
The last one works, but only if I add the style attrib using Firebug; if it's in the original HTML, it gets ignored.
I'm at my wit's end.
Edit: facepalm I figured it out; I'd changed it to a cfm so I could easily call browser-specific styles. Thank you all for your help.
Include a reset stylesheet instead, this way you will reset all of the default values equally in all browsers.
http://meyerweb.com/eric/tools/css/reset/
All you need is:
body { margin: 0; padding: 0; }
The padding is not needed for Firefox, but for Opera, which uses padding instead of margin for the default.
Demo: http://jsfiddle.net/k3j8Y/
body{ margin: 0;}
works ok for me :P
Include your stylesheet correctly
As your style is not appearing in FireBug's CSS rule stack, your CSS is probably not linked correctly. Ensure the stylesheet is in your head tag like so:
<head>
<link href="Style.css" rel="stylesheet" type="text/css" />
</head>