font-size % question

Greetings,

I would like to ask a question regarding to %.

Lets say if I have a code like this:

HTML:

<div class="container">
<div class="content"><p>Some giberrish</p></div>
</div>


CSS:

.container{
font-size:32px;
}

.content{
font-size:80%;
}


Alrgiht. Lets say if I use the font size as 32px in the container. Then does the font-size percentage takes away from the main font-size which is 32px, or the percentage checks the browsers font-size and scale it to the given code?

Thank You!

 

There is effect on you text "Some giberrish"

If you use the two method of font size , the result shows the size according to 80%

 

That wasn't my question, but thanks for answering either way.

I have found out through inspecting the web page, that the font-size which I have set for the container, is what the % will either increase or decrease from.

 

Yes, when you change the or remove the container font size code, your text back to normal or change.

but the if put both there then size is on result if from content size code.

Or my be really i am not getting you.

 

% and EM fonts are always based on their parent -- with most elements set to inherit (use what the parent says) -- which is why if you set PX on a parent element (BODY in particular) you COMPLETELY SHTUPPED THE ENTIRE REASON FOR USING %/EM. None of the %/EM inside such a container auto-adjust to the user's default font-size (be it set in the browser or the OS)

you declare 80% on element 1 inside and 80% element 2, you get 64% of element2's parentNode... This is why in your example, your DIV.content would render at either 25 or 26px depending on the rounding model (which does differ across browsers - 25.6 will not give you consistent results)

 

You may use the rem unit, which always take the root element as its base. See CSS Values and Units Module Level 3, W3C Candidate Recommendation 28 August 2012, which is supported by the big four graphic UAs.

Example:

      body {
        font: 100%/1.5 sans-serif;
	margin: 0;
        }

      ul {
        font-size: .7em;
        }
 
      li {
        font-size: 1em; /* for explicitness's sake */
        }
 
      li:nth-child(odd) {
        font-size: 1rem;
        }
=======================
    <ul>
      <li><a href="#">Home</a></li>

      <li><a href="#">Blog</a></li>

      <li><a href="#">Contact</a></li>

      <li><a href="#">Hire Me</a></li>

      <li><a href="#">Portfolio</a></li>
    </ul>

Code (markup):

cheers,

gary

 

Assuming you can live with your pages completely screwed up in IE8/lower... and it's sad to say we're really not there yet.

 

CSS provides:

      ul {
        font-size: .7em;
        }
 
      li {
        font-size: 1em; /* for explicitness's sake */
        }
 
      li:nth-child(odd) {
        font-size: 1.43em;  /*will need editing to accommodate  parent's value*/
        font-size: 1rem;
        }

Code (markup):

I no longer support IE<8 without a substantial additional fee. I will drop IE8 support (following Google's lead) when IE10 is released.

cheers,

gary