Highlighted

Background Not Showing

Community Beginner ,
May 07, 2018

Copy link to clipboard

Copied

When ever I want to preview my website the background for my body won't show up, yet in live view it does. I have a box within the main content for my text and I removed it to see if that was the problem but it's not. I'm using both Dreamweaver CC 2015 (School) and Dreamweaver CC 2018(Home). I'm getting annoyed and I cannot find any information to help me, this website is part of my Major Project for yr12 and I'm freaking out that I won't get it finished in time. (First picture is live view, second is preview)

Live View.pngPreview.png

The CSS for the body , Body text and content box are below

body {

background-image: url(Images/Grey_Wooden_BG.jpg);

background-repeat: repeat;

text-align: center;

}

#Body_Text {

background-image: url(Images/Light_Grey_BG.jpg);

text-align: center;

font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;

font-size: 18px;

font-weight: bold;

color: #1d1d1d;

padding-top: 5px;

padding-right: 15px;

padding-left: 15px;

padding-bottom: 10px;

height: 2500px;

width: 1100px;

margin-top: 10px;

margin-right: auto;

margin-bottom: 10px;

margin-left: auto;

border-radius: 10px;

}

.Text_Box {

text-align: center;

font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;

font-size: 18px;

font-weight: bold;

color: #1d1d1d;

height: 1500px;

width: 1100px;

}

Correct answer by Grimm13 | Community Beginner

I'd like to thank everyone for the help, it seemed that my school's Internet Explorer browser wasn't up to date because Google Chrome and Firefox display my website perfectly.

Views

246

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

Background Not Showing

Community Beginner ,
May 07, 2018

Copy link to clipboard

Copied

When ever I want to preview my website the background for my body won't show up, yet in live view it does. I have a box within the main content for my text and I removed it to see if that was the problem but it's not. I'm using both Dreamweaver CC 2015 (School) and Dreamweaver CC 2018(Home). I'm getting annoyed and I cannot find any information to help me, this website is part of my Major Project for yr12 and I'm freaking out that I won't get it finished in time. (First picture is live view, second is preview)

Live View.pngPreview.png

The CSS for the body , Body text and content box are below

body {

background-image: url(Images/Grey_Wooden_BG.jpg);

background-repeat: repeat;

text-align: center;

}

#Body_Text {

background-image: url(Images/Light_Grey_BG.jpg);

text-align: center;

font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;

font-size: 18px;

font-weight: bold;

color: #1d1d1d;

padding-top: 5px;

padding-right: 15px;

padding-left: 15px;

padding-bottom: 10px;

height: 2500px;

width: 1100px;

margin-top: 10px;

margin-right: auto;

margin-bottom: 10px;

margin-left: auto;

border-radius: 10px;

}

.Text_Box {

text-align: center;

font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;

font-size: 18px;

font-weight: bold;

color: #1d1d1d;

height: 1500px;

width: 1100px;

}

Correct answer by Grimm13 | Community Beginner

I'd like to thank everyone for the help, it seemed that my school's Internet Explorer browser wasn't up to date because Google Chrome and Firefox display my website perfectly.

Views

247

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
May 07, 2018 0
Adobe Community Professional ,
May 07, 2018

Copy link to clipboard

Copied

Can you upload the website and post a link here?

We can tell a whole lot more then and diagnose accurately.

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...
May 07, 2018 1
Community Beginner ,
May 08, 2018

Copy link to clipboard

Copied

I'm. . . not too sure on how to do that, despite knowing how to create a VERY basic website this is all new to me. . .

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...
May 08, 2018 0
Adobe Community Professional ,
May 08, 2018

Copy link to clipboard

Copied

Dreamweaver's Design view was created in a time when Table layouts were the norm and CSS was rarely used. This has never been updated and serious programmers use it only when they want to locate a recognisable section of the document.

As a Case in mind, have a look at this Design view

and this is what it looks like in Live view

This is because Live view uses a chromium-based rendering engine, meaning that it will look the same in many of the current browsers.

Even then, I do not trust Live view because there are a number of browser rendering engines - see Web browser engine - Wikipedia

The safest way to ensure that your page renders as you intend it to, is to view the product in real Browsers and devices. You can use the Real-time Preview button for this

or just open the browser manually.

I hope this helps and good luck with the project.


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...
May 08, 2018 1
Adobe Community Professional ,
May 08, 2018

Copy link to clipboard

Copied

You don't want to paint yourself into a corner with explicit height values that cannot accommodate all your content.  It's best to leave height unspecified to keep the layout flexible.   I also urge you to express your container widths in % to fit on smaller devices (mobile, tablet & desktop).

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...
May 08, 2018 1
Community Beginner ,
May 09, 2018

Copy link to clipboard

Copied

I'd like to thank everyone for the help, it seemed that my school's Internet Explorer browser wasn't up to date because Google Chrome and Firefox display my website perfectly.

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...
May 09, 2018 0
Adobe Community Professional ,
May 09, 2018

Copy link to clipboard

Copied

I suspect your school's IE is set to compatibility mode which is certain death for most advanced CSS layouts.   To overcome that unfortunate setting, add this meta tag to the <head> of  your document.   It forces IE to use the most recent rendering engine available.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

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...
May 09, 2018 0