Using EM in nested tags

HTML & CSS
1

I’ve got a situation here and a bit of guidance would be appreciated.

Here’s the code


<ol class="example">
	<li><span>This is an example</span></li>
</ol>



ol#example {
	font-size: 2em;
}

ol#example span {
	font-size: 1.3em;
}

So if I understand correctly, the span will display 1.3x the font of the parent element (ol).
I don’t want that to happen on this occasion, I want it to just base itself on the default CSS reset and not the ol it’s nested in.

What’s the best way to go about it?

2

Without knowing the rest of the code, couldn’t you just strip the classes out of both the list and the items, and go bare?

[highlight=“HTML4 Strict”]
<ol>
<li>This is an example</li>
</ol>

3

If you want to get the child back to the base font-size then it would be .5em

2em on that parent is basically the same as 200%, in that case the child would be 50% to get back to base size.

Other than that, either don’t get caught in the trap or you can also get out by using pixels on the child.

You shouldn’t have any problems with .5em though


.demo {
    font-size: 2em;
}
.demo span {
    font-size: .5em;
}


<div class="demo">
    <p><span>This is an example</span></p>
</div>
4

MATH! ( and a class)
:slight_smile:
Remember the parent OL bases itself on it’s parent and so forth…

for example:


ol#example {
    font-size: 2em;
}
 
ol#example span {
    font-size: 1.3em;
}

<ol class="example">
    <li><span class="exception">This is an example</span></li>
</ol>
ol#example span.exception {
    font-size: .5em; // this will set fontsize to the size of the OL's parent... if that not 100% of the body size you will need to apply more calculations, for example, if the parent size is 1/3 the size of the body  then font-size should be: 1.5em...

}
5

Somebody’s using javascript comments in their code :slight_smile:

6

arrrrrrrrrrgh. sorry about that. IT was PHP comments actually… and now everyone can tell what my latest code-infatuation is.

7

Thanks for the input!

Blackmax, I have spans within my list element because I wish to apply different stylings to content.

8

As I said, that overly simplified “duh” comment came from not having any other idea about what you wanted to do. Some of the code heavyweights are now weighing in… :slight_smile: