Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Inline relative Text sizing vs using Styles...

Posted on 2006-04-17
1
Medium Priority
?
127 Views
Last Modified: 2010-04-09
Hi,

I have noticed something odd trying to do some relative sizing of text.

If I say:

font-size:57% in the CSS Style Sheet Section, I get text about 7 pts.

however, if I say:

font-size:57% as an inline Span attribute, I get really tiny text (like 2 pts).

Why the difference?

M
0
Comment
Question by:MitchellVII
1 Comment
 
LVL 7

Accepted Solution

by:
JeffHowden earned 2000 total points
ID: 16473829
That's the "cascading" part of CSS.  How relative sizing works is that the size is relative to the size specified for all containing elements.  For example, suppose you had 16px defined for the body tag, 75% defined for p tags, and 50% defined for small tags.  Using the following markup fragment:

<body>
  I'm rendered at 16px.
  <p>I'm rendered at 75% of my containing element (16px) or 12px.  And, when you encounter <small>you should see me rendered at 50% of my containing element (12px) or 6px.</small>
</body>

This is probably the single biggest reason to be very careful about defining relative sizes on elements that will be nested.

Does that make sense?
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Suggested Courses

571 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question