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)
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;
}
1 Correct answer
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.
6
Replies
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.
AdChoices