Participating Frequently

Question

CS6 div problem

Forum|Forum|13 years ago
May 10, 2012
7 replies
19168 views

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?

This topic has been closed for replies.

G

Gaehelton

Participant

Thank you! Removing the excess code worked like a Dream!

background-color:transparent;

M

mrpug1969

Participant

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

V

vanbeekum

Participating Frequently

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!

Rik Ramsay

Participating Frequently

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.

C

CobaltCat

Participant

Has any fix been found for this?

M

mdoudoroff

Participating Frequently

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

AllDayDev2

Community Manager

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.

A

ahdesignerAuthor

Participating Frequently

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.

A

ahdesignerAuthor

Participating Frequently

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.

Rik Ramsay

Participating Frequently

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.

M

mdoudoroff

Participating Frequently

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

A

ahdesignerAuthor

Participating Frequently

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

Nancy OShea

Community Expert

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

M

mdoudoroff

Participating Frequently

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?

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.

O

osgood_

Legend

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

A

ahdesignerAuthor

Participating Frequently

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.

Nancy OShea

Community Expert

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded