-
1. Re: Page that is uploaded to the server looks different from the preview in Dreamweaver browser
I tried to fill in the background color for that div tag but the color is different from the other grey areas even though it's the same 6 digit hex
What hex code did you use? Can't see anything added. I suggest use color: #EEEEEE to match the rest of the colors on the page.
The other thing is that there's a line next to the Waterkeeper on Facebook sign and I'm also not sure how to fill in that gap either.
It is an image as far as I can see: The image is this:
<http://www.iewaterkeeper.org/_images/facebooktop.gif>
If this not so then point exactly what do you mean by " line next to the waterkeeper facebook sign"
-
2. Re: Page that is uploaded to the server looks different from the preview in Dreamweaver browser
What hex code did you use? Can't see anything added. I suggest use color: #EEEEEE to match the rest of the colors on the page.
I used #F4F3F3 because that's what I got with the color picker in the CSS Panel for that div. I don't think it's working properly. Am I doing it wrong?
what do you mean by " line next to the waterkeeper facebook sign"
There's a thin vertical line next to the image that doesn't belong there. I have no idea what it is. I added the width up and they come out right so I don't know where that gap is coming from.
-
3. Re: Page that is uploaded to the server looks different from the preview in Dreamweaver browser
Someone from my laptop company remote accessed my laptop and he didn't think it was a virus. Can someone please help? http://www.iewaterkeeper.org/ Does anyone know why Dreamweaver is acting weird? The "join our mailing list" button that I see when I preview browser is there but it's nowhere to be found in any of the browsers. The "like us on Facebook" button is supposed to be right above the "join our mailing list" button which is underneath the sign that says "Waterkeeper on Facebook" (if you look at the code, you'll notice that it is suppposed to be there) but it's all the way at the top of the header. Again, earlier, I had a hard time absolute positioning a div tag called "facebookmailinglist" which was supposed to be below facebooktop, it kept positioning itself at the top of the page even though the code said top "565px" or something like that. I had read the CSS panel code several times and all seemed correct. Does anyone have any ideas why Dreamweaver is acting bonkers?
-
4. Re: Page that is uploaded to the server looks different from the preview in Dreamweaver browser
You don't have a class called 'facebookmailinglist' in your css file its called 'mailinglist'
So you need to amend this:
<div class="facebookmailinglist">
to this:
<div class="mailinglist">
-
5. Re: Page that is uploaded to the server looks different from the preview in Dreamweaver browser
Validate your code and fix the important errors (non-FaceBook ones.)
You're missing a closing </div> tag for container.
Nancy O.
-
6. Re: Page that is uploaded to the server looks different from the preview in Dreamweaver browser
Hi, Here's the source code from the site, I checked the validator.w3.org. I don't know if I'm reading this right but is this
telling me that the closing body tag didn't have a closing arrow button: > ? If so, I checked the code in Dreamweaver and it's there, it is also in the body tag on the page source in the source code. Am I reading this right? Should I post the original code that is in Dreamweaver: -
7. Re: Page that is uploaded to the server looks different from the preview in Dreamweaver browser
That is telling you that the referenced div tag has no closing div tag associated with it, e.g.,
instead of this - <div>whatever</div>, you have just this - <div>whatever
Every opening div tag must have a corresponding closing tag, as do most other HTML tags.
-
8. Re: Page that is uploaded to the server looks different from the preview in Dreamweaver browser
That's so weird because I'm looking at the code in Dreamweaver and line 181 has a closing </body>. Here's the code straight from Dreamweaver:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Inland Empire Waterkeeper</title>
<link href="_css/styles.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body,td,th {
color: #999999;
font-family: Verdana, Geneva, sans-serif;
}
body {
background-color: #FFFFFF;
color: #D6D6D6;
background-image: url(_images/background_1255hompage.png);
background-repeat: repeat-x;
margin: auto;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
</style>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="container">
<div class="header"><img src="_images/banner1.jpg" alt="Inland Empire Waterkeeper" width="933" height="300" /></div>
<div class="menubar">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html" class="MenuBarItemSubmenu">Home</a>
<ul>
<li><a href="mission.html" class="MenuBarItemSubmenu">About Us</a>
<ul>
<li><a href="mission.html">Our Mission</a></li>
<li><a href="history.html">Our History</a></li>
<li><a href="community.html">Our Community</a></li>
</ul>
</li>
<li><a href="staff.html" class="MenuBarItemSubmenu">Our Team</a>
<ul>
<li><a href="staff.html">Staff</a></li>
<li><a href="supporters.html">Supporters</a></li>
<li><a href="advisoryboard.html">Advisory Board</a></li>
</ul>
</li>
<li><a href="coastkeeper.html">Coastkeeper</a></li>
</ul>
</li>
<li><a href="projects.html" class="MenuBarItemSubmenu">What We Do</a>
<ul>
<li><a href="advocacy.html" class="MenuBarItemSubmenu">Programs</a>
<ul>
<li><a href="advocacy.html">Advocacy</a></li>
<li><a href="education.html">Education</a></li>
<li><a href="research.html">Research</a></li>
<li><a href="restoration.html">Restoration</a></li>
<li><a href="enforcement.html">Enforcement</a></li>
</ul>
</li>
<li><a href="projects.html">Projects</a></li>
<li><a href="datareports.html">Data & Reports</a></li>
</ul>
</li>
<li><a href="volunteer.html" class="MenuBarItemSubmenu">Get Involved</a>
<ul>
<li><a href="volunteer.html">Volunteer</a></li>
<li><a href="employment.html">Employment</a></li>
<li><a href="events.html">Events & Meetings</a></li>
<li><a href="donate.html">Donate</a></li>
</ul>
</li>
<li><a href="pressreleases.html" class="MenuBarItemSubmenu">News Room</a>
<ul>
<li><a href="pressrelease.html">In the News and Press Releases</a></li>
<li><a href="legislation.html">Legislative Updates</a></li>
<li><a href="waternews.html">Water in the News</a></li>
</ul>
</li>
<li><a href="reportpollution.html" class="MenuBarItemSubmenu">Resources</a>
<ul>
<li><a href="watershed.html" class="MenuBarItemSubmenu">Information</a>
<ul>
<li><a href="watershed.html">Our Watershed</a></li>
<li><a href="reportpollution.html">Report Pollution</a></li>
</ul>
</li>
<li><a href="photos.html">Photo Gallery</a></li>
</ul>
</li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div class="missionstatement"><img src="_images/mssionstatement.gif" alt="Inland Empire Waterkeeper" width="933" height="110" /></div>
<div class="space1"><img src="_images/bar_left.png" alt="Inland Empire Waterkeeper" width="20" height="315" /></div>
<div class="facebook">
<div class="facebooktop">
<img src="_images/facebooktop.gif" width="106" height="125" alt="Inland Empire Waterkeeper" /></div>
<div class="facebookmailinglist">
<div class="fb-like" data-href="http://www.iewaterkeeper.org/" data-send="true" data-width="106" data-show-faces="false"></div>
<!-- BEGIN: Constant Contact Standard Email List Button -->
<div align="center">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="https://imgssl.constantcontact.com/ui/images/visitor/bevel_tl_gray.gif" width="6" height="6" alt=""></td>
<td background="https://imgssl.constantcontact.com/ui/images/visitor/bevel_bg_top_gray.gif"> </td>
<td><img src="https://imgssl.constantcontact.com/ui/images/visitor/bevel_tr_gray.gif" width="6" height="6" alt=""></td>
</tr>
<tr>
<td background="https://imgssl.constantcontact.com/ui/images/visitor/bevel_bg_left_gray.gif"></td>
<td bgcolor="#cccccc"><a href="http://visitor.r20.constantcontact.com/d.jsp?llr=wejp69bab&p=oi&m=1101488694422" target="_blank" style="text-decoration:none; font-weight: bold; font-family:Arial; font-size:10px; color:#336666;">Join Our Email List</a></td>
<td background="https://imgssl.constantcontact.com/ui/images/visitor/bevel_bg_right_gray.gif"></td>
</tr>
<tr>
<td><img src="https://imgssl.constantcontact.com/ui/images/visitor/bevel_bl_gray.gif" width="6" height="6" alt=""></td>
<td background="https://imgssl.constantcontact.com/ui/images/visitor/bevel_bg_bottom_gray.gif"> </td>
<td><img src="https://imgssl.constantcontact.com/ui/images/visitor/bevel_br_gray.gif" width="6" height="6" alt=""></td>
</tr>
</table>
</div>
<!-- END: Constant Contact Standard Email List Button -->
</div>
<div class="space2"><img src="_images/bar_right.png" width="21" height="315" alt="Inland Empire Waterkeeper" /></div>
<div class="video"><iframe width="560" height="315" src="http://www.youtube.com/embed/3OU8D8kBjWg" frameborder="0" allowfullscreen></iframe></div>
<div class="space3"></div>
<div class="photospace1"></div>
<div class="photo1"><a href="_images/kayaking_6lg.png"><img src="_images/kayaking_6.jpg" alt="Inland Empire Waterkeeper" width="176" height="95" /></a></div>
<div class="photospace2"></div>
<div class="photo2"><a href="_images/riverkat_57lg.png"><img src="_images/riverkat_57.jpg" width="176" height="95" alt="Inland Empire Waterkeeper" /></a></div>
<div class="photospace3"></div>
<div class="photo3"><a href="_images/riverkat_172lg.png"><img src="_images/riverkat_172.jpg" width="176" height="95" alt="Inland Empire Waterkeeper" /></a></div>
<div class="photospace4"></div>
<div class="space4"></div>
<div class="pillars"><img src="_images/pillars_grey.jpg" alt="Inland Empire Waterkeeper Pillars" width="933" height="400" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="77,54,297,198" href="advocacy.html" alt="Inland Empire Waterkeeper Advocacy" />
<area shape="rect" coords="361,51,584,195" href="education.html" alt="Inland Empire Waterkeeper Education" />
<area shape="rect" coords="636,54,858,196" href="research.html" alt="Inland Empire Waterkeeper Research" />
<area shape="rect" coords="212,220,430,352" href="restoration.html" alt="Inland Empire Waterkeeper Restoration" />
<area shape="rect" coords="502,222,726,364" href="enforcement.html" alt="Inland Empire Waterkeeper Enforcement" />
</map>
</div>
<div class="footer"><img src="_images/footer2.png" width="933" height="100" alt="Inland Empire Waterkeeper" /></div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
-
9. Re: Page that is uploaded to the server looks different from the preview in Dreamweaver browser
Is it looking for a closing </div> tag or a closing </body> tag? That would make more sense.
-
10. Re: Page that is uploaded to the server looks different from the preview in Dreamweaver browser
The error message you showed is looking for a closing </div> - just as it says in the error message. I'm not sure where your notion of it being the body tag came from....
OH - I see how you got that idea. But it's a div closing that is needed.
-
11. Re: Page that is uploaded to the server looks different from the preview in Dreamweaver browser
You don't have a class called 'facebookmailinglist' in your css file its called 'mailinglist'
So you need to amend this:
<div class="facebookmailinglist">
to this:
<div class="mailinglist">
Thanks! That makes sense. I changed the name of the class through the CSS Styles panel I guess it didn't update? Anyway, I'll just redo it. Thanks!
-
12. Re: Page that is uploaded to the server looks different from the preview in Dreamweaver browser
The error message you showed is looking for a closing </div> - just as it says in the error message. I'm not sure where your notion of it being the body tag came from....
OH - I see how you got that idea. But it's a div closing that is needed.
Thanks.
-
13. Re: Page that is uploaded to the server looks different from the preview in Dreamweaver browser
Can someone go through this with me? I don't know what is the next most important thing to fix. I'm a designer not a programmer. I got the "like us on facebook" button and the "join our email list" button to go where it belongs. Yay! But will need some more help fixing errors. http://validator.w3.org/check?uri=http%3A%2F%2Fwww.iewaterkeeper.org%2F&charset=%28detect+ automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3 I'll take any help out there. Thanks.
-
14. Re: Page that is uploaded to the server looks different from the preview in Dreamweaver browser
Sorry, one more thing, does anyone happen to know how to get the background color of the div tag to change? I used the background color's color picker to maintain the same color on the page but the box color doesn't match.
Also does anyone happen to know how to get the "like us on facebook" and "join our mailing list" to sit at the top of the div? Thanks.
-
15. Re: Page that is uploaded to the server looks different from the preview in Dreamweaver browser
Make a backup of your original page. Then try this HTML -
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Inland Empire Waterkeeper</title>
<link href="_css/styles.css" rel="stylesheet" type="text/css">
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<style type="text/css">
body,td,th {
color: #999999;
font-family: Verdana, Geneva, sans-serif;
}
body {
background-color: #FFFFFF;
color: #D6D6D6;
background-image: url(_images/background_1255hompage.png);
background-repeat: repeat-x;
margin: auto;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
</style>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="container">
<div class="header"><img src="_images/banner1.jpg" alt="Inland Empire Waterkeeper" width="933" height="300"></div>
<div class="menubar">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html" class="MenuBarItemSubmenu">Home</a>
<ul>
<li><a href="mission.html" class="MenuBarItemSubmenu">About Us</a>
<ul>
<li><a href="mission.html">Our Mission</a></li>
<li><a href="history.html">Our History</a></li>
<li><a href="community.html">Our Community</a></li>
</ul>
</li>
<li><a href="staff.html" class="MenuBarItemSubmenu">Our Team</a>
<ul>
<li><a href="staff.html">Staff</a></li>
<li><a href="supporters.html">Supporters</a></li>
<li><a href="advisoryboard.html">Advisory Board</a></li>
</ul>
</li>
<li><a href="coastkeeper.html">Coastkeeper</a></li>
</ul>
</li>
<li><a href="projects.html" class="MenuBarItemSubmenu">What We Do</a>
<ul>
<li><a href="advocacy.html" class="MenuBarItemSubmenu">Programs</a>
<ul>
<li><a href="advocacy.html">Advocacy</a></li>
<li><a href="education.html">Education</a></li>
<li><a href="research.html">Research</a></li>
<li><a href="restoration.html">Restoration</a></li>
<li><a href="enforcement.html">Enforcement</a></li>
</ul>
</li>
<li><a href="projects.html">Projects</a></li>
<li><a href="datareports.html">Data & Reports</a></li>
</ul>
</li>
<li><a href="volunteer.html" class="MenuBarItemSubmenu">Get Involved</a>
<ul>
<li><a href="volunteer.html">Volunteer</a></li>
<li><a href="employment.html">Employment</a></li>
<li><a href="events.html">Events & Meetings</a></li>
<li><a href="donate.html">Donate</a></li>
</ul>
</li>
<li><a href="pressreleases.html" class="MenuBarItemSubmenu">News Room</a>
<ul>
<li><a href="pressrelease.html">In the News and Press Releases</a></li>
<li><a href="legislation.html">Legislative Updates</a></li>
<li><a href="waternews.html">Water in the News</a></li>
</ul>
</li>
<li><a href="reportpollution.html" class="MenuBarItemSubmenu">Resources</a>
<ul>
<li><a href="watershed.html" class="MenuBarItemSubmenu">Information</a>
<ul>
<li><a href="watershed.html">Our Watershed</a></li>
<li><a href="reportpollution.html">Report Pollution</a></li>
</ul>
</li>
<li><a href="photos.html">Photo Gallery</a></li>
</ul>
</li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div class="missionstatement"><img src="_images/mssionstatement.gif" alt="Inland Empire Waterkeeper" width="933" height="110"></div>
<div class="space1"><img src="_images/bar_left.png" alt="Inland Empire Waterkeeper" width="20" height="315"></div>
<div class="facebook">
<div class="facebooktop">
<img src="_images/facebooktop.gif" width="106" height="125" alt="Inland Empire Waterkeeper"></div>
<div class="facebookmailinglist">
<div class="fb-like" data-href="http://www.iewaterkeeper.org/" data-send="true" data-width="106" data-show-faces="false"></div>
<!-- BEGIN: Constant Contact Standard Email List Button -->
<div align="center">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="https://imgssl.constantcontact.com/ui/images/visitor/bevel_tl_gray.gif" width="6" height="6" alt=""></td>
<td style="background-image:url(https://imgssl.constantcontact.com/ui/images/visitor/bevel_bg_top_gray .gif)"> </td>
<td><img src="https://imgssl.constantcontact.com/ui/images/visitor/bevel_tr_gray.gif" width="6" height="6" alt=""></td>
</tr>
<tr>
<td background="https://imgssl.constantcontact.com/ui/images/visitor/bevel_bg_left_gra y.gif"></td>
<td bgcolor="#cccccc"><a href="http://visitor.r20.constantcontact.com/d.jsp?llr=wejp69bab&p=oi&m=1101 488694422" target="_blank" style="text-decoration:none; font-weight: bold; font-family:Arial; font-size:10px; color:#336666;">Join Our Email List</a></td>
<td background="https://imgssl.constantcontact.com/ui/images/visitor/bevel_bg_right_gr ay.gif"></td>
</tr>
<tr>
<td><img src="https://imgssl.constantcontact.com/ui/images/visitor/bevel_bl_gray.gif" width="6" height="6" alt=""></td>
<td background="https://imgssl.constantcontact.com/ui/images/visitor/bevel_bg_bottom_g ray.gif"> </td>
<td><img src="https://imgssl.constantcontact.com/ui/images/visitor/bevel_br_gray.gif" width="6" height="6" alt=""></td>
</tr>
</table>
</div>
<!-- END: Constant Contact Standard Email List Button -->
</div>
<div class="space2"><img src="_images/bar_right.png" width="21" height="315" alt="Inland Empire Waterkeeper"></div>
<div class="video"><iframe width="560" height="315" src="http://www.youtube.com/embed/3OU8D8kBjWg" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
<div class="space3"></div>
<div class="photospace1"></div>
<div class="photo1"><a href="_images/kayaking_6lg.png"><img src="_images/kayaking_6.jpg" alt="Inland Empire Waterkeeper" width="176" height="95"></a></div>
<div class="photospace2"></div>
<div class="photo2"><a href="_images/riverkat_57lg.png"><img src="_images/riverkat_57.jpg" width="176" height="95" alt="Inland Empire Waterkeeper"></a></div>
<div class="photospace3"></div>
<div class="photo3"><a href="_images/riverkat_172lg.png"><img src="_images/riverkat_172.jpg" width="176" height="95" alt="Inland Empire Waterkeeper"></a></div>
<div class="photospace4"></div>
<div class="space4"></div>
<div class="pillars"><img src="_images/pillars_grey.jpg" alt="Inland Empire Waterkeeper Pillars" width="933" height="400" border="0" usemap="#Map">
<map name="Map" id="Map">
<area shape="rect" coords="77,54,297,198" href="advocacy.html" alt="Inland Empire Waterkeeper Advocacy">
<area shape="rect" coords="361,51,584,195" href="education.html" alt="Inland Empire Waterkeeper Education">
<area shape="rect" coords="636,54,858,196" href="research.html" alt="Inland Empire Waterkeeper Research">
<area shape="rect" coords="212,220,430,352" href="restoration.html" alt="Inland Empire Waterkeeper Restoration">
<area shape="rect" coords="502,222,726,364" href="enforcement.html" alt="Inland Empire Waterkeeper Enforcement">
</map>
</div>
<div class="footer"><img src="_images/footer2.png" width="933" height="100" alt="Inland Empire Waterkeeper"></div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</div>
</body>
</html>
