0

I'm new to css so I'm sorry if this is a dumb question.

I was making a site and used this:

body {
  font-size: 80%;
}

Later, actually today, I tried to apply EricMeyer's CSS reset to my page above the 80% declaration, but it's causing all sorts of trouble with my font sizing.

I didn't think it would be an issue because I thought font-size 100% wouldn't change the font, it would just be "use the font of your parent" but that's not the case.

What does this font-size 100% declaration actually do? Why is it applied to every element in the reset (i.e. html,body,div,span,a,b,i,font,etc {font-size} rather than just the body{font-size} I was using, which seemed to be inherited fine)?

Before I "just remove the 100%" I'd like to know what it's actually doing. What does 100% actually mean, and why does Mr. Meyer apply it to a bunch of elements rather than just the body like I was doing?

Kristina
  • 582
  • 1
  • 3
  • 10

2 Answers2

1

Does using font-size: 0.8em; work? Since 1em is "the size of a character", 0.8em should give you what you want.

Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
0

The problem for you is that Meyer, is setting more and just the body element to 100%.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

A quick fix would be to change Meyers font-size: 100%; to font-size: 80%;

The font-size: 100%; is just used for resetting the style to be similar in all browsers, I believe IE6 is having some problems with this.

Allan Kimmer Jensen
  • 4,333
  • 2
  • 31
  • 53
  • If I change the font-size to 80% in Meyers reset, everything on the page gets too small to read. – Kristina Nov 15 '10 at 13:21
  • Oh, I forgot they are relative. Why do you want to apply this reset? Just asking because you don't really need them that much, some even say they are bad. http://meiert.com/en/blog/20080419/reset-style-sheets-are-bad/ – Allan Kimmer Jensen Nov 15 '10 at 13:31
  • Because I thought they were supposed to make things more consistent across browsers. To be fair, everything else seems really straightforward, but it's just this font thing that's killing me. I don't understand how inheriting 100% even changes the size, let alone why it's only really affecting certain elements. At this point, my goal is more in understanding wtf is going on than "just fixing the issue." I like knowledge. I want more of it. I just can't figure out the problem here and it's driving me crazy. – Kristina Nov 15 '10 at 13:39
  • This is true, but they can also do more harm than good. I believe that the 100% is to fix some IE inheritance bugs. You should be fine by typing in a number like 16px, 80% of 16px = 12.8px. So you can define 12.6px as your body font and it should be like before. Also remember that HTML which is also in the reset is before body. – Allan Kimmer Jensen Nov 15 '10 at 13:55
  • I'll just set it back to the body only font-size and let normal inheritance work its magic. If IE gets funky, I'll just add some IE-only CSS to fix it. I just wish I knew what was going on. – Kristina Nov 15 '10 at 13:58
  • Sounds good. I wish I could help more, but theres bugs are strange by nature. I – Allan Kimmer Jensen Nov 15 '10 at 14:04
  • Sounds good. I wish I could help more. I recommended reading Jens O. Meiert's blog about CSS resets, some of the stuff it does, is not even nessary. – Allan Kimmer Jensen Nov 15 '10 at 14:06