Highlighted

CSS background colors NOT displaying anymore like it did for years - while in Design view

Community Beginner ,
Nov 08, 2019

Copy link to clipboard

Copied

Up until recently, Design view always displayed the CSS background color assigned to a cell, div, etc.  The website I work on has thousands of titles in white colored font, font colors display correctly...., and therefore I cannot see the text - as the background color (any color that's not white) is not diplaying in DESIGN view.  ....  Technically it's white on white.   Please do not suggest I simply switch to Live view to accomodate your change. It is not practical at all when I am editing multiple containers of text which I cannot see in Design mode.

WHY DID YOU CHANGE THIS?  PLEASE BRING BACK background css color display.

TOPICS
Code, Other

Views

536

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

CSS background colors NOT displaying anymore like it did for years - while in Design view

Community Beginner ,
Nov 08, 2019

Copy link to clipboard

Copied

Up until recently, Design view always displayed the CSS background color assigned to a cell, div, etc.  The website I work on has thousands of titles in white colored font, font colors display correctly...., and therefore I cannot see the text - as the background color (any color that's not white) is not diplaying in DESIGN view.  ....  Technically it's white on white.   Please do not suggest I simply switch to Live view to accomodate your change. It is not practical at all when I am editing multiple containers of text which I cannot see in Design mode.

WHY DID YOU CHANGE THIS?  PLEASE BRING BACK background css color display.

TOPICS
Code, Other

Views

537

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 08, 2019 0
Adobe Employee ,
Nov 08, 2019

Copy link to clipboard

Copied

Am checking with the team about this change and any option to reset it. Will get back as soon as I hear from them.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 08, 2019 1
Adobe Community Professional ,
Nov 08, 2019

Copy link to clipboard

Copied

I do not see the same problem here in CC 2020. CSS background colors show for me (using both background-color and the background shorthand properties) on the <body>, <div> and <td> tags of a test page without issue in Design View.

Verify you don't have any code errors, especially involving <table> tags, by validating the code here: http://validator.w3.org/nu

It may be that the newest version of DW is more apt to have display issues when it encounters code errors. That has been the trend in the last few versions anyway.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 08, 2019 2
Adobe Community Professional ,
Nov 08, 2019

Copy link to clipboard

Copied

It's so convenient to blame the software when things go wrong.  But honestly, 98% of rendering issues are cuased by code errors.  As Jon said, validate your markup.  And also check your CSS code.  A missing bracket or semi-colon can ruin your whole day.

https://jigsaw.w3.org/css-validator/

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 08, 2019 1
Community Beginner ,
Nov 08, 2019

Copy link to clipboard

Copied

"It's so convenient to blame the software when things go wrong.  ..."

The markup has no issue it all works fine in the browsers, in the Live view.  If you read what I said you would not have a rude snarky useless answer to contribute.  It has stopped displaying background-color while in DISPLAY MODE.

 

If you have nothing to help then stay off the thread.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 08, 2019 0
Community Beginner ,
Nov 08, 2019

Copy link to clipboard

Copied

CORRECTION: DESIGN MODE not Display mode

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 08, 2019 0
Adobe Community Professional ,
Nov 08, 2019

Copy link to clipboard

Copied

There is nothing snarky here.   If the latest DW caused this, everyone would be complaining about it.   I can't reproduce your problem.  Jon can't reproduce your problem.  And since you're the only one with this problem, we must conclude that the difference is at your end.

 

As a temporary workaround while you continue troubleshooting, turn off CSS in Design View.   Go to  View > Design View Options > Style Rendering > turn off Display Styles.   This will have no effect on Real-Time Preview, Preview in Browser or Live view.

 

 

 

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 08, 2019 0
Adobe Community Professional ,
Nov 08, 2019

Copy link to clipboard

Copied

The markup has no issue it all works fine in the browsers, in the Live view.  If you read what I said you would not have a rude snarky useless answer to contribute.  It has stopped displaying background-color while in DISPLAY MODE.

If you have nothing to help then stay off the thread.

 

While in DESIGN MODE I get

junk.jpg

where the logo is pure HTML and CSS (not an image).

 

I have even made it as hard as I can for DESIGN VIEW by using server side includes

<?php
/* ---------- Document data ----------*/ 
$title = "Home Page";
$description = "Home Page";
$bodyID = "homepage";
?>
<?php 
/* ---------- Document ----------*/
?>
<?php include("inc/head.inc.php"); ?>
<?php include("inc/navigation.inc.php"); ?>
    <main class="container"> 
    	<h2>Home Page</h2>
    </main>
<?php include("inc/footer.inc.php"); ?>
<?php include("inc/scripts.inc.php"); ?>
<?php include("inc/foot.inc.php"); ?>

 

The problem is specific to your system. If you co-operate, we can help, otherwise, GOOD LUCK.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 08, 2019 1
Adobe Community Professional ,
Nov 08, 2019

Copy link to clipboard

Copied

I just stumbled onto an interesting factoid.  This code is valid and it works as expected -- white text on a black background.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Unique Page Title</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {background: black;
width:75%;
color:white;
margin: 0 auto;
}
</style>
</head>
<body>
<nav>NAVIGATION GOES HERE</nav>
<header>
<h1>My Awesome Website</h1>
<h2>Some Pithy Slogan...</h2>
</header>
<main>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo optio porro velit, accusamus, consequuntur architecto! Explicabo ipsa cupiditate provident. Illum, aut, commodi? Voluptates</p>
</main>
<footer>
Footer goes here...
</footer>
</body>
</html>

 

But the same styles applied to the HTML selector do not work in Design View.  All I see is white on white.  

<style>
html {background: black;
width:75%;
color:white;
margin: 0 auto;
}
</style>

 

 

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 08, 2019 2
Community Beginner ,
Nov 12, 2019

Copy link to clipboard

Copied


"It's so convenient to blame the software when things go wrong.  But honestly, 98% of rendering issues are cuased by code errors.  As Jon said, validate your markup.  And also check your CSS code.  A missing bracket or semi-colon can ruin your whole day."


Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting.

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 12, 2019 0
Adobe Community Professional ,
Nov 13, 2019

Copy link to clipboard

Copied

Did you get a chance to run the validator, or are you assuming the code is good because the browsers read it as expected?

I'm just curious, because you don't specifically mention it, and the browsers are well known to be better at guessing what was meant when they run into code issues than DW ever was.

Design View is a really, really old interface that hasn't been updated in many years. The plan was, for a while at least, to completely replace Design View with the Live View Editor. With all the issues LVE has had over the last few versions, I'm not sure that's the plan anymore, but either way, Design View has been largely ignored. Due to that, there are a lot of things browsers and Live View can do with ease, that cause Design View to fall flat on its face (vh and vw units are a great example of Design View's deficiencies).

If you could share a link to your work in progress, we may see something that might be causing DW to falter.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 13, 2019 1