Page looks terrible in Dreamweaver, but fine in (some) browsers?
Budo Cat Jan 31, 2011 12:04 PMCan someone please explain why the image in Design and Split views can look so radically different from what I get in a browser? In the example below, the page as presented in Design looks a total mess (screenshot 1). But in Firefox, Chrome and Safari, it looks fine (screenshot 2).
I've had this problem a couple of times in the past, but since the pages worked on the browsers, and thus the web, I wasn't concerned. In this particular instance, however, the page is still a mess in Opera (screenshot 3), albeit a different mess than is presented in Design/Split views. (I don't have Explorer to check it on).
So I thought it time to ask, what am I not getting about Dreamweaver? Screenshots below to illustrate my question. CSS and HTML also down there, if that helps.
Thank you.
In Design and Split Views:
In Firefox/Chrome/Safari:
In Opera:
HTML
<body>
<div id="wrapper">
<div id="header">
</div><!--close header-->
<div id="navbar">
<p><a href="index.html">home</a></p>
<p><a href="benefits.html">benefits</a></p>
<p><a href="clients.html">clients</a></p>
<p><a href="about.html">about</a></p>
<p><a href="history.html">history</a></p>
<p><a href="contact.html">contact</a></p>
</div><!--close navbar-->
<div id="mainbody"><!-- InstanceBeginEditable name="mainBody" -->
<div class="rosenPhoto"><img src="../images/MarionRosen.jpg" width="470" height="313" alt="Marion Rosen" /><br />
Photo credit and copyright details go here</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<!-- InstanceEndEditable --></div>
<!--close mainbody-->
</div><!--close wrapper-->
</body>
<!-- InstanceEnd --></html>
CSS
@charset "UTF-8";
body {
width: 1024px;
margin: 0 auto;
background-color: #4B4CB6;
background-image: url(../images/bgGradient.jpg);
background-repeat: repeat-x;
}
#wrapper {
height: 768px;
width: 1024px;
background-image: url(../images/mesh.png);
padding-top: 1px;
}
#wrapper #header {
height: 100px;
width: 912px;
margin: 49px 54px 0 54px;
background-color: #000032;
border: 2px solid #b3aaa1;
}
#wrapper #navbar {
background-color: #000032;
height: 540px;
width: 155px;
margin-left: 54px;
float: left;
border-width: 0 1px 2px 2px;
border-style: solid;
border-color: #b3aaa1;
font-family: Verdana, Geneva, sans-serif;
font-size: 24px;
color: #b3aaa1;
text-align: left;
}
#wrapper #mainbody {
height: 540px;
width: 755px;
float: left;
border-width: 0 2px 2px 1px;
border-style: solid;
border-color: #b3aaa1;
background-image: url(../images/gradient.jpg);
background-repeat: repeat-y;
}
#wrapper #header #headerLeft {
padding-left: 15px;
padding-top: 15px;
float: left;
}
#wrapper #header #headerRight img {
float: right;
padding-top: 20px;
padding-right: 90px;
}
#wrapper #navbar p {
margin-top: 50px;
margin-left: 30px;
}
#wrapper #mainbody img {
float: right;
}
#wrapper #mainbody p {
font-family: Verdana, Geneva, sans-serif;
color: #B3aaa1;
font-size: 14px;
margin: 25px 20px 0 20px;
}
#wrapper #mainbody ul li {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #b3aaa1;
}
#wrapper #mainbody h2 {
color: #B3AAA1;
margin-left: 20px;
margin-top: 25px;
}
a:link {
color:#B3AAA1;
text-decoration:none;
}
a:visited {
color:#B3AAA1;
text-decoration:none;
}
a:hover {
color:#CCC;
text-decoration:underline;
}
a:active {
color:#B3AAA1;
text-decoration:none;
}
.rosenPhoto {
float: right;
margin: 0;
padding: 0 0 0px 10px;
font-size: 11 pt;
text-align: right;
color: #000;
}






