9 Replies Latest reply on Jan 21, 2008 9:28 PM by Newsgroup_User

    CSS problem, please help...

    juliez Level 1
      Hi

      I have an irritating problem where my H1 font is displaying as Times new roman rather than Arial. Can anyone who is better at CSS than I am figure out why. You can view the page here... annoying css problem. The h1 code is as follows:

      #mainright h1 {
      font:Arial, Helvetica, sans-serif;
      font-size:1.8em;
      color:#FFFFFF;
      padding: 40px 15px 0 15px;
      font-weight:normal;
      }


      the full style sheet is:

      /* CSS Document */

      *{margin:0; padding:0}

      p {padding-bottom:12px}

      body{
      margin:0px;
      background-color:#E7E7E7;
      }
      #MainContainer{
      margin:0px auto;
      background-color:#660C1B;
      width:746px;
      }
      #Container{
      margin:0px auto;
      background-image:url(images/white_bgcol.gif);
      width:728px;
      }
      #SubContainer{
      margin:0px auto;
      width:692px;
      padding-bottom:14px;
      }
      #Header{
      width:692px;
      margin-bottom:16px;
      }
      #Logo{
      float:left;
      }
      #TopNavigation{
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size:12px;
      color:#413B3B;
      text-decoration:none;
      text-align:left;
      margin-bottom:16px;
      }
      #TopNavigation ul, li{
      display:inline;
      list-style:none;
      margin:0px;
      padding:0px 12px 0px 0px;
      }
      #TopNavigation a{
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size:12px;
      color:#413B3B;
      text-decoration:none;
      text-align:left;
      }
      #TopNavigation a:hover{
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size:12px;
      color:#547e58;
      text-decoration:none;
      text-align:left;
      border-bottom:3px solid #115E58;
      }
      .PicSpace{
      margin-right:2px;
      float:left;
      }
      #BodyContainer{
      width:692px;
      }
      #RightBanners{
      width:334px;
      margin-left:9px;
      float:right;
      }
      #RightBanners .Img{
      margin-bottom:3px;
      }

      #TextBox{
      background-image:url(images/textbox_bg.jpg);
      background-repeat:no-repeat;
      width:349px;
      float:left;
      font-family: Verdana, Arial, sans-serif;
      font-size:11px;
      color:#333333;
      text-decoration:none;
      text-align:left;
      }
      .TextMargin{
      padding:40px 16px 0px 16px;
      }
      #TextBox a{
      font-family: Verdana, Arial, sans-serif;
      font-size:11px;
      color:#333333;
      text-decoration:none;
      text-align:left;
      }
      #TextBox a:hover{
      font-family: Verdana, Arial, sans-serif;
      font-size:11px;
      color:#333333;
      text-decoration:underline;
      text-align:left;
      }
      #TextBox .Heading{
      font-family: Arial, Helvetica, sans-serif;
      font-size:22px;
      font-weight:bold;
      color:#ffffff;
      text-align:left;
      }
      #TextBox .SubHeading{
      font-family: Arial, Helvetica, sans-serif;
      font-size:16px;
      font-weight:bold;
      color:#ffffff;
      text-align:left;
      }

      #TextBox ul
      {
      margin: 0;
      padding: 0;
      list-style-type: none;
      }

      #TextBox li
      {
      display: block;
      padding: 3px 3px 3px 0;
      margin-left:15px;
      text-decoration: none;
      font-weight: normal;
      list-style-type: disc;
      }

      #Footer{
      margin:10px auto 0px auto;
      width:728px;
      font-family: Arial, Helvetica, sans-serif;
      font-size:9px;
      color:#ffffff;
      text-align:left;
      }
      #Footer .Copyrights{
      float:left;
      margin:-4px 3px 18px 0px;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size:21px;
      font-weight:bold;
      color:#ffffff;
      text-align:left;
      }


      #Footer a{
      font-family: Arial, Helvetica, sans-serif;
      font-size:9px;
      color:#ffffff;
      text-align:left;
      text-decoration:none;
      }
      #Footer a:hover{
      font-family: Arial, Helvetica, sans-serif;
      font-size:9px;
      color:#ffffff;
      text-align:left;
      text-decoration:underline;
      }
      #RightBox1{
      background-color:#413B3B;
      width:334px;
      height:180px;
      margin-bottom:10px;
      }
      #RightBox1 a{
      font-family: Arial, Helvetica, sans-serif;
      font-size:11px;
      font-weight:bold;
      color:#72C9EA;
      text-decoration:none;
      }
      #RightBox1 a:hover{
      font-family: Arial, Helvetica, sans-serif;
      font-size:11px;
      font-weight:bold;
      color:#72C9EA;
      text-decoration:underline;
      }
      .RightBoxText{
      padding:10px;
      font-family: Arial, Helvetica, sans-serif;
      font-size:11px;
      font-weight:bold;
      color:#ffffff;
      text-align:left;
      text-decoration:none;
      }
      .HeadingPink{
      font-family: Arial, Helvetica, sans-serif;
      font-size:20px;
      font-weight:bold;
      color:#F000C0;
      text-align:left;
      text-decoration:none;
      }
      .HeadingWhite{
      font-family: Arial, Helvetica, sans-serif;
      font-size:21px;
      font-weight:bold;
      color:#ffffff;
      text-align:left;
      text-decoration:none;
      }
      .HeadingBlack{
      font-family: Arial, Helvetica, sans-serif;
      font-size:24px;
      font-weight:bold;
      color:#000000;
      text-align:left;
      text-decoration:none;
      }
      .HeadingBlue{
      font-family: Arial, Helvetica, sans-serif;
      font-size:20px;
      font-weight:bold;
      color:#72C9EA;
      text-align:left;
      text-decoration:none;
      }
      #RightBox2{
      background-color:#115E58;
      width:334px;
      height:160px;
      margin-bottom:10px;
      }

      #RightBox2 a:link{
      color: #FFCC66;
      text-decoration:none;
      }

      #RightBox2 a:hover{
      color: #fff;
      text-decoration:none;
      }

      #RightBox2 a:visited{
      color: #FF0000;
      text-decoration:none;
      }

      #RightBox2 .Bult{
      background-image:url(images/rbox2_bult.gif);
      background-repeat:no-repeat;
      padding-left:25px;
      padding-bottom:1px;
      }
      #RightBox3{
      background-color:#413B3B;
      padding:10px;
      }
      #RightBox3Text{
      background-color:#FFFFFF;
      padding:10px;
      font-family: Arial, Helvetica, sans-serif;
      font-size:11px;
      font-weight:bold;
      color:#000000;
      text-align:left;
      text-decoration:none;
      }
      .Box3Image{
      float:right;
      margin:40px 0px 40px 10px;
      }
      #LpRightBox{
      background-color:#413B3B;
      padding:10px;
      width:429px;
      margin-left:6px;
      float:right;
      }
      #LpRightBoxText{
      background-color:#FFFFFF;
      padding:10px;
      font-family: Arial, Helvetica, sans-serif;
      font-size:12px;
      color:#000000;
      text-align:left;
      text-decoration:none;
      }
      #LpRBoxHeading{
      background-image:url(images/lptitle_arrow.gif);
      background-repeat:no-repeat;
      font-family: Arial, Helvetica, sans-serif;
      font-size:25px;
      color:#ffffff;
      text-align:left;
      text-decoration:none;
      height:30px;
      padding:0px 0px 5px 50px;
      }



      #LpLeftBox{
      background-image:url(images/lp_lbox_bg.jpg);
      background-repeat:no-repeat;
      width:237px;
      float:left;
      }
      #LpLeftText{
      padding:10px;
      font-family: Verdana, Arial, sans-serif;
      font-size:11px;
      color:#333333;
      text-decoration:none;
      text-align:left;
      }
      .LpLHeading{
      font-family: Arial, Helvetica, sans-serif;
      font-size:25px;
      color:#ffffff;
      text-decoration:none;
      text-align:left;
      }
      .LpLSHeading{
      font-family: Arial, Helvetica, sans-serif;
      font-size:12px;
      font-weight:bold;
      color:#68111E;
      text-decoration:none;
      text-align:left;
      }
      .ButtonsDiv{
      width:174px;
      float:left;
      margin: 0 2px 0 0;

      }
      .BlackButtons{
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size:10px;
      font-weight:bold;
      color:#ffffff;
      text-decoration:none;
      text-align:left;
      display:block;
      width:154px;
      height:25px;
      padding:12px 10px 0px 10px;
      background-color:#413B3B;
      }
      .BlackButtons:hover{
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size:10px;
      font-weight:bold;
      color:#ffffff;
      text-decoration:none;
      text-align:left;
      display:block;
      width:154px;
      height:25px;
      padding:12px 10px 0px 10px;
      background-color:#6F6F6F;
      }

      #LpRightBoxText ul
      {
      margin: 0 0 10px 0;
      padding: 0;
      list-style-type: none;
      }

      #LpRightBoxText li
      {
      display: block;
      padding: 3px 3px 3px 0;
      margin-left:15px;
      text-decoration: none;
      font-weight: normal;
      list-style-type: disc;
      }

      a:link img{
      border:none;
      }

      #mainleft {
      float:left;
      width:342px;
      height:209px
      }
      #mainright {
      float:left;
      width:350px;
      height:209px;
      background:url(images/lp_pic02.jpg) no-repeat;
      }


      #mainright h1 {
      font:Arial, Helvetica, sans-serif;
      font-size:1.8em;
      color:#FFFFFF;
      padding: 40px 15px 0 15px;
      font-weight:normal;
      }

      .author {
      font:Verdana, Arial, Helvetica, sans-serif;
      font-size:.8em;
      color:white;
      margin:0;
      padding-left:15px;}





      Any help appreciated.

      Julie
        • 1. Re: CSS problem, please help...
          Level 7
          font-weight:normal;
          }

          padding-left:15px;}


          There's an extra brace in there.

          --
          Murray --- ICQ 71997575
          Adobe Community Expert
          (If you *MUST* email me, don't LAUGH when you do so!)
          ==================
          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
          ==================


          "ukjooles" <webforumsuser@macromedia.com> wrote in message
          news:fn22j6$4e7$1@forums.macromedia.com...
          > Hi
          >
          > I have an irritating problem where my H1 font is displaying as Times new
          > roman
          > rather than Arial. Can anyone who is better at CSS than I am figure out
          > why.
          > You can view the page here... http://server29.dedicateduk.com/~bni/. The
          > h1
          > code is as follows:
          >
          > #mainright h1 {
          > font:Arial, Helvetica, sans-serif;
          > font-size:1.8em;
          > color:#FFFFFF;
          > padding: 40px 15px 0 15px;
          > font-weight:normal;
          > }
          >
          > padding-left:15px;}
          >
          >
          ...snip...
          >
          >

          >
          > Any help appreciated.
          >
          > Julie
          >

          • 2. Re: CSS problem, please help...
            juliez Level 1
            Sorry Murray, that was an posting problem, and wasn't actually in the code. Any other ideas?

            Julei
            • 3. Re: CSS problem, please help...
              Level 7
              On Mon, 21 Jan 2008 12:18:46 +0000 (UTC), "ukjooles"
              <webforumsuser@macromedia.com> wrote:

              > #mainright h1 {
              > font:Arial, Helvetica, sans-serif;
              > font-size:1.8em;
              > color:#FFFFFF;
              > padding: 40px 15px 0 15px;
              > font-weight:normal;
              > }

              Change the above to this:

              #mainright h1 {
              font: 1.8em Arial, Helvetica, sans-serif;
              color:#FFFFFF;
              padding: 40px 15px 0 15px;
              }

              Gary
              • 4. Re: CSS problem, please help...
                juliez Level 1
                Thanks Gary, that fixed it, you have helped move my CSS skills on significantly here!

                Cheers
                Julie
                • 5. Re: CSS problem, please help...
                  Level 7
                  On Mon, 21 Jan 2008 15:33:07 +0000 (UTC), "ukjooles"
                  <webforumsuser@macromedia.com> wrote:

                  >Thanks Gary, that fixed it, you have helped move my CSS skills on significantly here!

                  You're welcome, Julie. Do you understand why the fix worked?

                  Gary
                  • 6. Re: CSS problem, please help...
                    jcdesigns Level 1
                    Even if she does, can you explain anyway Gary? All I see is short hand for the same thing. Is it because you have listed the size before the face now? Getting rid of the font-weight seems fine, since it would default to that anyway.
                    • 7. Re: CSS problem, please help...
                      Level 7
                      It's because the minimum required values for the short-hand "font" stylename
                      are size and family. Use only one of those and the rule is ignored.

                      --
                      Murray --- ICQ 71997575
                      Adobe Community Expert
                      (If you *MUST* email me, don't LAUGH when you do so!)
                      ==================
                      http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                      http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                      ==================


                      "jcdesigns" <webforumsuser@macromedia.com> wrote in message
                      news:fn2sls$2ps$1@forums.macromedia.com...
                      > Even if she does, can you explain anyway Gary? All I see is short hand for
                      > the
                      > same thing. Is it because you have listed the size before the face now?
                      > Getting
                      > rid of the font-weight seems fine, since it would default to that anyway.
                      >

                      • 8. CSS problem, please help...
                        jcdesigns Level 1
                        ahhh...thank you sir. I pretty much use only long hand version (that is just the way I am), so I was not aware of that.
                        • 9. Re: CSS problem, please help...
                          Level 7
                          On Mon, 21 Jan 2008 19:43:56 +0000 (UTC), "jcdesigns"
                          <webforumsuser@macromedia.com> wrote:

                          >Even if she does, can you explain anyway Gary? All I see is short hand for the
                          >same thing. Is it because you have listed the size before the face now? Getting
                          >rid of the font-weight seems fine, since it would default to that anyway.


                          What Murray said. Or, to explain in a bit more depth:

                          #mainright h1 {
                          font:Arial, Helvetica, sans-serif;
                          font-size:1.8em;
                          color:#FFFFFF;
                          padding: 40px 15px 0 15px;
                          font-weight:normal;
                          }

                          The above rule does not provide a valid value for the shorthand font
                          property. Thus causing the rule to be ignored. One way to fix it would
                          be:

                          #mainright h1 {
                          font-family:Arial, Helvetica, sans-serif;
                          font-size:1.8em;
                          color:#FFFFFF;
                          padding: 40px 15px 0 15px;
                          font-weight:normal;
                          }

                          I used the following:

                          #mainright h1 {
                          font: 1.8em Arial, Helvetica, sans-serif;
                          color:#FFFFFF;
                          padding: 40px 15px 0 15px;
                          }

                          This fix combines the font-size and font-family into a valid shorthand
                          font rule. Doing that also overrides a normal browser default (in most
                          cases) of using boldface type for the heading. Because I did that, I
                          could eliminate the font-weight rule.

                          Gary