Css on the body tag:
body{
font-family: 'Helvetica', Arial, Lucida Grande, sans-serif !important;
font-size: 12px;
line-height: 1.4;
min-width: 1050px;
min-height: 500px;
color: #333333;
}
Works perfect, however it doesn't seem to work on input fields :S For some reason (while those input fields have NO styling) it uses Lucida Grande for input fields text and rest is just Helvetica, I am 100% sure there is no other font-family tag else where.
What is causing this and why?
Input fields usually have their own style set in browser’s default style sheet. This typically means a browser-dependent font family and a font size of about 90%.
To set their font, you need to use a selector that refers to them, e.g. using
body, input {
font-family: 'Helvetica', Arial, Lucida Grande, sans-serif;
font-size: 12px; /* if that’s what you want... */
line-height: 1.4; /* somewhat excessive */
color: #333333; /* if that’s what you want, but it reduces legibility */
background: white; /* always set background when you set color */
}
body {
min-width: 1050px; /* if you really want this... */
min-height: 500px;
}
(but note that this also affects submit buttons).
Try to use following :
input {
font-family: inherit;
}
Or set any other font, and let see does this change issue.
Related
Right now, when I move to a mobile setting, this happens. How do I correct it?
I have tried adding <meta name="viewport" content="width=device-width, initial-scale=1"> to the header per this answer. The CSS I am currently using looks like this:
html {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #61666c;
line-height: 1.5em;
border-top: 10px solid #ECEEF1;
border-bottom: 10px solid #ECEEF1;
-webkit-text-size-adjust: none;
}
h1 {
font-size: 40px;
font-weight: 300;
}
The problem is that your line-height in the html rule is hardcoded to a specific value since you use the em units. It gets calculated at the 1.5 times the font-size of the html.
You should not supply a unit if you want it to be relative to the current font-size of each element.
So changing it in html rule to line-height: 1.5; will fix it.
So it inherits just fine, but you set it to 1.5 of 16px (usual default) so it is 24px. Then you set the font-size of the h1 to 40px which exceeds the 24px by a bit..
My CSS specifies font-family: inherit for a button but why is that. I thought with CSS that if you don't specify it will inherit anyway?
In common browsers, button defaults to a sans-serif font. Specifying font-family: inherit overrides that browser default.
Perhaps to override a different setting from a less-specific selector?
* {
font-family: Comic Sans;
}
div {
font-family: Verdana;
}
button {
font-family: inherit; /* look like my parent */
}
<div><button ...></div>
On the left is Chrome and on the right is IE9.
As you can see with the image above, even with the Meyer CSS Reset there are yet inconsistencies between browsers. Two examples in this image:
IE9 clearly has a darker font for just about all text.
For whatever reason, the <hr/> tags aren't lining up (but they sure are close) and that throws off the rest of the content.
Is there something more I need to do, other than applying the Meyer CSS Reset to get some more consistency between these browsers?
Additionally, with the content you see above, other than colors and font sizes, there are no margins or padding applied after the reset.
CSS
h1 {
font-family: Lato;
font-size: 26px;
font-weight: normal;
color: #154995;
}
h2 {
font-family: Lato;
font-size: 24px;
font-weight: normal;
color: #333333;
}
h3 {
font-family: Lato;
font-size: 20px;
font-weight: normal;
color: #154995;
}
h4 {
font-family: Lato;
font-size: 18px;
font-weight: bold;
color: #333333;
}
h5 {
font-family: Lato;
font-size: 16px;
font-weight: bold;
color: #333333;
}
.small-text {
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: regular;
color: #333333;
}
The differences you point out are all based on the fact that two different fonts are being used in your chrome and IE9 outputs. Once you tweak the css font-family so both browsers use the same font then it should be ok.
UPDATE:
After seeing your css, you're specifying only Lato font for your elements, it seems both chrome and IE9 can't find the font Lato so both are applying a default font, which is different from one to another, try specifying fallback fonts like:
font-family: Lato, Arial, sans-serif;
If above still give you different outputs then Lato is being picked in one browser and not other, you can check that by using:
font-family: Arial, sans-serif;
for all your elements and see the output is the same on both browsers.
UPDATE 2:
Also see instructions on how to add a Lato webfont to your website:
http://www.google.com/webfonts#UsePlace:use/Collection:Lato
According to me font-family you are using is probably not a system font, it's a web font so what's the thing here is 1 browser is taking up the web font and other is not, so the default Times New Roman font is used
<div class="timer">00:01:05</div>
The following css generates a 154x30px box:
div.timer
{
font: 700 24px Arial, Helvetica, sans-serif;
}
and this one generates a 154x19px box (on the sam div element).
div.timer
{
font-weight: 700;
font-size: 24px;
font-family: Arial, Helvetica, sans-serif;
}
How can this be possible? I checked the shorthand property and i can't find what I'm doing wrong. I ordered the attributes in the good order, of that I'm preety sure.
When you use a shorthand property, any value you don't specify is reset to the default.
So the first example changes the font-style, font-variant and line-height. The line-height in particular is likely to alter the box size.
I have this rule:
body {
font-family: Arial,Helvetica,sans-serif;
font-size: 12px
}
but i have different font size for the selects and the buttons then for plain text.
What should i do if i want the same size for everything?
Regards
Javi
formular elements usualy don't inherit those properties, so you have to do:
body{
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
}
input, select, button{
font-family: inherit;
font-size: inherit;
}
body,
input,
select,
button {
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
}
By default, form elements like input of type text and password (submit and button ?), select, textarea and button are styled with a monospace font with a resulting size of approx. 13.33px.
You can check C:\Program Files\Firefox\res\forms.css (under WinXP) or with Firebug in the HTML part, the little triangle at the right of Style tab ==> Default CSS properties
body {
font: normal 62.5%/1.5 Verdana,Arial,Helvetica,sans-serif;
}
input, select, textarea, button {
font-size: 1.2em;
}
p {
font-size: 1.2em;
}
will result in 12px+Verdana form elements (and 1em = 10px equivalence for your whole page)
body {
font-family: sans-serif;
}
button {
font:inherit
}
<html>
<head>
</head>
<body>
<p>An example of a sans-serif font</p>
<button>Cick Me</button>
</body>
</html>
Not sure about buttons, but most browsers try to style <select> elements in a standard way (e.g. 12-point Arial). If you want to change the style of these, you have to add an explicit CSS rule:
select {
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
}