i am using this css.
.text_style3{
font:normal 8px Helvetica;
color:#f7922c;
}
i want to it more small but after 10px this is not working. i have used 7px, 6px, 5px etc. but this is not working.
so how can i decrease size. this css is not working in mozilla.
That is a rule specified by the browser, usually 10px is the minimum font size allowed in a default Firefox installation.
Try it by going to Preferences -> Content -> Fonts & Colors -> Advanced -> Minimum font size.
Any font size smaller than 10px will be almost non-readable. The rule is there to ensure better accessibility.
Hope that helps.
You most likely have a CSS Specificity issue, where another style is overriding the style you were expeceting to see.
You can use tools like Firebug for Firefox to see what style the browser is using and where in your code it has come from.
You may need to make your font size declaration more specific, by changing the selector, or even methods like using the !important operator or making the style inline in your HTML.
See these links for more information on ways to handle this:
http://htmldog.com/guides/cssadvanced/specificity/
http://www.w3.org/TR/CSS2/cascade.html
are you sure you arent resetting text_style3 after this to have a normal style? it may be that you are styling div p or span (or any other containing tag) after you do this one.
if you are not, break the font style down to the following:
.text_style3{
font-weight:normal;
font-size: 8px;
font-family: Helvetica;
color:#f7922c;
}
You have some really good answers here, and they are probably correct (min-font size, use !important to override other CSS). I would add to try to use em's, once you get use to them, they seem to work alot better than straight px, and they resize better (my opinion) for users who need to increase the font size for readability.
Also worth noting is that Cascading Style Sheets are just that: Cascading
Levels:
stylesheet
style tag in file
style in code
1 will be overwritten by definitions in 2.
Both 1 and 2 will be overwritten by definitions in 3.
The closer the CSS is to the actuall item/text being displaied, the more important it is.
As Mauro wrote, if the tag you are doing class="text_style3" on has some other definition of text size this may also affect the display.
It may be that you have a minimum font size set in your browser, check Tools > Options > Content and choose Advanced in the fonts and colours section and change the minimum font size to None.
It is likely your minimum font size is set to 10px (smaller sizes are unreadable)
Related
I am working on an electron app on macOS.
In the CSS file, I specified the input size to be 21px height.
CSS
input {
float: left;
margin-bottom: 10px;
height: 21px;
}
HTML
<input type="button" value="Choose a file" id="fileInput">
<br style = "clear:left">
But in the app, the button seems to be 18 px height.
I checked in dev tools. the element sizing looks like this.
Why is the input button size different from the height specified in the CSS file. Was it due to the "margin-bottom" properties I specified?
Update:
I tried to add the !important tag, did not work.
Checked CSS files, no 18px specified anywhere.
Are there any other possibilities the input button size affected/overwritten by other CSS attribute, float for example?
Update 2:
I tried the app on Windows system, the button has the right size of 21px.
The issue seems to be a macOS specified issue.
Check if it is getting overridden by any other height which is specified to 18px . and as people are suggesting use of "!important" try to avoid using it . Try with css selectors. to make it more specific to your input field.
You code perfectly sets the height in all major browsers.
Maybe a CSS framework overrides the default style. Try to add the !important tag behind the height attribute like so: height: 21px !important;. Please note, that this is not best practice explanation found here.
If you need further help, please let us know whether you use a CSS framework (maybe some JS code could also override it) and which browser you're using.
I would like to have a font smaller than an Arial 9px text.
I've tried to find other font name but I did not succeed to get a very small text. Is there a way to achieve this easily using css ?
EDIT :
I can't go under 9px using Arial
I have tried font-size, small, transform, scale, other fonts... everything as I am an experienced web developper.
Set font-size to whatever you want - although you may find that any font less than 9px may be too small to read well. You could also do it with em's or rem's or percentages.
But you can set the font size as follows (for an example p element that you want to be 6px in size).
p {font-size: 6px}
So note that you are not importing the smallest possible font - you are sizing the html elements to be a small font-size with CSS). Using this principle- you set the fontsize for all the elements you want to use it - eg: p, span, a, li, h etc.
But again - I must caution against this for accessibility purposes.
p {
font-family: Arial;
font-size: 6px;
}
<p>This is a test with Arial font at 6px and is NOT recommended</p>
You can try it
div p {
font-family: 'Arial';
-webkit-text-size-adjust: none;
font-size: 5px
}
<div>
<p>lorem</p>
</div>
You may also REPEAT the small tag multiple times to make it as small as you like. Interestingly, I have not seen this mentioned anywhere!
<h2>My Headline <small><small><small>(Subject)</small></small></small></h2>
Most (all?) browsers have a minimum font size, to avoid underhanded people displaying unreadable text for some reason. Some browsers let you adjust this, but you simply can't count on being able to display smaller than 9pt on anyone else's machine.
Unless you opt for very old school: create your text as a graphic.
Or: Create your own custom, tiny font - as long as it has all the features of (say) a 12pt font, it will display fine, but if the glyphs are only two dots high, that is what you will see.
If adding css styles don't work then maybe it has something to do with your browser auto adjustment of the font size.
Try this to stop auto adjustment of font size:
* {
-webkit-text-size-adjust: none; //For chrome browser
}
Few thing you must consider
1. make sure the .css file is the last one you load in your html (after Bootstrap for example).
2. use the !important attribute to your css property (font-size: 4px !important;)
3. if these 2 suggestions do not work, try adding an inline-css to your element <p style="font-size: 4px">I'm a 4 px paragraph</p>
You can use HTML <small> tag.
https://www.w3schools.com/tags/tag_small.asp
I found this reset.css file inside a jquery image slider demo, but it was never included in the main index.html file. what is is suppose to do, and more importantly, where do you put it? Do you put it before any referenced stylesheets()?
Here is the code inside reset.css
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html,body {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
input{
border:1px solid #b0b0b0;
padding:3px 5px 4px;
color:#979797;
width:190px;
}
address,caption,cite,code,dfn,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
In the beginning, there was no standardisation on how styles worked, each browser implemented what it felt was right. One of the reasons you see so many questions about style errors in IE is because IE was the browser with the most dissimilarities from other browsers in terms of styling. Though IE has improved and so have other browsers they still apply their own borders, padding and margins, zoom, fonts to elements to give their own unique feel to pages. One example is, chrome gives its own yellow borders to text boxes. The "reset" actually "resets" all these styles to zero/none, so that you don't see any styles you haven't applied to your page.
If these styles are not "reset", you will see unwanted styles/effects and things breaking. Its generally recommended to "reset" the browser's styles.
Have a look at this article Should you Reset Your CSS?
reset.css is used to normalize browser's default styles.
Example:
Looking at the answers here there seems to be a bit of mixup between "reset" and "normalize". Their goals are slightly different.
A CSS reset is a set of styles you load prior to your other styles, to remove browser built-in styles. One of first and most popular ones was Eric Mayer's Reset CSS.
Another option is to harmonize browser built-in styles. The most popular tool to achieve this is currently Normalize.css.
Browser have different "built-in" styles which they apply to different html-elements. These styledefinitions may vary accross different browsers. The normalizing css files are meant to „normalize“ the rendering of the page across browsers by resetting these browser-specific styes.
You have to include it before your own style definitions. Otherwise these styles would possibly override (due to the cascading nature of css) your declarations too, which wouldn't make much sense;)
The most popular styles reset is probably Eric Meyer's which comes along with a little background information..
Browsers may render the HTML and CSS received according to its native rendering engine. Different browsers may use different rendering approaches [IE ;) if you know what i mean] so the intension of reset.css is to set all the attributes to common predefined values so the developers/ designers are can forget some rendering engine and start development from the scratch.
A CSS Reset (or “Reset CSS”) is a short, often compressed (minified)
set of CSS rules that resets the styling of all HTML elements to a
consistent baseline.
In case you didn’t know, every browser has its own default ‘user
agent’ stylesheet, that it uses to make unstyled websites appear more
legible. For example, most browsers by default make links blue and
visited links purple, give tables a certain amount of border and
padding, apply variable font-sizes to H1, H2, H3 etc. and a certain
amount of padding to almost everything. Ever wondered why Submit
buttons look different in every browser?
Obviously this creates a certain amount of headaches for CSS authors,
who can’t work out how to make their websites look the same in every
browser.
Using a CSS Reset, CSS authors can force every browser to have all its
styles reset to null, thus avoiding cross-browser differences as much
as possible
refer http://www.cssreset.com/what-is-a-css-reset/
Every browser has its own default user agent stylesheet, that it uses to make unstyled websites appear more legible. For example, most browsers by default make links blue and visited links purple, give tables a certain amount of border and padding, apply variable font-sizes to H1, H2, H3, etc. and a certain amount of padding to almost everything.
Ever wondered why Submit buttons look different in every browser?
Obviously this creates a certain amount of headaches for CSS authors, who can’t work out how to make their websites look the same in every browser.
Using a CSS Reset, CSS authors can force every browser to have all its styles reset to null, thus avoiding cross-browser differences as much as possible.
From the consistent base that you’ve set up via your reset, you can then go on to re-style your document, safe in the knowledge that the browsers’ differences in their default rendering of HTML can’t touch you!
Hopefully it helped, you may want to take a look at this article, Which CSS Reset Should I Use?.
In simple words CSS reset is required due to browsers’ inconsistency. In detail all browsers rendering are not the same. Therefore web rendering could be different from browser to browser.
Meyer Web providing a utmost CSS reset code if you're want to use/reset. You can find it here. If you need more details, here also you can find out what CSS reset in more details and why we need to use it.
I have been searching for an answer for this for an hour now with no luck.
I am centering text vertically inside the box using the "line-height" CSS property. This is working fine with standard safe fonts and also works fine for ""#font-face"" font embedding on Windows.
On the Mac however, there is a problem with this centering using "#font-face". See: http://cl.ly/QBlE/o
I don't know what to do with this. The only way to fix this to use different line-height for Mac. But as far as I know this is not possible without JavaScript or server side programming and does not seem to be the proper solution for me.
Example (blue box at the top):
#header .login {
text-decoration:none;
margin:11px 9px 0 9px;
float:right;
font-size:11px;
color:#fff;
background:url(../img/header-login.png);
width:118px;
height:26px;
line-height:26px;
padding:0 0 0 10px;
text-transform:uppercase;
font-family: 'Helvetica55', Sans-Serif;
}
Instead of using different line heights, try using the font-size-adjust property with a value of auto.
From the W3C:
In situations where font fallback occurs, fallback fonts may not share the same aspect ratio as the desired font family and will thus appear less readable. The font-size-adjust property is a way to preserve the readability of text when font fallback occurs. It does this by adjusting the font-size so that the x-height is the same regardless of the font used.
First, try setting the line-height from px to em.
If that doesn't work, then it could be caused by default styles that are different for each browser. Those default styles could be messing with your styles. So try to use a reset.css in your page.
The problem most probably lies in the used font. Each font has its own metrics and when not optimized properly they can differ from one platform to another. See http://blog.typekit.com/2010/07/14/font-metrics-and-vertical-space-in-css/ for a better explanation of this.
You could try to alter the font yourself using a tool like http://fontforge.org/. This isn't easy though and takes some trial and error to get it right. It may also violate the license of the font you're using.
My advice: choose a font that is better optimized for use on the web. Take any font from Typekit or the like and i bet you get more consistent results.
Perhaps 'vertical-align:' may help,
please check this fiddle
this will explain the difference, I think every browser have different default value,
here I have created 4 different span tag to show the top, middle, bottom, and default(unassigned) value of the vertical align value,
Please change values if that helps,
as you are using images in the button, please verify the image are set with 0 0
i.e background:url(../img/header-login.png) no-repeat 0 0;
this will render the image from the 0 left and 0 top that will help you idnetify if and image is not properly generated..
Please reply if problem not solved..
From my experience for multi browser and multi platform websites you should really drop the pixels in fonts and start using ems.
Here's a useful convertion table tool:
http://pxtoem.com/
Let me know if it still happens using em. Keep in mind also that different fonts have different behaviors and the default (base) size may differ too. If you want to make sure it is exactly the same size, appart from using 'em' you should also use an openType font and embbed it into your CSS, having exactly the same font and size in any screen or browser.
Operating systems may render fonts different ways. One can start from bottom and other can start from top as their algorithm different. If the problem was CSS, it wouldn't be resolved by another type of font.
I found another question similiar to your one, you can check if it works for your situation:
Mac vs. Windows Browser Font Height Rendering Issue
I've been working in HTML/CSS for years, but I'd like to clarify something about setting font sizes. What is the best format to set your font?
Typically, i've been setting with a font-size in a percentage, and then using em to change it up or down from there.
Is this the most standard way to do it? I've seen fonts declared in pixels, points, with relative keywords like "larger" or "smaller" I've seen it set as percentages, etc.
So what's the most standard? Is the most standard the best? any research to back it up?
Thanks,
What I learnt at school is the following:
Set font-size in body with percent to 62.5%:
body {
font-size: 62.5%;
}
Then you can use em in the same sense as you would use pixels, except you divide by 10.
For example:
h1 {
font-size: 1.4em; /* 14px */
}
We learnt to use em for 'elastic' layouts. If you specify your font-size in em, the text will keep its proportions after a user zooms in or out.
Then again, I see people use px or other declarations for fonts all the time; as far as I know they're all standard. I guess it just comes down to creating the best user-experience.
They're all standard. Use what works for you.
You should set the font-size in the body tag to 100%. That way, people who visited your site will see the text at the right size for what they have set in their browser. For instance, people with low vision may set the text size larger. If your font-size is set to 100%, they should see it exactly as desired.
After that, you could set the sizes on your h1, h2, p, etc. with % or em.
I generally set html to 10px, then use font-size: 100% on the body. You can then use the px/em ratio 14px/1.4em on elements. The only thing I run into is then if I nest base elements, the font gets all funky, and you have to specify font-size on all nested elements.
Example: if I have p, section, article, div{font-size: 1.6em;}, any time I have p, section, article, div nested, the font becomes proportional to the container. So the 1.6em that was originally 16px is now 1.6em of 16px (not 10px) or 25.6px. You'd have to re-scale the text to 0.625em (or 16px/25.6px = 0.625em). You will have more control over consistency across browsers, but it may require a bit more effort from you.
Some may be asking, "Why go through all this hassle?" That is a good question. Here is the answer: Responsiveness. That, and I work for a company that needs to be 508 compliant. That includes ultimate control over starting font sizes. I can't rely on assuming that the end user has "medium" or 16pt font selected, because the law clearly states it must be X or Y for high contrast, etc..
There is someone telling it isnt a good thing and can break your layout, see it: http://filamentgroup.com/lab/how_we_learned_to_leave_body_font_size_alone/