how decrease font size ?

Question

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.

Answer 1

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; 
} 

Answer 2

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

Answer 3

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)

Answer 4

Also worth noting is that Cascading Style Sheets are just that: Cascading

Levels:

1. stylesheet

2. style tag in file

3. 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.

Answer 5

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.

Answer 6

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.