27 Replies Latest reply: Mar 13, 2012 6:49 PM by KariB RSS

    CSS text disappears in design view

    S_Wills Community Member

      I keep running into this issue.  After I apply CCS, some of it disappears.  Not always and not the same CSS style, although H1 seems to have greatest number of times when I change the stye from none to H1 and my text just goes poof!  It's there in Live View and in the Browsers just not in Design View. I have all my visual aids on.  Thanks for any help!

        • 1. Re: CSS text disappears in design view
          Nancy O. CommunityMVP

          You're not giving us much to go on.

           

          Which version of DW, which OS?

          Does this happen with all of your sites or just one?

          Does your CSS and HTML code pass validation?

           

               Code Validation Tools
               ------------------------------------
               CSS - http://jigsaw.w3.org/css-validator/
               HTML - http://validator.w3.org/

           

           

           

          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists
          http://alt-web.com/
          http://twitter.com/altweb

          • 2. Re: CSS text disappears in design view
            MurraySummers CommunityMVP

            OK - I'll say it.  CAN WE JUST SEE THE CODE!

             

            There - I feel better!

            • 3. Re: CSS text disappears in design view
              S_Wills Community Member

              DW from CS4
              Mac OS 10.6.4

               

              It happens with various sites.

               

              Never on the browser; just in Design View
              I ran one site through Validator and it came up with some parsing errors which since the CSS was entirely through DW interface, I find odd.

              • 4. Re: CSS text disappears in design view
                S_Wills Community Member

                  Sure you can see the code!

                 

                Best way?  If you want the source, here: http://www.acappellago.org/director.html [for example, in Design View in DW, I can't see the header "Dennis Smith" or any of the text in the links down the side.  The orange lines appear.

                 

                Here's the CSS:

                http://www.acappellago.org/default-09.css

                 

                Thanks for any and all help!

                • 5. Re: CSS text disappears in design view
                  S_Wills Community Member

                  Hey Murray and Nancy

                   

                  Just read your posts on showing the code. And yeah, I'm a newbie at posting.  Lesson learned, I hope and no hard feelings??

                  • 6. Re: CSS text disappears in design view
                    Nancy O. CommunityMVP

                    50 errors in your markup.

                    http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.acappellago.org%2Fdirector.ht ml

                     

                    iPhone.css file is not found on server.

                     

                    default_09.css is malformed..  Delete everything shown below in red, add missing bracket shown in blue.

                     

                    </style>

                    .thrColFixHdr #container #mainContent table tr td table tr td h3 {

                     

                    {       /**DUPLICATED STYLES**/
                         font-style: italic;
                         font-weight: normal;
                         border-top-style: none;
                         border-right-style: none;
                         border-bottom-style: none;
                         border-left-style: none;

                    }

                     

                    {
                    div#links a:hover span {
                    display: block;
                    position: absolute; top: 200px; left: 0; width: 125px;
                    padding: 5px; margin: 10px; z-index: 100;
                    color: #AAA; background: black;
                    }

                    #mainContent #directions {
                    visibility: hidden;
                    width: 300px;
                    }

                     

                     

                    Nancy O.
                    Alt-Web Design & Publishing
                    Web | Graphics | Print | Media  Specialists
                    http://alt-web.com/
                    http://twitter.com/altweb

                    • 7. Re: CSS text disappears in design view
                      MurraySummers CommunityMVP

                      Here's an important concept - before working on any issues on a page, make sure that the code is completely valid.

                       

                      Your page has an XHTML doctype, but you have many non-XHTML usages.  That's easy to fix - open the template in DW, and use FILE | Convert > XHTML 1.0 Transitional (or whatever doctype you want as your standard).

                       

                      You have some wonky code in your iframe tag, and an image without an alt attribute, and an anchor tag that's duplicated (the igive.com/singers link), but nothing more serious than that.  Fixing those errors allows the page to be valid XHTML 1.0 Transitional.

                       

                      Just so you'll know, I don't have a problem seeing either the <h1> header or the links down the side in CS5 Design view.  I do know that CS4 could be confused by floated layouts, and I suspect that this is a part of your visualization problem.  Do you see those elements in Live view?

                      • 8. Re: CSS text disappears in design view
                        MurraySummers CommunityMVP

                        Nancy:

                         

                        I believe most of those errors are in the page loaded into the IFRAME, no? And most of them are due to unprotected javascript.  Are you seeing that?

                        • 9. Re: CSS text disappears in design view
                          Nancy O. CommunityMVP

                          I believe most of those errors are in the page loaded into the IFRAME, no? And most of them are due to unprotected javascript.  Are you seeing that?

                           

                          I see what you mean.  Amazon ads are pouring code errors into the page.  When I ran the validator from my toolbar it picked up everything.

                           

                          N

                          • 10. Re: CSS text disappears in design view
                            S_Wills Community Member

                            I am feeling so looked after by you two!  THANK YOU

                             

                            Murray

                             

                            I tried converting my template page to XHTML 1.0 Transitional.  I received an error about an empty alt tag.  I tried to find it but failed

                             

                            I removed the duplicate anchor tag [too little coffee when designing that part of the site, I guess].

                             

                            All code from iGive, Amazon, etc, has been sent to me by the companies in question.  I have no say in how those are formatted [thank you for noticing that though!].

                             

                            I can see all my elements in Live View and in all browsers [this is good!] but it makes designing rather frustrating when I can't see the words I'm typing on screen. Obviously I can see them in Code View and could revert to years ago of only seeing the output in a browser window, but then I bought DW cos I like seeing the layout as I design!

                             

                            My headers also disappear here: http://randalretail.com/categories_store.html

                             

                             

                            Nancy

                             

                            I've run my CSS through the validator again.  It keeps saying it can't find iPhone.css and it's on the site even though it was a failed experiment and didn't work anyway so I'd removed the code.  Oh well.  Not sure how things got funky.  I do tend to use only the DW interface for CSS and very, very rarely look at the CSS code let alone try to modify it.

                            • 11. Re: CSS text disappears in design view
                              MurraySummers CommunityMVP

                              I tried converting my template page to XHTML 1.0 Transitional.  I received an error about an empty alt tag.  I tried to find it but failed

                               

                              A missing alt attribute (it's not a tag) will not affect your page's rendering.  But it's easy to find.  Just look at line numbers....

                               

                              I can see all my elements in Live View and in all browsers [this is good!] but it makes designing rather frustrating when I can't see the words I'm typing on screen. Obviously I can see them in Code View and could revert to years ago of only seeing the output in a browser window, but then I bought DW cos I like seeing the layout as I design!

                               

                              My headers also disappear here: http://randalretail.com/categories_store.html

                               

                              I'm afraid you will have to live with that.  All I can tell you is that CS5 doesn't have that problem.

                              • 12. Re: CSS text disappears in design view
                                S_Wills Community Member

                                Murray

                                 

                                  That's the solution?  Live with it?  It's only started happening recently.  I've had no issues until the last few months.  In fact with both sites, they were looking just fine in Design View and then suddenly some CSS styles stopped displaying.

                                 

                                Nothing else comes to mind?  I can't afford CS5 yet.  The upgrade price is outside my budget for the moment at any rate.

                                • 13. Re: CSS text disappears in design view
                                  Nancy O. CommunityMVP

                                  I have some weird CSS layouts that don't render well in DW.  My workaround is to disable CSS or use Design Time stylesheets while editing.  DW Design View is not 100% reliable and never has been.  You'll get much better results if you use Live View or Preview in Browser.

                                   

                                  Nancy O.
                                  Alt-Web Design & Publishing
                                  Web | Graphics | Print | Media  Specialists
                                  http://alt-web.com/
                                  http://twitter.com/altweb

                                  • 14. Re: CSS text disappears in design view
                                    MurraySummers CommunityMVP

                                    It's hard for me to test further since I don't have an active installation of CS4 at the moment.  I'll try in a bit and get back to you.

                                    • 15. Re: CSS text disappears in design view
                                      S_Wills Community Member

                                      That would be fantastic, Murray!  Yesterday, I thought that maybe something I'd done with prefs had this weird result, so I deleted all the prefs.  Didn't fix it.  So then I redownloaded the entire CS4 file [only took 6 hours cos all the kids are still out of school and hogging the local cable bandwidth...grrrrrr] and reinstalled everything.  Still no dice.  The current site I'm working on is just fine.  Doesn't matter what CSS I apply, whether or not I use floating divs, it displays just beautifully.  I'm baffled.

                                      • 16. Re: CSS text disappears in design view
                                        jeremy@noble Community Member

                                        I am having the exact same problem. To re-iterate and clarify:

                                         

                                        1) I make a new blank HTML document.

                                        2) Type in a few paragraphs of text.

                                        3) I change one of the paragraphs to a heading (any level).

                                        4) The heading text disappears!! It is still there in code view, and displays fine in a browser, but it is just gone in design view.

                                         

                                        My co-worker also had this problem but could not find a solution.

                                         

                                        Here is a good screen shot example from someone else who was having the same problem but never found a real solution:

                                         

                                        http://channelsusan.com/disappearingtext.html

                                         

                                        Please help! I don't want to spend all day reinstalling my OS just for this bug.

                                         

                                        I'm on a Mac Pro running 10.6.5.

                                        Dreamweaver CS5 version 11.0.3.4964

                                         

                                        Thanks...

                                        • 17. Re: CSS text disappears in design view
                                          S_Wills Community Member

                                          A really stupid fix is to set the font in the body style.

                                           

                                          That's worked for me so far :-D

                                           

                                          Let me know if it works for you.

                                           

                                           

                                           

                                           

                                          Suzanne Wills

                                          C: 630.542.7871 • H: 630.717.1821

                                          suzanne@willsfamily.org

                                           

                                          "I dont actually think," Ponder Stibbons said gloomily, "that I want to tell the Archchancellor that this machine stops working if we take its fluffy teddy bear away. I just dont think I want to live in that kind of world."

                                          "Er, you could always, you know, sort of say it needs to work with the FTB enabled."

                                          - Terry Pratchett, Hogfather

                                          - - - - - - - - - - - - - - - - - - - - - - - - - - -

                                          • 18. Re: CSS text disappears in design view
                                            Nancy O. CommunityMVP

                                            I can't reproduce this on my Windows machine.

                                             

                                            Try pasting this code into a new, blank HTML document.

                                             

                                            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                                            <html xmlns="http://www.w3.org/1999/xhtml">
                                            <head>
                                            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                                            <title>Untitled Document</title>
                                            
                                            <style type="text/css">
                                            body {
                                            font: 1/1.5 "Lucida Sans Unicode", "Lucida Grande", sans-serif;
                                            color: #000;
                                            }
                                            </style>
                                            </head>
                                            
                                            <body>
                                            <h1> Heading 1</h1>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut arcu in augue lobortis mattis! Nunc arcu nunc, hendrerit ut cursus sit amet; iaculis quis nisi. In hac habitasse platea dictumst. Aliquam tincidunt sollicitudin erat, quis lobortis nisi rutrum nec. Curabitur accumsan est sit amet sapien viverra eget faucibus elit tristique. Vivamus scelerisque hendrerit lorem non viverra. </p>
                                            
                                            <h2>Heading 2</h2>
                                            <p>Donec vel arcu at lorem blandit eleifend. Nunc lobortis elit in risus tristique porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam id orci in dolor accumsan pharetra. Donec posuere purus vel nulla cursus pretium. Phasellus sit amet iaculis erat? Phasellus nec imperdiet leo?</p>
                                            
                                            <h3>Heading 3</h3>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut arcu in augue lobortis mattis! Nunc arcu nunc, hendrerit ut cursus sit amet; iaculis quis nisi. In hac habitasse platea dictumst. Aliquam tincidunt sollicitudin erat, quis lobortis nisi rutrum nec. Curabitur accumsan est sit amet sapien viverra eget faucibus elit tristique. Vivamus scelerisque hendrerit lorem non viverra. </p>
                                            
                                            </body>
                                            </html>
                                            
                                            

                                             

                                            What do you see in Design View?

                                             

                                             

                                             

                                            Nancy O.
                                            Alt-Web Design & Publishing
                                            Web | Graphics | Print | Media  Specialists
                                            http://alt-web.com/
                                            http://twitter.com/altweb

                                            • 19. Re: CSS text disappears in design view
                                              jeremy@noble Community Member

                                              Aha, your code looks normal!

                                               

                                              It seems like it has to do with specifying the font in the body tag. The headings will disappear if I do not have any font specified in the body tag. For instance with your code if I simply delete the body style the headings disappear. But, if I specify a font in the body tag, the headings will appear as normal.

                                               

                                              Kind of a weird issue, and I believe it is Mac-specific.

                                               

                                              Luckily I nearly always specify a font in the body so it won't be a real problem for me. Still, it would be nice if Adobe fixed this.

                                              • 20. Re: CSS text disappears in design view
                                                Nancy O. CommunityMVP

                                                Glad that worked.

                                                 

                                                File a bug report below:

                                                https://www.adobe.com/cfusion/mmform/index.cfm?name=wishform

                                                 

                                                Give details about your Operating system, update level, and version of DW so the engineers can reproduce the problem.

                                                 

                                                 

                                                Nancy O.
                                                Alt-Web Design & Publishing
                                                Web | Graphics | Print | Media  Specialists
                                                http://alt-web.com/
                                                http://twitter.com/altweb

                                                • 21. Re: CSS text disappears in design view
                                                  jeremy@noble Community Member

                                                  Doing more investigating it seems to be a Times font problem.

                                                   

                                                  If I set the font to "Times New Roman", Times, serif the heading still disappears. Times is the default font and there seems to be some display glitch with that. I've check my fonts and don't have any font conflicts with Times. I also used Font Nuke to reset my font caches. Made no difference..

                                                  • 22. Re: CSS text disappears in design view
                                                    S_Wills Community Member

                                                    I leave the default font set; Geneva's grand and often the display is more appealing than Times anyway :-D

                                                     

                                                     

                                                     

                                                     

                                                    Suzanne Wills

                                                    C: 630.542.7871 • H: 630.717.1821

                                                    suzanne@willsfamily.org

                                                     

                                                    "I dont actually think," Ponder Stibbons said gloomily, "that I want to tell the Archchancellor that this machine stops working if we take its fluffy teddy bear away. I just dont think I want to live in that kind of world."

                                                    "Er, you could always, you know, sort of say it needs to work with the FTB enabled."

                                                    - Terry Pratchett, Hogfather

                                                    - - - - - - - - - - - - - - - - - - - - - - - - - - -

                                                    • 23. Re: CSS text disappears in design view
                                                      ednerid

                                                      I had this problem for months. I mean, I uninstalled and reinstalled both CS5 and finally my whole Mac OS.  When the problem persisted, somebody at Adobe phone support had me create a new admin user on my Mac to see if the corruption was somewhere in my user data.  I switched over to the new admin, and Dreamweaver worked perfectly. The text did not disappear there but was still a mess with my regular user. Then I went to Apple to see if the whole old user had to be trashed or if the corruption could be located and fixed. A guy at the Genius Bar went into the old user Library and had me trash some things. I don't know if your problem has the same origin as mine, but the new admin user method will tell you very fast if it is or not.   ( I'm such a girl, I don't remember what it was he did, but somebody else here or at Apple will surely know what to do in that case.)

                                                      • 24. Re: CSS text disappears in design view
                                                        jeremy@noble Community Member

                                                        I did some more digging and found it to be a font conflict issue, not a Dreamweaver issue.

                                                         

                                                        I had some old versions of the fonts Arial and Times New Roman installed on my computer by Microsoft Office.

                                                         

                                                        To find them, go to Font Book and look for the conflicting font. I had two versions installed, an Opentype TrueType version, and a plain TrueType version. I tried disabling the plain Truetype but the problem persisted. I only managed to fix it by right-clicking on the plain TrueType in Font Book and choosing "Reveal In Finder", then physically removing the font (trash it, or move it to the desktop or another location). Only when I actually removed the older conflicting font did the problem go away. In my case the old fonts had a creation date of 2001 so they were easy to find and distinguish.

                                                         

                                                        Hope this can help someone else, too.

                                                        • 25. Re: CSS text disappears in design view
                                                          ednerid Community Member

                                                          My problems have not returned since the Genius Bar fix, but I went in and checked and found I, too, have duplicate fonts.  I've gone and cleaned them up.  Thx for the tip.

                                                          • 26. Re: CSS text disappears in design view
                                                            S_Wills Community Member

                                                            YES!  That worked.  I went through all my fonts, removing any which were plain TrueType when I had an OpenType version of the font and now I can see all my headers again.

                                                             

                                                            PHEW!

                                                             

                                                             

                                                             

                                                             

                                                            Suzanne Wills

                                                            C: 630.542.7871 • H: 630.717.1821

                                                            suzanne@willsfamily.org

                                                             

                                                            "I dont actually think," Ponder Stibbons said gloomily, "that I want to tell the Archchancellor that this machine stops working if we take its fluffy teddy bear away. I just dont think I want to live in that kind of world."

                                                            "Er, you could always, you know, sort of say it needs to work with the FTB enabled."

                                                            - Terry Pratchett, Hogfather

                                                            - - - - - - - - - - - - - - - - - - - - - - - - - - -

                                                            • 27. Re: CSS text disappears in design view
                                                              KariB Community Member

                                                              I had been having the same issue, text disappearing after applying any heading format, running DW CS5 and Snow Leopard.  I checked my font library and I too had older plain TT fonts.  After moving them to the trash and restarting my computer, my headings are now showing up.  Thanks so much Jeremy and Suzanne!