SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    <small> not styling

    Why is my <small> not centering? (It keeps showing up as left aligned even though FireBug says it is centered?!)


    Code:
    <!-- Fast Figures -->
    <div id="boxFastFigures">
    	<p class="figure">40.2%</p>
    	<small>U.S. Businesses owned by Women (or with majority ownership) in 2006.</small>
    </div>

    Code:
    /* FAST FIGURES Styles */
    #boxFastFigures{
    	padding: 2em 1em;
    }
    
    #boxFastFigures p.figure{
    	font-size: 4em;
    	color: #F00;
    	text-align: center;
    }
    
    #boxFastFigures small{
    	font-size: 0.8em;
    	font-weight: bold;
    	text-align: center;
    }
    Also, is <small> supposed to be wrapped in something else?


    Debbie

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,096
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Why is my <small> not centering? ... <small> supposed to be wrapped in something else?
    <small> is an inline element, like <span>, so it shouldn't be butted up against a block level element like a <p>, but rather should be inside a <p>. text-align: center is only for block elements, so place the <small> in <p> and apply the centering to the <p>.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    Quote Originally Posted by ralph.m View Post
    <small> is an inline element, like <span>, so it shouldn't be butted up against a block level element like a <p>, but rather should be inside a <p>. text-align: center is only for block elements, so place the <small> in <p> and apply the centering to the <p>.
    just a clarification:

    but your markup is still valid (x)html.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,096
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Off Topic:

    Quote Originally Posted by webdev1958
    but your markup is still valid (x)html.
    'Valid' is not the same as 'good'.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:


    Quote Originally Posted by ralph.m View Post
    Off Topic:


    'Valid' is not the same as 'good'.
    but I go by whether the W3C thinks it's good or not

    Granted though, that just because html is valid, doesn't mean it will always do what you want as appears to be in this case and so alternative valid code needs to be marked up and/or appropriate css rules need to be set.


  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,096
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Off Topic:

    Quote Originally Posted by webdev1958 View Post
    I go by whether the W3C thinks it's good or not
    So you are ok with table-based layouts?

    Do they say it's 'good' or just allowed?

    As you acknowledge, inline elements can be hard to style if not contained directly in other block elements. I've just found it good practice not to have inline elements up against block elements, and a myriad of layout problems that are posted here arise from such a situation.

    An inline element is not allowed to sit directly inside the <body> element, but it's always seemed good practice to me—as a general rule—to carry this all the way through the document. It's much more reliable than, say, setting inline elements to display: block via CSS.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:


    Quote Originally Posted by ralph.m View Post
    Off Topic:



    So you are ok with table-based layouts?

    Personally, I only use them where I feel it is appropriate to use them. But if someone else prefers to use them some other way then I'm totally fine with that. If asked for my opinion, I will discourage them from using tables if I imo there is a better way, but I will not tell anyone they must not use tables however they like as long as their markup is valid and meets the website's spec's.

    You can lead a horse to water........................................


  8. #8
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ralph.m View Post
    <small> is an inline element, like <span>, so it shouldn't be butted up against a block level element like a <p>, but rather should be inside a <p>. text-align: center is only for block elements, so place the <small> in <p> and apply the centering to the <p>.
    Or, to put it another way, an inline element creates a box that is exactly as big as it is required to be, in order to contain ints content. Within that box, the text is now centred, but as there's no room for manouevre, you don't see any change.

  9. #9
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Simplified explanation:

    text-align: center; centers the CONTENTS of the element to which it is applied (centering is based on the element width).
    SMALL is, by default, an INLINE element; inline elements SHRINK WRAP, that is they are EXACTLY the width of their contents.
    So, FOR EXAMPLE: applying text-align: center; to your SMALL tag CENTERS its 10em of contents in a 10em wrapper, eh wrapper itself, contained WITHIN the DIV , is not centered to the DIV ( this will make sense in a sec).

    So when you use Firebug.. it is, of course going to tell you that the TEXT INSIDE the SMALL tag is centered, cause...IT IS...

    WHAT you really wanted was to CENTER the SMALL tag itself.

    ONE WAY to do this is to give the DIV (#boxFastFigures) text-align:center; This would give you what you want w/o you having to change any of the mark up.

    However , as you can see there has been some issue taken with the way you have marked things up.. I would suggest that the optimal solution is as follows:



    HTML :

    Code:
    <div id="boxFastFigures">
    	<p class="figure">40.2% <small>U.S. Businesses owned by Women (or with majority ownership) in 2006.</small></p>
    </div>
    
    
    #boxFastFigures{
    	padding: 2em 1em;
    }
    
    #boxFastFigures p.figure{
    	font-size: 4em;
    	color: #F00;
    	text-align: center;
    }
    
    #boxFastFigures  p.figure small{
            display:block;0
    	font-size: 0.2em;
    	font-weight: bold;
            color: ( whatever your default color was); 
    }
    THIS IS ASSUMING you could have multiple Fast Figure paragraphs, otherwise the DIV is redundant and I would get rid of it and apply all the styling in the ID and give that to the PARAGRAPH TAG.



    Code:
    
    <p  id="boxFastFigures">40.2%	<small>U.S. Businesses owned by Women (or with majority ownership) in 2006.</small></p>
    
    
    #boxFastFigures {
    	padding: .5em .25em;
    	font-size: 4em;
    	color: #F00;
    	text-align: center;
    }
    
    #boxFastFigures small{
            display:block;0
    	font-size: 0.2em;
    	font-weight: bold;
            color: ( whatever your default color was); 
    }

  10. #10
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    The last explanation sorta went over my head... (Sorry, it is almost 9:00pm, I haven't eaten in a day, and I'm stuck at the Honda Dealer having some emergency repair done.)

    I got the centering fixed, but have noticed a different - bigger - issue...

    Because I have a 4em number next to my <small> (i.e. Text describing the large 4em statistic), my <small> is basing itself *relatively* off of 4em (versus what the I feel CSS should work which is letting <small> base itself off of my <body> em size).

    Anyways...

    I am having a hard time getting <small> to be the size I want and have the proper line-height.

    Here is my updated code...
    Code:
    <!-- Fast Figures -->
    <div id="boxFastFigures">
    	<p class="figure">
    		40.2%
    		<small>U.S. Businesses owned by Women (or with majority ownership) in 2006.</small>
    	</p>
    </div>
    and...
    Code:
    /* FAST FIGURES Styles */
    #boxFastFigures{
    	padding: 2em 1em;
    }
    
    #boxFastFigures p.figure{
    	font-size: 4em;
    	color: #F00;
    	text-align: center;
    }
    
    #boxFastFigures p small{
    	line-height: 0em;
    	font-size: 0.2em;
    	font-weight: bold;
    }

    It's hard to describe what I want, but pretend you are in a word processor...

    I would say I want my Number to be maybe 48 point font and the Descriptive Text below it to be normal 12 point font. (Or put another way, I am happy with the 4em, and maybe the 0.2em is okay, but the line-height on the 0.2em Descriptive Text can't get smaller than 0em and there is still too big of a space between the lines.)

    What is going on??

    See attached...
    Attachment 58340

    Thanks,


    Debbie

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,096
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You know that a font size on the <p> will be inherited by the <small> element inside it. One way around this (my preference) would be to wrap the large number in another element also, such as <span> or <big>

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Experiment</title>
    <style media="all">
    #boxFastFigures{
    	padding: 2em 1em;
    }
    
    #boxFastFigures p.figure{
    	color: #F00;
    	text-align: center;
    	width: 200px;
    }
    
    #boxFastFigures big {
    	font-size: 4em;
    }
    
    #boxFastFigures small{
    	font-size: 1em;
    	font-weight: bold;
    }
    </style>
    </head>
    <body>
    	<div id="boxFastFigures">
    		<p class="figure">
    			<big>40.2%</big>
    			<small>U.S. Businesses owned by Women (or with majority ownership) in 2006.</small>
    		</p>
    	</div>
    </body>
    </html>

  12. #12
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You know that a font size on the <p> will be inherited by the <small> element inside it. One way around this (my preference) would be to wrap the large number in another element also, such as <span> or <big>
    Brilliant idea, Ralph. That solved another problem, BUT... (You knew there was a "but", right?)

    Why can't I get the lines closer together (i.e. why does FireFox ignore my Line-Height: 0.4em)??
    Code:
    	<!-- Fast Figures -->
    	<div id="boxFastFigures">
    		<p class="figure">
    			<big>40.2%</big>
    			<small>U.S. Businesses owned by Women (or with majority ownership) in 2006.</small>
    		</p>
    	</div>
    and...
    Code:
    /* FAST FIGURES Styles */
    #boxFastFigures{
    	padding: 2em 1em;
    }
    
    #boxFastFigures p big{
    	font-size: 4em;
    	color: #F00;
    	text-align: center;
    }
    
    #boxFastFigures p small{
    	line-height: 0.4em;		/* WHY IS THIS BEING IGNORED?? */
    	font-size: 0.9em;
    	font-weight: bold;
    }

    According to FireBug, my <body> Line-Height: 1.4em is being over-ridden...


    Debbie

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,096
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    I don't know exactly, although line-height: 0.4em is drastically small, and should mean lines overlap each other. Perhaps an inline element's line height is restricted by its parent's.

    A way to get more control of the <small>'s line height is to add display: block:

    Code:
    #boxFastFigures p small{
    	line-height: 0.4em;
    	font-size: 0.9em;
    	font-weight: bold;
            display: block;
    }
    Then you will see how drastically small a line-height of 0.4em is.

  14. #14
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    #boxFastFigures p small{line-height: 0.4em; /* WHY IS THIS BEING IGNORED?? */}
    this is exactly the SAME PRINCIPLE you were misunderstanding in your original post. There are better ways to code this WHOLE THING.. but lets solve one issue at a time.

    You are giving line height to your SMALL tag, which is an INLINE element as is the BIG tag.

    So the actual space of a line , visually , is the larger value of the line height of the BIG tag and the SMALL tag and that's what's throwing you off.

    As ralp said ( and I said in my original reply) give the SMALL tag a display of BLOCK and forget about messing with line-heights. ( heck you could even get rid of the BIG tag)


    WHY?

    As Ralph also said font size is inherited. So if the P tag is 48pt ( to follow YOUR units )... and you want the SMALL tag to be 12pt... then all you need is: #boxFastFigures p small {font-size:.25em; display: block; font-weight:bold;}

  15. #15
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    I don't know exactly, although line-height: 0.4em is drastically small, and should mean lines overlap each other. Perhaps an inline element's line height is restricted by its parent's.

    A way to get more control of the <small>'s line height is to add display: block:

    Code:
    #boxFastFigures p small{
    	line-height: 0.4em;
    	font-size: 0.9em;
    	font-weight: bold;
            display: block;
    }
    Then you will see how drastically small a line-height of 0.4em is.
    Okay, so I re-read things and am trying to take your advice - and most of Dresden's advice - but have a new issue.

    Here is my code...
    Code:
    	<!-- Fast Figures -->
    	<div id="boxFastFigures">
    		<p class="figure">
    			<big>40.2%</big>
    			<small>U.S. Businesses owned by Women (or with majority ownership) in 2006.</small>
    		</p>
    	</div>

    and...
    Code:
    /* FAST FIGURES Styles */
    #boxFastFigures{
    	padding: 1em;
    	text-align: center;
    }
    
    #boxFastFigures p big{
    	display: block;
    	line-height: 1em;				/* WHY DO I NEED THIS LINE WHEN <body> HAS LINE-HEIGHT=1.4em */
    	font-size: 4em;
    	color: #F00;
    }
    
    #boxFastFigures p small{
    	display: block;
    	line-height: 1.4em;
    	font-size: 0.9em;
    	font-weight: bold;
    }

    Why do I need a line-height: 1em; for "p big" when my <body> has line-height = 1.4em??

    If I don't add the line line-height: 1em;, then my <small> text creeps up to the <big> statistic?!


    Debbie

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,096
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Why do I need a line-height: 1em; for "p big" when my <body> has line-height = 1.4em??
    That's not what you have on your site currently, and it seems to be working without it.

  17. #17
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Me, I'd just lose the P as an unnecessary element as that's not really a paragraph... why would you put "40%" in a paragraph tag? (but then I say the same thing about IMG)... not sure small is really the right tag either as you're not de-emphasizing the text...

    I'd also axe the pointless comment and the 'box' part of the ID name... Seriously:

    <!-- Fast Figures -->
    <div id="boxFastFigures">

    Really, I never would have guessed. You seem to be doing that a LOT in your code... putting in comments that are identical to what the next line says -- verbose ID and classnames are so you DON'T have to waste time on comments like that.

    As per the rewrite I was doing in your other thread, I'd have that as:
    Code:
    <div id="fastFigures">
      <span>40%</span> U.S. Businesses owned by Women (or with majority ownership) in 2006.
    <!-- #fastFigures --></div>
    Code:
    #fastFigures {
    	padding: 2em 1em;
    	font-weight: bold;
    	text-align: center;
    }
    
    #fastFigures span {
    	display:block;
    	font:normal 4em/1.2em arial,helvetica,sans-serif;
    	/* ALWAYS change the line height to prevent overlap */
    	color: #F00;
    }
    Though given that on your page you have that inside a PX width column it's breaking HORRIBLY on large font systems, which is why that "40%" should either be shown in px, or the column width should be changed to EM's. (likewise I dropped the 0.8em font-size since that's probably too small).

    I'd also give thought to a nested span with a hyphen inside it, set to display:none in the screen CSS for user agents not using said layout.

    Basically you REALLY over-thought the markup and were applying pointless/incorrect meanings... It's not a paragraph, CSS off there's no reason for BIG or SMALL on it meaning it's non-semantic markup... all you need is a DIV and a SPAN. If I WERE to treat it as a paragraph (I wouldn't, it's just not) I'd replace the DIV with it.

  18. #18
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    Me, I'd just lose the P as an unnecessary element as that's not really a paragraph... why would you put "40%" in a paragraph tag?
    You put my Facts inside of <p>'s....


    I'd also axe the pointless comment and the 'box' part of the ID name... Seriously:

    <!-- Fast Figures -->
    <div id="boxFastFigures">

    Really, I never would have guessed. You seem to be doing that a LOT in your code... putting in comments that are identical to what the next line says -- verbose ID and classnames are so you DON'T have to waste time on comments like that.
    Again, I do it because NetBeans shade all PHP and HTML Comments gray and I add them so I can more easily scan my code. (It for NetBeans, not people reading the HTML source from their browsers!)


    As per the rewrite I was doing in your other thread, I'd have that as:
    Code:
    <div id="fastFigures">
      <span>40%</span> U.S. Businesses owned by Women (or with majority ownership) in 2006.
    <!-- #fastFigures --></div>
    Code:
    #fastFigures {
    	padding: 2em 1em;
    	font-weight: bold;
    	text-align: center;
    }
    
    #fastFigures span {
    	display:block;
    	font:normal 4em/1.2em arial,helvetica,sans-serif;
    	/* ALWAYS change the line height to prevent overlap */
    	color: #F00;
    }
    Is the main text inheriting from <body> or <p>??


    What is 4em/1.2em? Line-height 1.2em? 1.2em of what? <p>?


    /* ALWAYS change the line height to prevent overlap */
    What do you mean?


    Though given that on your page you have that inside a PX width column it's breaking HORRIBLY on large font systems, which is why that "40%" should either be shown in px, or the column width should be changed to EM's. (likewise I dropped the 0.8em font-size since that's probably too small).
    Again, how can I use em's and not break Paul O's layout?


    I'd also give thought to a nested span with a hyphen inside it, set to display:none in the screen CSS for user agents not using said layout.
    I don't understand what you are saying?!

    Thanks,


    Debbie

  19. #19
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    Quote Originally Posted by DoubleDee View Post
    .....I do it because NetBeans shade all PHP and HTML Comments gray.......
    just an fyi if you are not aware:

    you can change the colours of the various shading types in NB to whatever you like if you don't like the defaults.

  20. #20
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,057
    Mentioned
    253 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Why do I need a line-height: 1em; for "p big" when my <body> has line-height = 1.4em??

    If I don't add the line line-height: 1em;, then my <small> text creeps up to the <big> statistic?!
    If you set line-height:1.4em on your body, it sets the line-height for the entire document to 1.4 x your body font size. Suppose you set your body to font-size: 1em, to use the visitor's default browser setting. If they have their font size set at 20px (to make the calculation easy ), then the resulting line-height is 28px. Suppose you then set font:size: 1.5em on an element. That will increase the font size to 30px, but the line-height remains at 28px, causing overlapping. You need to reset the line-height on the element itself for the line-height to apply to the new font size. i.e. 20x1.5x1.4 = 42px. Same thing applies if you set the font-size and line-height on body using % - you need to reset the line-height whenever you change the font size.

    However, if you set the body line-height using a raw number with no units, then it is taken as a scaling factor, and used to scale the line-height according to the font-size of the element. So in the above example, when you set the font-size to 1.5em, resulting in 30px text, the line-height is applied as 30x1.4 = 42px. This works for any element, however deeply nested - provided, of course, you haven't over-ridden the line-height declaration elsewhere.

    To me, this is counter-intuitive, as I'd expect % to be a scaling factor, but nevertheless this is how it works. Try playing about with the following code, changing just the body line-height to 1.4em, 140% and 1.4.

    N.B. This is horrible code for test purposes only and you must never, ever, ever, ever write code like this for a real web site. (Thought I'd get that in before DS60 has a hairy fit. )
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Font Scaling</title>
    
    
    <link href="style1.css" rel="stylesheet" type="text/css" />
    
    
    
    </head>
    
    
    
    <body>
    <div id="wrapper">
    <p>A paragraph at default sizing. A paragraph at default sizing. A paragraph at default sizing. A paragraph at default sizing. A paragraph at default sizing. A paragraph at default sizing. A paragraph at default sizing.</p>
    <div id="alpha">
    <p>A paragraph in alpha div. A paragraph in alpha div. A paragraph in alpha div. A paragraph in alpha div. A paragraph in alpha div.</p>
    <div id="bravo">
    <p>A paragraph in bravo div. A paragraph in bravo div. A paragraph in bravo div. A paragraph in bravo div. A paragraph in bravo div.</p>
    <div id="charlie">
    <p>A paragraph in charlie div. A paragraph in charlie div. A paragraph in charlie div. A paragraph in charlie div. A paragraph in charlie div.</p>
    <div id="delta">
    <p>A paragraph in delta div. A paragraph in delta div. A paragraph in delta div. A paragraph in delta div. A paragraph in delta div.</p>
    <div id="echo">
    <h1>A very lengthy heading in echo div that is likely to run over more than one line.</h1>
    <p>A paragraph in echo div. A paragraph in echo div. A paragraph in echo div. A paragraph in echo div. A paragraph in echo div. A paragraph in echo div.</p>
    <div id="foxtrot">
    <p>A paragraph in foxtrot div. A paragraph in foxtrot div. A paragraph in foxtrot div. A paragraph in foxtrot div. A paragraph in foxtrot div.</p>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    
    </div>
    
    </body>
    
    </html>
    Code:
    body {font-family: "Trebuchet MS", "Nimbus Sans L", Helvetica, sans-serif;
    		font-size: 100%;
    		line-height: 1.4;
    		background-color: #000099;
    		color: #333333;
    		}
    		
    h1 {font-size: 2.2em;}
    
    h1, p {padding: 0 1em;}
    		
    #wrapper {width: 40em;
    		margin: auto;
    		background-color: #FFFFFF;
    		}
    		
    #alpha {font-size: 1.2em;}
    
    #bravo {font-size: 0.8em;}
    
    #charlie {font-size: 0.9em;}
    
    #delta {font-size: 2em;}
    
    #echo {font-size: 0.7em;}
    
    #foxtrot {font-size: 3.5em;}
    For those who don't want to test it, the results are like this:
    scaling1-4em.png scaling1-4.png
    The SitePoint reference is helpful on the subject - and probably explains it better than I did.
    Last edited by TechnoBear; Dec 2, 2011 at 09:49. Reason: Trying to delete the wrong attachments


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
  •