CS6 div problem

Report · May 09, 2012

Hey,

I have a problem with transparent DIVs. In Dreamweaver CS6 Design view the background is displayed white. Therefore you can not see the background image of the body tag. If I view the page in a browser everything is displayed correctly. Is this a bug in CS6? When I open the same page with Dreamweaver CS5.5 eveything is viewed correctly, too!

Anyone an idea?

Report · May 10, 2012

Someone else posted an issue about CS6 displaying backgrounds incorrectly, so it may be a bug. I've not seen a lot of posts relating to this issue and by now I would have expected to do so if the problem is wide spread.

http://forums.adobe.com/thread/1000474?tstart=30

Report · May 10, 2012

I am wondering, if you can enable the view in the preferences. But after searching and testing I do think it is a bug. I was testing several Websites that have a background image in the "body" tag. As soon as there is a DIV with "no background" color the problem appears. Only in Dreamweaver CS6 design view the background is displayed whit instead of transparent. In the different broswers everything is viewed ok.

Report · May 10, 2012

As a work around, try disabling CSS: View > Style Rendering > un-tick display styles.

Or use a Design-Time Style Sheet with background-colors applied to divisions.

http://help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7e17a.html

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · May 10, 2012

Hey Nancy,

that doesn't work. But it's very funny. In the Design View in Dreamweaver CS6 the problem appears (transparent DIVs are shown white). But when I switch to Live View everything is viewed correctly. That is very annoying, because in Live View Modus you can not select the elements on the page and you don't have the guide lines around the elements . You have to switch between Live and Design Mode.

Does anybody know, if Adobe is working on a fix for that problem?

ah

Report · May 10, 2012

that doesn't work.

What doesn't work? Disabling CSS or using a Design-Time Style ?

Does anybody know, if Adobe is working on a fix for that problem?

Unknown. You're not the only person to mention this.

http://forums.adobe.com/message/4387543#4387543

Be sure to file an official bug report with specifics so engineers can re-produce the problem.

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

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · May 11, 2012

Ok, I've taken considerable personal time to document this bug. CS6 clearly introduced a background-related bug in its Design view that wasn’t there in CS5. The bug is simple to reproduce and has wideranging implications. I’m trying to submit a bug report, but their form is so brain-dead that it’s making it hard. I’m posting my bug report here, along with a link to the test file and then filing this thread in my report. I hope it works out and somebody at Adobe looks at it. (There’s always hope.)

This is a perfectly reproducible bug in Design view. Paste the attached HTML into a file and load the file into Dreamweaver 12 (CS6). Compare the Design and Live views. Compare against the behavior in Dreamweaver 11 (CS5).

<!DOCTYPE html>

<head>

<title>HTML5/CSS Dreamweaver CS6 Test Page</title>

</head>

<p>The background of this page is set to black and body color is set to #999.</p>

<div style="background: transparent;">This is a div with <strong>background</strong> set to transparent.<br>In DW CS6 Design view, this div incorrectly renders as solid white.<br>Expected behavior: div should have the black background of the body showing through.</div>

<br>

<div style="background-color: transparent;">This is a div with <strong>background-color</strong> set to transparent.<br>In DW CS6 Design view, this div incorrectly renders as solid white.<br>Expected behavior: div should have the black background of the body showing through.</div>

<br>

<div style="background: linear-gradient(left, rgba(205,235,142,1) 0%,rgba(165,201,86,1) 100%);">This is a div with <strong>background</strong> set to "linear-gradient(left, rgba(205,235,142,1) 0%,rgba(165,201,86,1) 100%);".<br>In DW CS6 Design view, this div renders incorrectly as solid white.<br>Expected behavior: div should either have the correct gradient background as specified <strong>OR</strong> the black background of the body should show through.</div>

<br>

<div style="background: -webkit-linear-gradient(left, rgba(205,235,142,1) 0%,rgba(165,201,86,1) 100%);">This is a div with <strong>background</strong> set to "-webkit-linear-gradient(left, rgba(205,235,142,1) 0%,rgba(165,201,86,1) 100%);".<br>In DW CS6 Design view, this div renders incorrectly as solid white.<br>Expected behavior: the black background of body should show through (it would not be appropriate to emulate the vendor-specific CSS extension).</div>

<br>

<div style="background: blue; background: -moz-linear-gradient(top, #444 0%, #111 100%);">This is a div with <strong>background</strong> first set to "background: blue;" and then set a second time to "-moz-linear-gradient(top, #444 0%, #111 100%);".<br>In DW CS6 Design view, this div renders incorrectly as solid white.<br>Expected behavior: this div should have a blue background in design view, ignoring the second background declaration.</div>

</body>

</html>

Here’s the test file:

http://dl.dropbox.com/u/29197/dw6-design-view-bug.html

Report · May 11, 2012

Remove the style attribute from the body tag and use an external or embedded style sheet. In other words, change your opening body tag to:

<body>

Then add this to the head:

body {

background-color: #000;

color: #999;

}

</style>

Report · Jun 07, 2012

Thanks for your code illustrating the problem.

Please try this as a solution:

1. Create a stylesheet containing a rule setting the background color of each affected div to black (or whatever color works in your layout) with an "!important" suffix. For example, I have a stylesheet like this -

@charset "utf-8";

/* CSS Document */

#thefirst {

background-color: black !important;

}

(my HTML looks like this -

<div id="thefirst">This is a div with <strong>background</strong> set to transparent.<br>In DW CS6 Design view, this div incorrectly renders as solid white.<br>Expected behavior: div should have the black background of the body showing through.</div>

)

2. Save that stylesheet and then use FORMAT | CSS Styles > Design-time... to apply this stylesheet to the page as a DESIGN-TIME STYLESHEET.

The background color of that first div should now be black.

Would that work for you?

Report · Jun 07, 2012

Murray,

Yes, the design time stylesheet can be used to work around the bug, but it isn't much of a solution.

1. on a complex layout, the design time style sheet will require quite a few selectors to carefully disable common background situations; that's extra work we don't want to have to do and maintain

2. design time stylesheets only apply to one page. On a large site, that’s not sustainable. We have at least 6500 web pages affected by this bug. Having to go apply a design time style sheet to each one just to be able to see the content on the page in Design view is not a reasonable proposition

If it was possible to associate design time style sheets with projects or templates so that they apply consistently to files of a type, that would be a somewhat different proposition, but it's still a lot of fussing to work around a bug that can't be that hard to fix. After all, it didn't exist in CS5.

Report · Jun 07, 2012

Thanks for trying. I see your objections to this workaround. Unfortunately, I think it's the only one available to you at this point.

Report · Jun 04, 2013

I don't think this is a bug and it's not a CS6 thing. In design view (CS5.5) on my machine, transparent DIVS are white, as are gradient backgrounded DIVS. They appear fine in Live view and in preview.

Report · May 11, 2012

Hi PZ,

removing the style="background: transparent;" is not the solution, because the div with the blue background is also viewed as white background in Dreamweaver CS6.

Report · May 11, 2012

Yes but you are somehow expecting a vendor specific background gradient to show in design view. This doesn't work in DW CS4, CS5.5 and I would imagine is unlikely to work in CS6. Live View might show the gradient though. Also, you have them the wrong way round. For your expected results the background-color:blue; needs to go AFTER the gradient background.

Remove the gradient and you will see the blue background. Also, I would also advise changing it to background-color:blue; as you only have one attribute.

Report · May 11, 2012

Rik,

I very specifically to NOT expect Design view to pay any attention whatsoever to vendor-specific background gradients (I state as much in the test file). Design view should ignore them, not paint the element white. In fact, I expect Design view to ignore anything and everything it doesn’t understand, rather than make assumptions.

Your background stacking order advice raises lots of off-topic problems. You are correct that moving the “background-color: blue;” masks the bug, but that’s hiding the problem, not fixing it.

Martin

Report · May 11, 2012

Martin,

The issue here has nothing to do with Dreamweaver and your view of it as a "bug" is entirely incorrect.

Ok, I've taken considerable personal time to document this bug.

I'm sorry you took so much time to report an "issue" but if you had spent the same considerable time reading up on inline CSS you would have realised that what you coded was wrong. Inline CSS has, and probably always will use the LAST mentioned property to style anything so the fact you had 2 background rules with the latter being the gradient, is not an issue but in fact is working correctly. This rule also takes priority over your body color. Design view has never been great (or accurate).

Design view will not correctly show any gradient and probably not background-color:transparent; as this is the default value. Live View which applies the CSS and users a version of browser rendering should correctly show the gradients.

The only issue I see in any of the posts above is if this happens when you use an external CSS sheet - then you might have a reason to report a bug but as has been mentioned numerous times on this forum, the answer is almost always in the code.

Rik

Report · May 11, 2012

Rik,

All my testing was done with an external style sheet. I moved the style in-line to so that the reproduction would conveniently fit in a single file. It makes absolutely no difference whatsoever.

There are five divs in my example file, each illustrates a different case. I could probably add more.

Design view in Dreamweaver CS5 handles every single one of these five cases correctly.

Design view in Dreamweaver CS6 handles every single one of these five cases incorrectly.

It's a bug.

The issue here is that Dreamweaver CS6 is painting white backgrounds on things that should not have white backgrounds. That is the only issue here. Everything else is just noise.

Martin

Report · May 11, 2012

Thanks for reporting this. As Nancy mentioned, the best way to send issues like this is the bug report form. (I see that you sent one in this morning, so thanks!)

The team will investigate the issue, but at this point I have no idea if it's expected behavior (this seems unlikely) or when they might be fixing it.

I'll be direct in saying that I do not recommend using Design View as a visual reference for anything; only use it for laying out containers, inserting content, etc.

My recommendation is to always switch on Live View for previewing within Dreamweaver.

Report · May 14, 2012

Carey,

you wouldn't recommend using Design View? But why is my page viewed correctly in Dreamweaver CS 5.5 Design View and is not viewed correctly in Dreamweaver CS 6 Design View.

I hope Adobe is solving the problem fast. Because I have uninstalled Dreamweaver CS 6 and again working with CS 5.5.

Switching between Design View and Live View is very time-killing and annoying.

Report · May 21, 2012

Hi Carey. I can confirm there is definitely a bug in CS6. The original poster kind of complicated things a bit but this is a very easy bug to understand. If you give any object a background of "transparent", Dreamweaver will instead give it a background of white. If you don't explicitly give something a transparent background, design view will show it correctly with a transparent background as it should since the default in CSS is transparent. But Dreamweaver should not give the object a white background just because you explicity stated the default of transparent. That is definitely a bug and I don't think design view had that bug in previous versions.

You should disregard the whole gradient thing as that has nothing to do with the bug regarding transparent backgrounds.

Report · May 21, 2012

Ok I just checked Dreamweaver CS5.5 and Dreamweaver CS6 definitely has introduced a bug because it is not there in CS5.5. If you give an element a transparent background in CS5.5, it has a transparent background. If you give an element a transparent background in CS6, it has a white background.

Report · May 23, 2012

I'm seeing this bug without any transparent declaration in my CSS. Basically, by default, all block level elements are showing up with a white background in Design View. If you declare { background: none; } on the affected elements, the white goes away and is rendered as expected. But this workaround can result in a lot of unnecessary code. I agree that this is only happening in CS6. CS5.5 is working as expected.

I'm working in Mac OSX 10.7.4.

Report · May 23, 2012

Michael,

I'm glad I'm not the only one who realizes that whatever is going wrong here goes beyond “background: transparent”. Hopefully the DW team does, too.

Martin

Report · Jun 06, 2012

Telling someone not to use Design View is hilarious!! That is one of the important features of Dreamweaver, to be able to (not perfectly) view what you are doing visually as you execute. We all know to see the exact we have live view or browser.

This bug is very bad as in many cases it renders the text as invisible which means you can really only work in code view when creating text - hilarious if you think that you can release an upgrade, and undermine an important and well used feature in it.

Can you please tell us that Adobe acknowledges this as a serious bug and when it will be fixed even if ballpark. And I would personally like to know if Adobe considers this something serious they intend to fix as I haven't paid for the upgrade yet and this could easily be a deciding factor to either stay with 5.5 or use Coda.

Report · Jun 06, 2012

pvb-sf wrote:
Telling someone not to use Design View is hilarious!!

Seems like you've chosen to deliberately misconstrue what Carey is trying to say.

pvb-sf wrote:as I haven't paid for the upgrade yet and this could easily be a deciding factor to either stay with 5.5 or use Coda.

Just bear in mind that when CS7 is released, only those on CS6 are eligible for upgrade pricing.

Everyone else (including CS5.5) pays full price.