Skip navigation
Currently Being Moderated

CSS text disappears in design view

Aug 18, 2010 8:08 AM

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!

 
Replies
  • Currently Being Moderated
    Aug 18, 2010 8:52 AM   in reply to Suzanne Wills

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 18, 2010 9:12 AM   in reply to Nancy O.

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

     

    There - I feel better!

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 18, 2010 9:44 AM   in reply to Suzanne Wills

    50 errors in your markup.

    http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.acappella go.org%2Fdirector.html

     

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 18, 2010 9:47 AM   in reply to Suzanne Wills

    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?

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 18, 2010 9:49 AM   in reply to Nancy O.

    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?

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 18, 2010 10:12 AM   in reply to MurraySummers

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 18, 2010 10:42 AM   in reply to Suzanne Wills

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 18, 2010 11:05 AM   in reply to Suzanne Wills

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 18, 2010 11:05 AM   in reply to Suzanne Wills

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 7, 2010 12:58 PM   in reply to Suzanne Wills

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

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 7, 2010 1:14 PM   in reply to jeremy@noble

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 7, 2010 1:21 PM   in reply to Nancy O.

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 7, 2010 1:25 PM   in reply to jeremy@noble

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 7, 2010 1:52 PM   in reply to Nancy O.

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

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 7, 2010 6:23 PM   in reply to Suzanne Wills

    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.)

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 14, 2010 11:36 AM   in reply to ednerid

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 14, 2010 12:22 PM   in reply to jeremy@noble

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 13, 2012 6:49 PM   in reply to jeremy@noble

    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!

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points