Skip navigation
Currently Being Moderated

CS6 div problem

May 9, 2012 11:46 PM

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?

 
Replies 1 2 Previous Next
  • Currently Being Moderated
    May 10, 2012 12:01 AM   in reply to ahdesigner

    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

     
    |
    Mark as:
  • Currently Being Moderated
    May 10, 2012 9:24 AM   in reply to ahdesigner

    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/WScbb6b82af5544594822 510a94ae8d65-7e17a.html

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    May 10, 2012 1:35 PM   in reply to ahdesigner
    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 11, 2012 8:26 AM   in reply to Nancy O.

    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>

    <html lang="en">

    <head>

    <meta charset="utf-8" />

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

     

    </head>

    <body style="background-color: black;color: #999;">

        <h1>DW CS6 Test</h1>

              <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

     
    |
    Mark as:
  • Currently Being Moderated
    May 11, 2012 10:21 AM   in reply to mdoudoroff

    Hi

     

    Remove the style="background: transparent;" as this is the default value for a background color.

     

    The reason design view displays this as white is to indicate that a background color, gradient or whatever has been applied.

     

    PZ

     
    |
    Mark as:
  • Currently Being Moderated
    May 11, 2012 12:04 PM   in reply to ahdesigner

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 11, 2012 12:07 PM   in reply to pziecina

    pziecina,

     

    Thank you but your advice is not particularly useful to me. Eliminating “background: transparent;” may work around the symptom for some users, but still leaves Design view utterly unusable whenever you happen to have a light-on-dark color scheme and employ perfectly legitimate CSS background effects. White text on a white background is unreadable. If you can't read it, you can't edit it.

     

    Whether this behavior by Dreamweaver CS6 is a bug or a misguided feature, it has to get fixed or some of us cannot use the software.

     

    (Design-time style sheets are not a solution either: in their current implementation, they lack sufficient configurability to for use across a complex project.)

     

    Martin

     
    |
    Mark as:
  • Currently Being Moderated
    May 11, 2012 12:26 PM   in reply to Rik Ramsay

    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

     
    |
    Mark as:
  • Currently Being Moderated
    May 11, 2012 12:28 PM   in reply to mdoudoroff

    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:

     

    <style type="text/css">

    body {

    background-color: #000;

    color: #999;

    }

    </style>

     
    |
    Mark as:
  • Currently Being Moderated
    May 11, 2012 1:59 PM   in reply to mdoudoroff

    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

     
    |
    Mark as:
  • Currently Being Moderated
    May 11, 2012 2:32 PM   in reply to Rik Ramsay

    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

     
    |
    Mark as:
  • Currently Being Moderated
    May 11, 2012 5:34 PM   in reply to ahdesigner

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 21, 2012 12:54 AM   in reply to Carey Burgess

    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. 

     
    |
    Mark as:
  • Currently Being Moderated
    May 21, 2012 1:01 AM   in reply to Daryl Barnes

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 23, 2012 6:20 AM   in reply to Daryl Barnes

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 23, 2012 6:21 AM   in reply to Michael Trusa

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 5, 2012 2:20 PM   in reply to ahdesigner

    Has any fix been found for this?

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 5, 2012 2:24 PM   in reply to CobaltCat

    See response #15, above. The Dreamweaver team has acknowledged the issue, but not promised a fix.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 6, 2012 4:37 PM   in reply to Carey Burgess

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 6, 2012 4:45 PM   in reply to pvb-sf
    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 7, 2012 5:55 AM   in reply to John Waller

    Actually, pvb-sf hasn't misconstrued a thing. It’s the inserting content part that Design view is so essential for (for some of us) and this bug is devastating for us.

     

    Alas, pvb-sf is probably mistaken regarding Coda as an alternative. Coda has no comparable functionality and has a slew of its own problems.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 7, 2012 6:28 AM   in reply to mdoudoroff

    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?

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 7, 2012 7:01 AM   in reply to MurraySummers

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 7, 2012 7:57 AM   in reply to mdoudoroff

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

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 7, 2012 8:20 AM   in reply to John Waller

    I was not misconstruing anything that Carey, the representative said. Her post states how important it is to Adobe to fix this problem which I find both hilarious and totally unacceptable.

     

    Thank you, MDoudoroff for pointing that out and I agree that Coda would not substitute for the same features we have in Dreamweaver.

     

    What I don't understand is HOW Adobe could release DW CS6 with this obvious bug in it. It is not only unprofessional but it is insulting to their customers and then to get on this forum and say the following as a representative of Adobe:

     

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

     

    This in itself is beyond hilarious. If you haven't checked out the problem to the point that you have no idea if it's expected behavior - YOU SHOULD NOT be posting on here. Then to go on and address the problem as a "preview" problem is once again to not understand the problem. If you don't take the time to read the posts stating the problem, go replicate it (easy to do in this case) and get it - don't post!!

     

    And don't release a product with this huge of a bug. Unprofessional! Unacceptable!

     

    If you have as I do a lot of sites and an especially large one with with a black background, then divs with other backgrounds, the text which is on a background of none is white and it is also making the type white - thus I can't see any of the text I am editing throughout the whole site/s.

     

    AND I spent forever trying to figure out what setting I needed or what I did wrong to cause this as who would think a company the size of Adobe would allow a product with this huge flaw to be released??????

     

    So, YES.... get a representative from Adobe on this forum with some acknowledgement that this is a big problem, acknowledge they understand the problem (how could anyone not) and either let us know it is very important to them to fix it and ideally a ballpark timeframe for results!!

     

    I do worry that if this glaringly huge problem were easy enough to fix - they would have done it before release. So... what I was saying about Coda and other products is the one thing that does keep me strongly in DW is the ability to so easily see a rendering of the design (not expected to be perfect) but easier to visualize while writing text, etc. - if I wanted to use live preview to keep seeing what I did visually then why NOT use Coda, etc. The new Coda is quite amazing and its iPad companion is extremely convenient when not at a computer!!

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 7, 2012 9:32 AM   in reply to pvb-sf

    @pvb-sf,

    This is NOT an official support site. This is a user-to-user forum.  Participation here is strictly on a volunteer basis.  That goes for Employees, Community Professionals and Community Members.

     

    So, YES.... get a representative from Adobe on this forum with some acknowledgement that this is a big problem, acknowledge they understand the problem (how could anyone not) and either let us know it is very important to them to fix it and ideally a ballpark timeframe for results!!

    Since this is neither an official support or bug reporting site, don't expect an official response here.

     

    If you want to make an official bug report where it will be seen by Adobe's product engineers, use the link below. 

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

     

     

    Nancy O.


     
    |
    Mark as:
  • Currently Being Moderated
    Jun 7, 2012 9:51 AM   in reply to Nancy O.

    Seriously!!!! Here is the domain:

     

    forums.adobe.com

     

    NO ONE puts data on their own domain they don't pay attention to or want to know about. Someone has already (if you read this whole thread) reported the bug properly - would a redundant report help anything? If so, I will do that!

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 7, 2012 12:17 PM   in reply to pvb-sf

    Ever hear the expression "The squeaky wheel gets greased?"  A bug with many reports get noticed more than a bug with very few reports.

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 8, 2012 7:11 AM   in reply to ahdesigner

    Hi There,

     

    I recently had this problem myself with DW6 using my new iMac. I managed to resolve the display issue within my CSS screen file.

     

    I have the Eric Meyer 'Reset' code at the beginning of my file, the problem 'for me' was:-

     

    background: transparent;

     

    I have commented this out of the CSS file and now in Design View my pages view just fine and as good as 'Live View'.

     

    Hope this helps for what its worth, I know how dreadfully frustrating it can be!!!! Grrrrrr.

     

    Gary

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 8, 2012 8:47 AM   in reply to mrpug1969

    Gary!!!!!

     

    You are brilliant. I also use Eric Meyer's "Reset" code at the beginning of my files. That totally fixed the problem. I was going to look into this and wondered if there was an issue there and then got sidetracked - you saved me a lot of time!!

     

    None the less... it seems this shouldn't be something that should happen, but now with the reason behind it - it seems insignificant.

     

    Thank you!!!!

     

    Very happy Friday!

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 8, 2012 9:01 AM   in reply to pvb-sf

    I feel like you could have saved yourself a lot of typing and frustration as this fix was discussed at the very beginning of this thread.

     

    This issue has come up a few times in the forum, recently as well so a quick search may have saved you some time. In fact, the following link is even linked at the top off this thread.

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

     

    Glad you got it sorted though.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 8, 2012 9:08 AM   in reply to Rik Ramsay

    Further illustrating how dangerous it is to use the shorthand "background" to set a single style like color, and Eric should know better.  Why is it dangerous - because unlike other shorthand styles, this one sets all of the other missing attributes of the background style to their default values.  If you want to set the background color, just use 'background-color'.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 8, 2012 9:14 AM   in reply to MurraySummers

    Background and background-color are often used together these days to

    provide a fallback for old browsers when using RGBA values to set both

    color and transparency for modern browsers.

     

    --

    Al Sparber - PVII

    http://www.projectseven.com

    The Finest Dreamweaver Menus | Galleries | Widgets

    Since 1998

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 8, 2012 9:19 AM   in reply to Al Sparber

    Those dang older browsers!

     

    It's still dangerous to use the shorthand style alone without recognizing what will happen to the missing attribute properties.  I guess there is no substitute for understanding, huh?

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 8, 2012 9:27 AM   in reply to MurraySummers

    Some people substitute all the time

     

    Actually, the default values for the set of background properties is

    usually not going to cause problems. Using font shorthand, on the other

    hand, can have unintended consequences with more frequency.

     

    --

    Al Sparber - PVII

    http://www.projectseven.com

    The Finest Dreamweaver Menus | Galleries | Widgets

    Since 1998

     
    |
    Mark as:
1 2 Previous Next

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