When i click on "live sever" from visual studio it opens Google Chrome but my css is not working. When i copy the link on Brave it works...
[This is the CSS]
* {
color: green;
}
#parrafo {
color: blue;
}
p {
color: red
font-size: 24px;
}
Here is how the html shows in Chrome. And the devs console. It's all in green!
Brave. There is not green at all and i think this is the right html.
Even the console styles is different...
"inherited from p" says in chrome.
Why is not working correctly? I'm new at this.
i'd like to know if the live server is not working or if my css styles sheet is wrong.
The problem in the code shown is that the text is within a font HTML element.
You have set everything to have color green except for p elements.
So the font element is correctly picking up the green setting.
Here's a simplified example:
* {
color: green;
}
p {
color: red;
}
<p>
<font>this is within a font element</font>
</p>
Nowadays the font tag is deprecated (see MDN) but if you for some reason need to keep it then you want in this case for the font element to inherit the p color.
However, you might like to take this opportunity to change the font element to something else (e.g. span, it depends on your use case) and make p span inherit the p color.
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.
Well I've had a fun-filled 24 hours. Since asking this question yesterday: http://tinyurl.com/nkoqxfg I've been trying to isolate the problem, and finally I've narrowed it down to the following:
Modernizr is incorrectly applying a class of fontface to the HTML element in IE8.
Here is my site, with everything else stripped away: http://tinyurl.com/ose6pj8
Please take a look at the source code. Notice the last two CSS rules:
nav li a {
color: #FFF;
font-size: 4px;
}
.fontface nav li a {
font-family: 'Qwigley';
font-size: 30px;
line-height: 56px;
}
In any modern browser that supports #font-face, you should see the menu styled with Google font's 'Qwigly' script, and the correct font-size of 30px. In IE8 and any browser that doesn't support #font-face, you would expect to see a tiny font-size of 4px. (Modernizr in this case should apply a no-fontface class to the HTML element)
However, this is not the case. Mordernizr is incorrectly applying the fontface class, and as a result I'm getting huge 30px Arial text. Just checked, and the same problem is occurring with IE7.
Why?
in IE8 and any browser that doesn't support #font-face, you would expect to see a tiny font-size of 4px. (Modernizr in this case should apply a no-fontface class to the HTML element)
IE 8 does support #font-face – so expecting Modernizer to not set that class is just where you are going wrong here.
The caveat is that IE < 9 only supports fonts in EOT format – so see to it that you embed that version in your font embedding as well;
Or use a CSS selector that applies your custom font only if the lt-ie9 class that you set for your html element via conditional comments is not present, something like
html:not(.lt-ie9) .fontface nav li a { /* … */ }
(IE only supports the :not() selector from v9 on anyway.)
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.
Elements with css font-size <12px doesn't have effect in Google Chrome - remains font-size 12px.
What should I do?
My Google Chrome browser uses default settings. My version is 4.0.249.89.
I am using Windows XP.
You can paste the following code to your Google Chrome to test it:
<html>
<body>
<p style="font-size:6px;">test 6px</p>
<p style="font-size:7px;">test 7px</p>
<p style="font-size:8px;">test 8px</p>
<p style="font-size:9px;">test 9px</p>
<p style="font-size:10px;">test 10px</p>
<p style="font-size:11px;">test 11px</p>
<p style="font-size:12px;">test 12px</p>
<p style="font-size:13px;">test 13px</p>
<p style="font-size:14px;">test 14px</p>
<p style="font-size:15px;">test 15px</p>
<p style="font-size:16px;">test 16px</p>
</body>
</html>
Results from different browser:
disable the auto adjustment by following style.
* {
-webkit-text-size-adjust: none;
}
-webkit-text-size-adjust is no longer working after Chrome 27.
Try using transform to refuce font-size forcely.
font-size:12px;
transform: scale(0.833);/*10/12=0.833, font-size:10px*/
According to http://www.google.com/support/forum/p/Chrome/thread?tid=389f306a52817110&hl=en Chrome supports a minimum font size. If you open "Documents and Settings\User_Name\Local Settings\Application Data\Google\Chrome\User Data\Default\Preferences" in a text editor, do you see something like the following?:
"webkit": {
"webprefs": {
"default_fixed_font_size": 11,
"default_font_size": 12,
"fixed_font_family": "Bitstream Vera Sans Mono",
"minimum_font_size": 12,
"minimum_logical_font_size": 12,
"sansserif_font_family": "Times New Roman",
"serif_font_family": "Arial",
"standard_font_is_serif": false,
"text_areas_are_resizable": true
}
}
Closing Chrome, changing the minimum font size, and restarting Chrome may help.
Chrome has a minimum font size setting. Mine was set to 11px (by default) so I had to change it to view smaller font sizes.
To change the minimum font size in Chrome go to: settings > advanced settings > web content > font size > customise fonts > scroll down to the bottom and you will see the 'minimum font size' slider.
this should not be correct, you probably have an element overwriting your current given attribute.
like this:
body {
font-size:10px;
}
#content {
font-size:12px;
}
Is there a minimum font size preference? Is it set to 12px? Is page/text zoom enabled? Do you have any kind of Chrome plugins that alter page contents?
Same for safari. I guess this is set to 9px for accessibility reasons. The trick is to not rely on making your fonts that small, so that you are blowing them up in css rather than reducing them. This is of particular relevance if creating your own font using something like icnmoon. So, here it is best to reduce the glyphs sizes in the font, so that you are setting them quite large in your css and you are avoiding setting them to below 9px if the user 'zooms out'.
Interestingly font-size: 0 still works even if the minimum font size is set to 9px in your browser preferences.
With regards tablets and smartphone and other devices, it may be possible to use the following to avoid automatic text size adjustments using the following:
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none,
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
font-size-adjust: none;
This may actually break the accessibility of your websites on these devices but as far as I know there is no way to adjust your browser text size as it stands on these devices. They only seem to be adjusted automatically, depending on the situation which can be a bit of a mystery. These commands may prevent that, but i think the default minimum font that is set in your browser preferences may override that setting anyway, at least in some browsers.
what happens if you make the < P > tag a < SPAN > tag?
is it possible you have defined your < p > tag somewhere along?
It works for me in Chrome 4.0.249.78 (36714) , could you be viewing a cached copy?....Try emptying your page cache (I've found chrome very fond of its cache)
Chrome doesn't let you set the minimum size less than 6 point.
And text is legible A LOT smaller than that on Retina displays.
It works for me.
Try to:
use webdesigner tools, to check what css affects your element
post html and css aswell, so we can maybe figure out more
Edit:
Latest Chrome (stable) renders this this way:
(source: kissyour.net)
Chrome and Firefox now allow a minimum font size setting of zero. Chrome 73 had downstream problems with this, and since then Chrome changed their policy and user interface for this setting. I don't know the history on Firefox, and I don't know the state of this setting on Safari or other browsers.
You can use css property zoom (https://developer.mozilla.org/en-US/docs/Web/CSS/zoom)
By setting zoom property equals to 0.25
all elements will be looked 4 times smaller,
so 12px font text will be looked like 3px font text.
.text {
zoom: 0.25;
font-size: 24px;
}
text will be looked like font-size: 6px; text.
But this property isn't supported by firefox.
Have you tried putting an "!important" clause behind the font styles? This would override everything else. At least then you would know where to look for the problem. Like this:
<p style="font-size:6px !important;">test 6px</p>
<html>
<head>
<style>
#text {
transform-origin: top left;
background: #aed5ff;
}
</style>
<script>
window.addEventListener('load', function() {
var node = document.getElementById('text');
var fontSize = node.style.fontSize.replace(/[\D]+$/, '');
if (+fontSize <= 12) {
node.style.fontSize = '12px';
node.style.transform = `scale(${fontSize / 12})`
}
});
</script>
</head>
<body>
<p id='text' style='font-size:10px'>test 10px</p>
<p style='font-size:12px'>test 12px</p>
</body>
</html>
you can use
body {
font-size:125%;
}
to set 0.5em=10px.