1 Reply Latest reply on May 1, 2010 5:01 PM by Nancy OShea

    CSS styling of H tags, ems and need help please?

    charlieapple Level 1

      Hello!  Someone please save me the next several hours/days/years of my life trying to figure out my puzzle!  I am using DW CS4.  I have used CSS and manage okay with other sites.  I am building a site currently and have to comply with client's standards so am having to enter into new territories (having got away with murder so far!).  I have to use ems instead of what I'm used to so am trying to learn about them.  I've got the sizing as I want it on the page just by experimenting with different sizes and choosing what looks best.  I also have to use the H tags in proper hierarchical fashion which I've never bothered with before and it all seems fine.  I'm just building one page to be the template but don't want to create all my pages obviously until I've got this working right.  I don't do HTML, only Dreamweaver, so have little/no understanding of div and span tags, etc.

       

      At the moment, I have created the H tags to look as I want them to on my main content area on the page.  On my right column though, when I use the same H tags, the font is a bigger size when I apply a class to it, or when no class is applied it doesn't follow the font/size/colour at all it seems.  Please could someone look at the code on my page at http://www.generatorbusinesscentre.co.uk/index5.html and tell me why the font on the right saying Heading 3 is different than the font in the main centre column where it also says Heading 3 (I've also added the H1, H2, etc., so you can see how I want it to look.  I suspect it's something to do with the ems I'm trying to use.

       

      Please help!!!!  Thanks so much.  CSS style sheet pasted here also in case that helps.

       

      .leftnav {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 0.8em;
      }
      .leftnav a:link {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 1em;
      font-weight: bold;
      color: #6C0036;
      text-decoration: none;
      }
      .leftnav a:visited {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 1em;
      font-weight: bold;
      color: #6C0036;
      text-decoration: none;
      }
      .leftnav a:hover {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 1em;
      font-weight: bold;
      color: #31849b;
      text-decoration: none;
      }
      .leftnav a:active {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 1px;
      font-weight: bold;
      color: #31849b;
      text-decoration: none;
      }

      .lowernav {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 0.65em;
      color: #760D38;
      }
      .lowernav a:link {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 1em;
      font-weight: bold;
      color: #6C0036;
      text-decoration: none;
      }
      .lowernav a:visited {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 1em;
      font-weight: bold;
      color: #6C0036;
      text-decoration: none;
      }
      .lowernav a:hover {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 1em;
      font-weight: bold;
      color: #31849b;
      text-decoration: none;
      }
      .lowernav a:active {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 1em;
      font-weight: bold;
      color: #31849b;
      text-decoration: none;
      }
      h1 {
      font-size: 2em;
      font-weight: bold;
      color: #760D38;
      font-family: Arial, Helvetica, sans-serif;
      }
      h2 {
      font-size: 1.3em;
      font-weight: bold;
      color: #31849b;
      font-family: Arial, Helvetica, sans-serif;
      }
      h3 {
      font-size: 1em;
      font-weight: bold;
      color: #760D38;
      font-family: Arial, Helvetica, sans-serif;
      }
      h4 {
      font-size: 1em;
      color: #31849b;
      font-family: Arial, Helvetica, sans-serif;
      }
      .main {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 0.8em;
      color: #000;
      line-height: normal;
      font-weight: normal;
      }

      .main a:link {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 1em;
      font-weight: normal;
      color: #6C0036;
      text-decoration: underline;
      line-height: normal;
      }
      .main a:visited {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 1em;
      font-weight: normal;
      color: #6C0036;
      text-decoration: underline;
      line-height: normal;
      }
      .main a:hover {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 1em;
      font-weight: normal;
      color: #31849b;
      text-decoration: underline;
      line-height: normal;
      }
      .main a:active {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 1em;
      font-weight: normal;
      color: #31849b;
      text-decoration: underline;
      line-height: normal;
      }
      .rightcol {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 0.9em;
      color: #760D38;
      line-height: normal;
      font-weight: normal;
      }
      .rightcol a:link {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 1em;
      font-weight: normal;
      color: #6C0036;
      text-decoration: underline;
      line-height: normal;
      }
      .rightcol a:visited {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 1em;
      font-weight: normal;
      color: #6C0036;
      text-decoration: underline;
      line-height: normal;
      }
      .rightcol a:hover {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 1em;
      font-weight: normal;
      color: #31849b;
      text-decoration: underline;
      line-height: normal;
      }
      .rightcol a:active {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 1em;
      font-weight: normal;
      color: #31849b;
      text-decoration: underline;
      line-height: normal;
      }