Re: [css-d] why are ems rendering large?
-- Original Message --
From: Karl DeSaulniers k...@designdrumm.com
To: CSS-Discuss Discuss css-d@lists.css-discuss.org
Sent: 7/25/2014 4:59:48 AM
Subject: Re: [css-d] why are ems rendering large?
Actually, I believe ems are based on the prior font-size of the element
in which its contained. rems are based on body.
For example, If you have a div in the body with no font-size set and a
span inside that div with font-size set to 120% then it will be 120% of
the body font-size.
However, if the div has a font-size of 110%, then the span would have a
font-size that is 120% of 110% the divs calculated font-size would be
of the body font-size.
Stay with me.. :)
Example 1:
Body font-size = 16px
div font-size = none set
span font-size (120%) = 19.2px
Example2:
Body font-size = 16px
div font-size (110%) = 17.6px
span font-size (120%) = 21.12px
Please someone correct me if I am wrong.
Well, your math is correct, but it shows that the calculated font size
is based on the span's parent font size which is the div.
Now if you had used a rem in your calculation this wouldn't have
occurred because the font size would have been base on the Root font
size; that's the definition of rem, a root-based em.
That's beauty of using rems, they are stable in that they're based on
the root font-size, but they are dynamic and relate to size changes of
objects and screens.
/* Example3: */
body {
font-size: 16px;
}
div style= font-size: 110%/div /*= 17.6 px
*/
span style= font-size: 1.2rem/span /* (1.2 * 16px) = 19.2 px
*/
Michael Rose
HTH,
Best,
Karl DeSaulniers
Design Drumm
http://designdrumm.com
__
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS-based calendars?
- Original Message -
From: Erik Harris [EMAIL PROTECTED]
To: css-d@lists.css-discuss.org
Sent: Tuesday, October 17, 2006 5:16 PM
Subject: [css-d] CSS-based calendars?
I've volunteered to put together a community calendar web page for my
housing community. I could easily put something decent-looking together
with tables, but I'd much rather use a more informational layout, where I
could use CSS to display the calendar as a list or as a traditional
table-esque monthly calendar. Is anyone aware of any examples on the web
of something of this nature already being put into use? I can think of
how
I'd need to organize the data (I'd probably need named styles for each
week
of the month and each day of the week, so that regardless of month, the
dates would display on the correct days, in the correct places on a
generically defined calendar), but I know that creating a
basically-tabular
layout with CSS is often a big challenge.
Erik Harrishttp://www.eHarrisHome.com
-AIM: KngFuJoe - Yahoo IM: kungfujoe7 - ICQ: 2610172-
Chinese-Indonesian Martial Arts Club http://www.kungfu-silat.com
Here's another possibility for you to consider, my calendar (link below) is
currently table-based, but it could very easily be done without them. Where
I now have a table row with pairs of table cells, one for Event (left), the
other for Venue (right), it could be pairs of divs within a div.
(Of course you would have all of your event content divs in a #container
or #content div).
The date pseudo-headers are just the CSS-styled FIRST row of the table for
each day styled with:
(I know there are inconsistencies in my content, it's from getting in a
hurry, cutting and pasting...)
table#calendar-data tr {
background-image: url(images/navshadow.gif);
background-repeat: no-repeat;
}
/*This centers the Dates*/
table#calendar-data td {
text-align: center;
}
/* Rules for Events (left) and Venues (right) cells */
table#calendar-data tr tr {
background-image: none;
}
table#calendar-data td td {
text-align: left;
background-color: #fff;
vertical-align: top;
border-top: none;
border-bottom: 1px solid Black;
width: 50%;
}
The single event posted on the home page is done using three (3) divs and
inline styling so you can see it doesn't involve much to implement my style
of calendar with CSS and divs (no tables).
You surely would want to design it with ALL of your CSS in an external style
sheet, with only your CSS #ids and .classes associated with your x/HTML and
content in your web pages.
Michael S. Rose
Bluegrass Plus Events Calendar
http://mmrose.home.comcast.net/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site Check again please
- Original Message -
From: Professional Web Pages - Information [EMAIL PROTECTED]
To: css-d@lists.css-discuss.org
Sent: Friday, September 08, 2006 12:50 AM
Subject: [css-d] Site Check again please
Hi,
I have fixed the site for 800x600
It was easier then what I first thought it to be, I just had to remove 2
px off everything in the stylesheet
Once again could I please ask for www.TarotCardCombinations.com to be
checked and could somone please explain why I am getting the warnings in
the CSS validator and how to fix it
Regards
PWP
__
They are _harmless_ warnings and can be safely ignored! It would be a very
rare set of circumstances where you would actually need to set the
background-color to prevent problems.
You can just add {background-color : inherit;} to each of the specifications
that are giving the warnings now, and they will go away.
Michael S. Rose
Bluegrass Plus Events Calendar
http://mmrose.home.comcast.net/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Rounded Website
- Original Message - From: Martin Davis III [EMAIL PROTECTED] To: css-d@lists.css-discuss.org Sent: Sunday, February 05, 2006 2:10 AM Subject: [css-d] CSS Rounded Website I'm attempting to make a website with rounded boxes. Seems to be that IE6 is adding space on my box. Can a get a browser check and suggestions to this problem? http://www.smwstudios.com Thanks, Martin I'm not sure what space you're referring to, but the page looks just fine in XP/SP2 and IE7b2? Michael S. Rose Bluegrass Plus Events Calendar http://mmrose.home.comcast.net __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
