<small> not styling

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


<!-- 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>


/* 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

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

Off Topic:

just a clarification:

but your markup is still valid (x)html.

Off Topic:

‘Valid’ is not the same as ‘good’. :slight_smile:

Off Topic:

but I go by whether the W3C thinks it’s good or not :wink:

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.

Off Topic:

So you are ok with table-based layouts? :smiley:

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.

Off Topic:

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… :slight_smile:

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.

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… :slight_smile:

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 :



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




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


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.) :frowning:

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…


<!-- 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…


/* 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.) :frowning:

What is going on??

See attached…

Thanks,

Debbie

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>


<!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>

Brilliant idea, Ralph. That solved another problem, BUT… (You knew there was a “but”, right?) :wink:

Why can’t I get the lines closer together (i.e. why does FireFox ignore my Line-Height: 0.4em)??


	<!-- 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…


/* 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

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:

#boxFastFigures p small{
	line-height: 0.4em;
	font-size: 0.9em;
	font-weight: bold;
        [COLOR="#FF0000"]display: block;[/COLOR]
}

Then you will see how drastically small a line-height of 0.4em is.

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

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…


	<!-- 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…


/* 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

That’s not what you have on your site currently, and it seems to be working without it.

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:


<div id="fastFigures">
  <span>40%</span> U.S. Businesses owned by Women (or with majority ownership) in 2006.
<!-- #fastFigures --></div>


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

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:


<div id="fastFigures">
  <span>40%</span> U.S. Businesses owned by Women (or with majority ownership) in 2006.
<!-- #fastFigures --></div>


#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

Off Topic:

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.

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 :slight_smile: ), 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. :slight_smile:

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. :slight_smile: )

<!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>
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:

The SitePoint reference is helpful on the subject - and probably explains it better than I did. (: