Header Size Problems

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Michael7
    New Member
    • Sep 2007
    • 47
    #1

    Header Size Problems

    Well everyone,

    Out of all the troubles and problems and such that I've been having, I decided with each one of those to just move around them or forget about trying to do what I wanted to do.

    It comes down to this thing though that I didn't notice before. My site has larger text. I know the issue IE has with resizing text and all, so I use % instead of em.

    But that's not my problem (I think). My problem is that the headers become larger along with the text! I had them all set to be 100%, thinking that'd fix it. However, when viewing the headers like h4 in particular, it shows the header to be very much larger than it should be.

    I've been trying to figure out the percentages for each of the headers, but can't find it. Then I realized that will not fix matters because it will be relevant to the containing div which has a font of 150%.

    Can anyone please tell me, is there a way to keep the headers at their normal size?

    This is the css concerning sizing and all:
    [HTML]
    /*Main Text Area*/
    .maintext {
    font-size: 150%; /*Use percent instead of em, due to IE bug*/
    }
    .maintext h1, .maintext h2, .maintext h3, .maintext h4, .maintext h5, .maintext h6 {
    font-size: 100%;
    text-align: center;
    }
    [/HTML]

    I truly appreciate the help in this, especially to those who have been helping me!

    ~Michael
    Tags: None
    • drhowarddrfine
      Recognized Expert Expert
      • Sep 2006
      • 7434
      #2
      You have the right idea but the implementation is wrong. To fix the IE problem, just set the body to a percentage:
      body{font-size:100%}

      Then you can use ems everywhere else. So, 1.5em would be equal to 150%.

      If in any particular div, if it has the <body> as the parent, you could say:
      this_div{ font-size:1.5em }

      and that div will have, as its base size for all fonts, 150%. But if you want .maintext to be a normal size, you don't have to do anything because it will inherit its parent size of 100% which is also equal to 1em.

      [HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
      <html>
      <head>
      <title>Exampl e Background</title>
      <style type="text/css">
      body{ font-size:100% }

      .maintext h1, .maintext h2, .maintext h3, .maintext h4, .maintext h5, .maintext h6 {
      text-align: center;
      }
      .maintext2 h1, .maintext2 h2, .maintext2 h3, .maintext2 h4, .maintext2 h5, .maintext2 h6 {
      font-size:1.5em;
      text-align: center;
      }
      .maintext3 h6 {
      font-size: .75em;
      text-align: center;
      }
      </style>
      </head>
      <body>
      <div class="maintext ">
      <h1>Hello</h1>
      <h2>Hello</h2>
      <h3>Hello</h3>
      <h4>Hello</h4>
      <h5>Hello</h5>
      <h6>Hello</h6>
      </div>

      <div class="maintext 2">
      <h1>Hello</h1>
      <h2>Hello</h2>
      <h3>Hello</h3>
      <h4>Hello</h4>
      <h5>Hello</h5>
      <h6>Hello</h6>
      </div>

      <div class="maintext 3">
      <h1>Hello</h1>
      <h2>Hello</h2>
      <h3>Hello</h3>
      <h4>Hello</h4>
      <h5>Hello</h5>
      <h6>Hello</h6>
      </div>
      </body>
      </html>[/HTML]

        Comment

        • drhowarddrfine
          Recognized Expert Expert
          • Sep 2006
          • 7434
          #3
          The base font size of browsers is 16px. Some people like to set the body to font-size:62.5%. This then makes the base size 10px. So
          1em=10px
          1.2em=12px
          1.4em=14px
          and so on. Easier to remember.

            Comment

            • Michael7
              New Member
              • Sep 2007
              • 47
              #4
              Thanks, drhowarddrfine! I hadn't thought of the body tag . . .

              You've definitely been a great help with all this. I feel bad though that a lot seems to fall on you! But, I do thank you very much for all the help!

              Still continuing to learn!

              ~Michael

                Comment

                Previous template Next
                Working...