15 Replies Latest reply on Jan 21, 2009 8:23 AM by Newsgroup_User

    CSS Text Formatting

    ethomasmcginnis
      So I'm formatting my text with CSS and it's not showing up the way it should in my browser. Do you know of any reasons why it wouldn't work (that aren't in the regular Dreamweaver help?) I've reread all the info about CSS text formatting and as far as I know I am doing it right!!

      Thanks in advance to any replies!
        • 1. Re: CSS Text Formatting
          Level 7
          Show us your attempt, please. The answer is in the code.

          --
          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
          ==================


          "ethomasmcginnis" <webforumsuser@macromedia.com> wrote in message
          news:gl5llt$l1h$1@forums.macromedia.com...
          > So I'm formatting my text with CSS and it's not showing up the way it
          > should in
          > my browser. Do you know of any reasons why it wouldn't work (that aren't
          > in the
          > regular Dreamweaver help?) I've reread all the info about CSS text
          > formatting
          > and as far as I know I am doing it right!!
          >
          > Thanks in advance to any replies!
          >

          • 3. Re: CSS Text Formatting
            jon-dw
            You have not said how it should look. Besides formating in CSS. you are also formatting your text with <font> in HTML
            eg <p class="tablist"><font face="Geneva, Arial, Helvetica, san-serif"><font face="Helvetica, san-serif">Graphic Design and Creative Services. Remove <font face="Geneva, Arial, Helvetica, san-serif"><font face="Helvetica, san-serif"> </font></font>.
            The 3 right panels use class="tablist". which has the text colour as #3d3938 which is readable on the orange panel, but not on the 2 darker panels. One method would be to have at least 2 classes and 3 if you want you want a different text colour on each panel. tablist2 could be set to #ccccff which is pale blue for the dark blue panel.
            If you require the font to be Geneva, Arial, Helvetica, san-serif"
            change font-family to font-family: Geneva, Arial, Helvetica, san-serif; in the CSS


            • 4. Re: CSS Text Formatting
              Level 7
              Don't use the <font> tag at all.

              --
              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
              ==================


              "John-in-UK" <webforumsuser@macromedia.com> wrote in message
              news:gl6ebp$ilm$1@forums.macromedia.com...
              > You have not said how it should look. Besides formating in CSS. you are
              > also
              > formatting your text with <font> in HTML
              > eg <p class="tablist"><font face="Geneva, Arial, Helvetica,
              > san-serif"><font
              > face="Helvetica, san-serif">Graphic Design and Creative Services. Remove
              > <font
              > face="Geneva, Arial, Helvetica, san-serif"><font face="Helvetica,
              > san-serif">
              > </font></font>.
              > The 3 right panels use class="tablist". which has the text colour as
              > #3d3938
              > which is readable on the orange panel, but not on the 2 darker panels. One
              > method would be to have at least 2 classes and 3 if you want you want a
              > different text colour on each panel. tablist2 could be set to #ccccff
              > which is
              > pale blue for the dark blue panel.
              > If you require the font to be Geneva, Arial, Helvetica, san-serif"
              > change font-family to font-family: Geneva, Arial, Helvetica, san-serif;
              > in
              > the CSS
              >
              >
              >
              >

              • 5. Re: CSS Text Formatting
                ethomasmcginnis Level 1
                Funny you should say that the class 'tablist' is set to that gray, it is set to white #FFF in the CSS dialog box. I just went back to double check it! Do I need to go into the styles document and manually fix that in the code? Shouldn't Dreamweaver change that when I edit it in the dialog box??

                Also, I don't think I purposely used the <font> code. Is that an automatic thing I have to go through and remove in the code too? When the styles I wanted weren't showing up in my previewing, I went back and selected all the text and made sure the HTML properties showed format 'none.'

                Oh, at some point in the editing, I think I set all the h1-h3...but decided not to use those. So, should I delete that from the code? Is it screwing anything up?
                Thanks again.
                • 6. Re: CSS Text Formatting
                  Stuart Haiz Level 1
                  If you use the <p> tag selector you can control all your line-height etc. Also, use the h1 tag as it will help with SEO & apply bottom margins/padding rather than add empty <p> tags.

                  If you edit your styles in code view, you can see the changes with F5 (refresh). Make sure you save them...
                  • 7. Re: CSS Text Formatting
                    ethomasmcginnis Level 1
                    Just to boil down this problem: the style sheet defines the class with #FFF, it's in the code!!! But the browser displays it as some other color. What should I do?

                    Thanks Sirius for the other tips. I'll try changing those things.
                    • 8. Re: CSS Text Formatting
                      Level 7
                      http://www.communicationssquared.com/c2styles.css

                      .tablist {
                      font-family: Verdana, Geneva, sans-serif;
                      font-size: 12px;
                      line-height: 14px;
                      font-weight: normal;
                      color: #3d3938;
                      }

                      Looks like #3D3938 is how that text will be shown by virtue of this rule,
                      no?

                      Where are you seeing a different color specification?

                      --
                      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
                      ==================


                      "ethomasmcginnis" <webforumsuser@macromedia.com> wrote in message
                      news:gl7dtk$q2n$1@forums.macromedia.com...
                      > Just to boil down this problem: the style sheet defines the class with
                      > #FFF,
                      > it's in the code!!! But the browser displays it as some other color. What
                      > should I do?
                      >
                      > Thanks Sirius for the other tips. I'll try changing those things.
                      >

                      • 9. Re: CSS Text Formatting
                        Level 7
                        On Wed, 21 Jan 2009 15:10:44 +0000 (UTC), "ethomasmcginnis"
                        <webforumsuser@macromedia.com> wrote:

                        >Just to boil down this problem: the style sheet defines the class with #FFF,
                        >it's in the code!!! But the browser displays it as some other color. What
                        >should I do?

                        The style sheet at http://www.communicationssquared.com/c2styles.css
                        defines the color for the class tablist as #3d3938. That's the color
                        that's being displayed.

                        Gary
                        • 10. Re: CSS Text Formatting
                          Level 7
                          By the way, open your page in FF, and increase the text size two ticks. Is
                          that how you want things to look?

                          --
                          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
                          ==================


                          "ethomasmcginnis" <webforumsuser@macromedia.com> wrote in message
                          news:gl7dtk$q2n$1@forums.macromedia.com...
                          > Just to boil down this problem: the style sheet defines the class with
                          > #FFF,
                          > it's in the code!!! But the browser displays it as some other color. What
                          > should I do?
                          >
                          > Thanks Sirius for the other tips. I'll try changing those things.
                          >

                          • 11. Re: CSS Text Formatting
                            jon-dw Level 1
                            On the page on the web
                            .tablist it is set to #3d3938
                            .tabhead it is set to #FFF

                            tabhead is used at the top of the 3 panels
                            tablist is used in the text that is under the heading, tabhead. Both show in colours as per css white & dark grey.

                            If you have tablist set to #FFF, you possibly have not uploaded that change in the c2styles.css file, to the web site.


                            • 12. Re: CSS Text Formatting
                              ethomasmcginnis Level 1
                              Ok, you guys have been patient and helpful...I think I've got the problem figured out and I'm feeling stupid!! I have my site loaded in a folder on the current website called "C2newsite" but the style sheet had been loaded into the main folder once in the process. I had updated the color to be white and loaded that updated style sheet into the C2newsite folder, but the file in the main site folder was still there with the old code.

                              The only thing I don't understand is why the browser would choose to read that old css file rather than the one in the same folder with the html doc. (the link to that style sheet is relative)

                              But now I have a solution. Thanks for all your comments!!! You really did help me figure it out!

                              • 13. Re: CSS Text Formatting
                                ethomasmcginnis Level 1
                                Murray *ACE*
                                what do you mean open it in FF?
                                The size was not concerning me at this time, just wanted the color right. I do think I'll increase the size a little now though.
                                • 14. Re: CSS Text Formatting
                                  Level 7
                                  The link to the stylesheet is ROOT RELATIVE -

                                  <link href="/c2styles.css" rel="stylesheet" type="text/css" />

                                  That means it will look for that stylesheet in the root of the website, NOT
                                  at the location of the current document. If you are confused about the
                                  difference between ROOT relative and DOCUMENT relative links, read these -

                                  http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_13129&sliceId=2
                                  http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_15546&sliceId=2

                                  --
                                  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
                                  ==================


                                  "ethomasmcginnis" <webforumsuser@macromedia.com> wrote in message
                                  news:gl7hol$1gc$1@forums.macromedia.com...
                                  > Ok, you guys have been patient and helpful...I think I've got the problem
                                  > figured out and I'm feeling stupid!! I have my site loaded in a folder on
                                  > the
                                  > current website called "C2newsite" but the style sheet had been loaded
                                  > into the
                                  > main folder once in the process. I had updated the color to be white and
                                  > loaded
                                  > that updated style sheet into the C2newsite folder, but the file in the
                                  > main
                                  > site folder was still there with the old code.
                                  >
                                  > The only thing I don't understand is why the browser would choose to read
                                  > that
                                  > old css file rather than the one in the same folder with the html doc.
                                  > (the
                                  > link to that style sheet is relative)
                                  >
                                  > But now I have a solution. Thanks for all your comments!!! You really did
                                  > help
                                  > me figure it out!
                                  >
                                  >
                                  >

                                  • 15. Re: CSS Text Formatting
                                    Level 7
                                    I mean browse to the page you linked earlier in this thread in FF. Then
                                    increase the text size in the browser by two ticks (Ctrl-+ twice). This is
                                    the price you pay for using absolute positioning as a layout tool. It's
                                    not.

                                    --
                                    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
                                    ==================


                                    "ethomasmcginnis" <webforumsuser@macromedia.com> wrote in message
                                    news:gl7hun$1me$1@forums.macromedia.com...
                                    > Murray *ACE*
                                    > what do you mean open it in FF?
                                    > The size was not concerning me at this time, just wanted the color right.
                                    > I do think I'll increase the size a little now though.