SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Location
    Byron Bay, NSW, Australia
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using EM in nested tags

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

    Here's the code
    Code HTML4Strict:
    <ol class="example">
    	<li><span>This is an example</span></li>
    </ol>

    Code CSS:
    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?
    Madproject - I'm an amateur...
    What I learn from day to day

  2. #2
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    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?

    Code HTML4 Strict:
    <ol>
        <li>This is an example</li>
    </ol>

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
    .demo {
        font-size: 2em;
    }
    .demo span {
        font-size: .5em;
    }
    Code:
    <div class="demo">
        <p><span>This is an example</span></p>
    </div>

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,813
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    MATH! ( and a class)

    Remember the parent OL bases itself on it's parent and so forth...

    for example:
    Code:
    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. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Somebody's using javascript comments in their code

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,813
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    arrrrrrrrrrgh. sorry about that. IT was PHP comments actually... and now everyone can tell what my latest code-infatuation is.

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Location
    Byron Bay, NSW, Australia
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the input!

    Blackmax, I have spans within my list element because I wish to apply different stylings to content.
    Madproject - I'm an amateur...
    What I learn from day to day

  8. #8
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EasyCo View Post
    Blackmax, I have spans within my list element because I wish to apply different stylings to content.
    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...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •