Adobe Community: CSS text disappears in design view

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!

2518 Views 27 Replies Latest reply: KariBranch, Mar 13, 2012 6:49 PM

Replies

Currently Being Moderated

1. Nancy O.,

Aug 18, 2010 8:52 AM in reply to Suzanne Wills

Report

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

2. MurraySummers,

Aug 18, 2010 9:12 AM in reply to Nancy O.

Report

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

There - I feel better!

|
Mark as:
Currently Being Moderated

3. Suzanne Wills,

Aug 18, 2010 9:22 AM in reply to Nancy O.

Report

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.

|
Mark as:
Currently Being Moderated

4. Suzanne Wills,

Aug 18, 2010 9:25 AM in reply to MurraySummers

Report

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!

|
Mark as:
Currently Being Moderated

5. Suzanne Wills,

Aug 18, 2010 9:27 AM in reply to MurraySummers

Report

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

|
Mark as:
Currently Being Moderated

6. Nancy O.,

Aug 18, 2010 9:44 AM in reply to Suzanne Wills

Report

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

7. MurraySummers,

Aug 18, 2010 9:47 AM in reply to Suzanne Wills

Report

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

8. MurraySummers,

Aug 18, 2010 9:49 AM in reply to Nancy O.

Report

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

9. Nancy O.,

Aug 18, 2010 10:12 AM in reply to MurraySummers

Report

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

10. Suzanne Wills,

Aug 18, 2010 10:33 AM in reply to MurraySummers

Report

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.

|
Mark as:
Currently Being Moderated

11. MurraySummers,

Aug 18, 2010 10:42 AM in reply to Suzanne Wills

Report

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

12. Suzanne Wills,

Aug 18, 2010 10:53 AM in reply to MurraySummers

Report

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.

|
Mark as:
Currently Being Moderated

13. Nancy O.,

Aug 18, 2010 11:05 AM in reply to Suzanne Wills

Report

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

14. MurraySummers,

Aug 18, 2010 11:05 AM in reply to Suzanne Wills

Report

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

15. Suzanne Wills,

Aug 19, 2010 7:44 AM in reply to MurraySummers

Report

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.

|
Mark as:
Currently Being Moderated

16. jeremy@noble,

Dec 7, 2010 12:58 PM in reply to Suzanne Wills

Report

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

17. Suzanne Wills,

Dec 7, 2010 1:09 PM in reply to jeremy@noble

Report

A really stupid fix Re: CSS text disappears in design view 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
- - - - - - - - - - - - - - - - - - - - - - - - - - -

|
Mark as:

Currently Being Moderated

18. Nancy O.,

Dec 7, 2010 1:14 PM in reply to jeremy@noble

Report

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

19. jeremy@noble,

Dec 7, 2010 1:21 PM in reply to Nancy O.

Report

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

20. Nancy O.,

Dec 7, 2010 1:25 PM in reply to jeremy@noble

Report

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

21. jeremy@noble,

Dec 7, 2010 1:52 PM in reply to Nancy O.

Report

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

22. Suzanne Wills,

Dec 7, 2010 1:57 PM in reply to jeremy@noble

Report

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

|
Mark as:
Currently Being Moderated

23. ednerid,

Dec 7, 2010 6:23 PM in reply to Suzanne Wills

Report

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

24. jeremy@noble,

Dec 14, 2010 11:36 AM in reply to ednerid

Report

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

25. ednerid,

Dec 14, 2010 12:22 PM in reply to jeremy@noble

Report

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

26. Suzanne Wills,

Dec 15, 2010 7:39 AM in reply to jeremy@noble

Report

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

|
Mark as:
Currently Being Moderated

27. KariBranch,

Mar 13, 2012 6:49 PM in reply to jeremy@noble

Report

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:

Forum guidelines

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

Dreamweaver

CSS text disappears in design view

Aug 18, 2010 8:08 AM

More Like This

Bookmarked By (0)

Answers + Points = Status