Discrepancy between browser & design view; Hor. Rule Question

These are actually two issues, but I'm using one page as an example. I'm encountering this throughout other pages on the site.
Design view is absolutely killing me. I get the layout correct, but in brower view (this is both FF and IE) the margin space is not consistent at top and bottom and throws the design out of whack. Additionally, I love the look of horizontal rules, but there's a LOT of margin space around it. I'd like to reduce it. When I look in the code, I'm not seeing any errant p tags or line breaks.
Be advised the page I'm sending you is a child page from a template. I've set up one editable region. I've edited the padding / margin for the editable div on the template, which works well site-wide. There's also a little bit of padding in the CSS "body_text" that controls the formatting. It's cool site-wide as well.
I don't have this page linked yet, so it's not published. However, I've attached PDFs of the browser and design views, as well as the code as a word doc. The actual editable text region has been shaded gray so you don't have to wade through the template stuff.
Thanks.
W!

Often when you fix one code validation error, it takes care of several others.
Line 153 and 156 - take out the background="filename.html" attribute in your <td> tags
<td background="anniversaries.html"
<td background="firstfedonthemove.html"
Line 179 - change this
... Masters of Education Degree in Instructional Technology.</div>
to this
... Masters of Education Degree in Instructional Technology.</p> </div>
Republish the page and see if that helps.
Gotta run now. Maybe Murray can pick up from here.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics |
Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb

Similar Messages

CS4 and CS6 design views

When viewing the same index file I see significant differences between the design views of Dreamweaver CS4 and Dreamweaver CS6. The index file was created in CS5. My CS4 displays it correctly while CS6 design view is not even close. The live views are correct with both.

Here is the original .php doc. (Does not contain any php because that was the exercise to insert it).
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8">
<title>Explore California</title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="stylesheet" type="text/css" media="all" href="style.css">
</head>
<body class="home blog">
<div id="wrapper" class="hfeed">
<div id="header">
    <div id="masthead"> <a href="http://localhost/explore_ca/index.htm"><img src="images/logo.gif" width="192" height="237" alt="Explore California Home"></a></div>
    
</div>

<div id="main">
    <div id="container">
      <div id="content" role="main">
        <div id="templateID" >
          <h1>Heading</h1>
        </div>
      </div>
      
    </div>
    
    <div id="primary" class="widget-area" role="complementary">
      <ul id="baseNav">
        <li><a href="http://www.explorecalifornia.org/tours.htm" title="Explore our tours" class="tours">Tours</a></li>
        <li><a href="http://www.exlorecalifornia.org/mission.htm" title="What we think" class="mission">Mission</a></li>
        <li><a href="http://www.explorecalifornia.org/contact.htm" title="Contact and support" class="contact">Contact</a></li>
        <li><a href="http://www.explorecalifornia.org/resources.htm" title="Guidance and planning" class="resources">Resources</a></li>
        <li><a href="http://www.explorecalifornia.org/explorers.htm" title="Join our community" class="explorers current">Explorers</a></li>
      </ul>
      
    </div>
    
</div>

<div id="footer" role="contentinfo">
<div id="footerContent">
    <div id="footerMenu">
<h3>Quick Nav</h3>
    <ul id="quickNav">
      <li><a href="../tours.htm" title="Explore our tours">Tours</a></li>
      <li><a href="../mission.htm" title="What we think">Mission</a></li>
      <li><a href="../contact.htm" title="Contact and support">Contact</a></li>
      <li><a href="../resources.htm" title="Guidance and planning">Resources</a></li>
      <li><a href="../explorers.htm" title="Join our community">Explorers</a></li>
    </ul>
</div>
<div id="footerBody">
<div id="footerMidCol">
      <h3><a href="../resources/faq.htm">FAQ</a></h3>
      <p>Find out more about our tours</p>
      <h3><a href="../contact/support.htm">Support</a></h3>
      <p>Need help? It's just a click away!</p>
      <h3><a href="../resources/legal.htm">Legal Disclaimer</a></h3>
    </div>
    <div id="footerRightCol">
      <h1>Explore California</h1>
      <p>5605 Nota Street<br />
        Ventura, CA 93003</p>
      <p class="phone">866.555.4310</p>
    </div>
    </div>
</div>
          <p class="support clearBoth">Explore California © 2010 All Rights Reserved
          </p>
</div>

</div>

</body>
</html>
And here is the related css with reset code
Theme Name: Explore California
Theme URI: http://explorecalifornia.org/
Description: A new theme.
Author: Joe Lowery for Lynda.com
Version: 1.0
Tags: Western
/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
          background: transparent;
          border: 0;
          margin: 0;
          padding: 0;
          vertical-align: baseline;
body {
          line-height: 1;
h1, h2, h3, h4, h5, h6 {
          clear: both;
          font-weight: normal;
ol, ul {
          list-style: none;
blockquote {
          quotes: none;
blockquote:before, blockquote:after {
          content: '';
          content: none;
del {
          text-decoration: line-through;
/* tables still need 'cellspacing="0"' in the markup */
table {
          border-collapse: collapse;
          border-spacing: 0;
a img {
          border: none;
/* =Layout
LAYOUT: Two columns
DESCRIPTION: Two-column fixed layout with one sidebar right of content
#container {
          float: right;
          margin: 0 -260px 0 0;
          width: 100%;
#content {
          margin: 0 280px 0 20px;
#primary,
#secondary {
          float: left;
          overflow: hidden;
          width: 250px;
#secondary {
          clear: right;
#footer {
          clear: both;
          width: 100%;
LAYOUT: One column, no sidebar
DESCRIPTION: One centered column with no sidebar
.one-column #content {
          margin: 0 auto;
          width: 640px;
LAYOUT: Full width, no sidebar
DESCRIPTION: Full width content with no sidebar; used for attachment pages
.single-attachment #content {
          margin: 0 auto;
          width: 900px;
/* =Fonts
body,
input,
textarea,
.page-title span,
.pingback a.url {
          font-family: Georgia, "Bitstream Charter", serif;
h3#comments-title,
h3#reply-title,
#access .menu,
#access div.menu ul,
#cancel-comment-reply-link,
.form-allowed-tags,
#site-info,
#site-title,
#wp-calendar,
.comment-meta,
.comment-body tr th,
.comment-body thead th,
.entry-content label,
.entry-content tr th,
.entry-content thead th,
.entry-meta,
.entry-title,
.entry-utility,
#respond label,
.navigation,
.page-title,
.pingback p,
.reply,
.widget-title,
.wp-caption-text,
input[type=submit] {
          font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
pre {
          font-family: "Courier 10 Pitch", Courier, monospace;
code {
          font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
/* =Structure
/* The main theme structure */
#access .menu-header,
div.menu,
#colophon,
#branding,
#main,
#wrapper {
          margin: 0 auto;
          width: 930px;
#wrapper {
          background: #fff;
          margin-top: 25px;
          padding: 0;
/* Structure the footer area */
#footer-widget-area {
          overflow: hidden;
#footer-widget-area .widget-area {
          float: left;
          margin-right: 20px;
          width: 220px;
#footer-widget-area #fourth {
          margin-right: 0;
#site-info {
          float: left;
          font-size: 14px;
          font-weight: bold;
          width: 700px;
#site-generator {
          float: right;
          width: 220px;
/* =Global Elements
/* Main global 'theme' and typographic styles */
body {
          background: #e1d8b9 url(images/page_background.jpg) repeat-x left top;
body,
input,
textarea {
          color: #666;
          font-size: 12px;
          line-height: 18px;
hr {
          background-color: #e7e7e7;
          border: 0;
          clear: both;
          height: 1px;
          margin-bottom: 18px;
/* Text elements */
p {
          margin-bottom: 18px;
ul {
          list-style: square;
          margin: 0 0 18px 1.5em;
ol {
          list-style: decimal;
          margin: 0 0 18px 1.5em;
ol ol {
          list-style: upper-alpha;
ol ol ol {
          list-style: lower-roman;
ol ol ol ol {
          list-style: lower-alpha;
ul ul,
ol ol,
ul ol,
ol ul {
          margin-bottom: 0;
dl {
          margin: 0 0 24px 0;
dt {
          font-weight: bold;
dd {
          margin-bottom: 18px;
strong {
          font-weight: bold;
cite,
em,
i {
          font-style: italic;
big {
          font-size: 131.25%;
ins {
          background: #ffc;
          text-decoration: none;
blockquote {
          font-style: italic;
          padding: 0 3em;
blockquote cite,
blockquote em,
blockquote i {
          font-style: normal;
pre {
          background: #f7f7f7;
          color: #222;
          line-height: 18px;
          margin-bottom: 18px;
          padding: 1.5em;
abbr,
acronym {
          border-bottom: 1px dotted #666;
          cursor: help;
sup,
sub {
          height: 0;
          line-height: 1;
          position: relative;
          vertical-align: baseline;
sup {
          bottom: 1ex;
sub {
          top: .5ex;
input[type="text"],
textarea {
          background: #f9f9f9;
          border: 1px solid #ccc;
          box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
          -moz-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
          -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
          padding: 2px;
a:link {
          color: #0066cc;
a:visited {
          color: #743399;
a:active,
a:hover {
          color: #ff4b33;
/* Text meant only for screen readers */
.screen-reader-text {
          position: absolute;
          left: -9000px;
/* =Header
#header {
          padding: 30px 0 0;
          background: url(images/blog_banner.jpg) no-repeat;
          height: 187px;
          position: relative;
#masthead {
          position: absolute;
          left: 42px;
          top: -20px;
#site-title {
          float: left;
          font-size: 30px;
          line-height: 36px;
          margin: 0 0 18px 0;
          width: 700px;
#site-title a {
          color: #000;
          font-weight: bold;
          text-decoration: none;
#site-description {
          clear: right;
          float: right;
          font-style: italic;
          margin: 14px 0 18px 0;
          width: 220px;
/* This is the custom header image */
#branding img {
          border-top: 4px solid #000;
          border-bottom: 1px solid #000;
          clear: both;
          display: block;
/* =Menu
#access {
          background: #000;
          display: block;
          float: left;
          margin: 0 auto;
          width: 940px;
#access .menu-header,
div.menu {
          font-size: 13px;
          margin-left: 12px;
          width: 928px;
#access .menu-header ul,
div.menu ul {
          list-style: none;
          margin: 0;
#access .menu-header li,
div.menu li {
          float: left;
          position: relative;
#access a {
          color: #aaa;
          display: block;
          line-height: 38px;
          padding: 0 10px;
          text-decoration: none;
#access ul ul {
          box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
          -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
          -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
          display: none;
          position: absolute;
          top: 38px;
          left: 0;
          float: left;
          width: 180px;
          z-index: 99999;
#access ul ul li {
          min-width: 180px;
#access ul ul ul {
          left: 100%;
          top: 0;
#access ul ul a {
          background: #333;
          line-height: 1em;
          padding: 10px;
          width: 160px;
          height: auto;
#access li:hover > a,
#access ul ul :hover > a {
          background: #333;
          color: #fff;
#access ul li:hover > ul {
          display: block;
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
          color: #fff;
* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
          color: #fff;
/* =Content
#main {
          clear: both;
          overflow: hidden;
          padding: 40px 0 0 0;
#content {
          margin-bottom: 36px;
#content,
#content input,
#content textarea {
          color: #333;
          font-size: 16px;
          line-height: 24px;
#content p,
#content ul,
#content ol,
#content dd,
#content pre,
#content hr {
          margin-bottom: 24px;
#content ul ul,
#content ol ol,
#content ul ol,
#content ol ul {
          margin-bottom: 0;
#content pre,
#content kbd,
#content tt,
#content var {
          font-size: 15px;
          line-height: 21px;
#content code {
          font-size: 13px;
#content dt,
#content th {
          color: #000;
#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
          color: #000;
          line-height: 1.5em;
          margin: 0 0 20px 0;
#content table {
          border: 1px solid #e7e7e7;
          margin: 0 -1px 24px 0;
          text-align: left;
          width: 100%;
#content tr th,
#content thead th {
          color: #888;
          font-size: 12px;
          font-weight: bold;
          line-height: 18px;
          padding: 9px 24px;
#content tr td {
          border-top: 1px solid #e7e7e7;
          padding: 6px 24px;
#content tr.odd td {
          background: #f2f7fc;
.hentry {
          margin: 0 0 48px 0;
.home .sticky {
          background: #f2f7fc;
          border-top: 4px solid #000;
          margin-left: -20px;
          margin-right: -20px;
          padding: 18px 20px;
.single .hentry {
          margin: 0 0 36px 0;
.page-title {
          color: #000;
          font-size: 14px;
          font-weight: bold;
          margin: 0 0 36px 0;
.page-title span {
          color: #333;
          font-size: 16px;
          font-style: italic;
          font-weight: normal;
.page-title a:link,
.page-title a:visited {
          color: #888;
          text-decoration: none;
.page-title a:active,
.page-title a:hover {
          color: #ff4b33;
#content .entry-title {
          color: #000;
          font-size: 21px;
          font-weight: bold;
          line-height: 1.3em;
          margin-bottom: 0;
.entry-title a:link,
.entry-title a:visited {
          color: #000;
          text-decoration: none;
.entry-title a:active,
.entry-title a:hover {
          color: #ff4b33;
.entry-meta {
          color: #888;
          font-size: 12px;
.entry-meta abbr,
.entry-utility abbr {
          border: none;
.entry-meta abbr:hover,
.entry-utility abbr:hover {
          border-bottom: 1px dotted #666;
.entry-content,
.entry-summary {
          clear: both;
          padding: 12px 0 0 0;
#content .entry-summary p:last-child {
          margin-bottom: 12px;
.entry-content fieldset {
          border: 1px solid #e7e7e7;
          margin: 0 0 24px 0;
          padding: 24px;
.entry-content fieldset legend {
          background: #fff;
          color: #000;
          font-weight: bold;
          padding: 0 24px;
.entry-content input {
          margin: 0 0 24px 0;
.entry-content input.file,
.entry-content input.button {
          margin-right: 24px;
.entry-content label {
          color: #888;
          font-size: 12px;
.entry-content select {
          margin: 0 0 24px 0;
.entry-content sup,
.entry-content sub {
          font-size: 10px;
.entry-content blockquote.left {
          float: left;
          margin-left: 0;
          margin-right: 24px;
          text-align: right;
          width: 33%;
.entry-content blockquote.right {
          float: right;
          margin-left: 24px;
          margin-right: 0;
          text-align: left;
          width: 33%;
.page-link {
          color: #000;
          font-weight: bold;
          margin: 0 0 22px 0;
          word-spacing: 0.5em;
.page-link a:link,
.page-link a:visited {
          background: #f1f1f1;
          color: #333;
          font-weight: normal;
          padding: 0.5em 0.75em;
          text-decoration: none;
.home .sticky .page-link a {
          background: #d9e8f7;
.page-link a:active,
.page-link a:hover {
          color: #ff4b33;
body.page .edit-link {
          clear: both;
          display: block;
#entry-author-info {
          background: #f2f7fc;
          border-top: 4px solid #000;
          clear: both;
          font-size: 14px;
          line-height: 20px;
          margin: 24px 0;
          overflow: hidden;
          padding: 18px 20px;
#entry-author-info #author-avatar {
          background: #fff;
          border: 1px solid #e7e7e7;
          float: left;
          height: 60px;
          margin: 0 -104px 0 0;
          padding: 11px;
#entry-author-info #author-description {
          float: left;
          margin: 0 0 0 104px;
#entry-author-info h2 {
          color: #000;
          font-size: 100%;
          font-weight: bold;
          margin-bottom: 0;
.entry-utility {
          clear: both;
          color: #888;
          font-size: 12px;
          line-height: 18px;
.entry-meta a,
.entry-utility a {
          color: #888;
.entry-meta a:hover,
.entry-utility a:hover {
          color: #ff4b33;
#content .video-player {
          padding: 0;
/* =Asides
.home #content .category-asides p {
          font-size: 14px;
          line-height: 20px;
          margin-bottom: 10px;
          margin-top: 0;
.home .hentry.category-asides {
          padding: 0;
.home #content .category-asides .entry-content {
          padding-top: 0;
/* =Gallery listing
.category-gallery .size-thumbnail img {
          border: 10px solid #f1f1f1;
          margin-bottom: 0;
.category-gallery .gallery-thumb {
          float: left;
          margin-right: 20px;
          margin-top: -4px;
.home #content .category-gallery .entry-utility {
          padding-top: 4px;
/* =Attachment pages
.attachment .entry-content .entry-caption {
          font-size: 140%;
          margin-top: 24px;
.attachment .entry-content .nav-previous a:before {
          content: '\2190\00a0';
.attachment .entry-content .nav-next a:after {
          content: '\00a0\2192';
/* =Images
#content img {
          margin: 0;
          height: auto;
          max-width: 640px;
          width: auto;
#content .attachment img {
          max-width: 900px;
#content .alignleft,
#content img.alignleft {
          display: inline;
          float: left;
          margin-right: 24px;
          margin-top: 4px;
#content .alignright,
#content img.alignright {
          display: inline;
          float: right;
          margin-left: 24px;
          margin-top: 4px;
#content .aligncenter,
#content img.aligncenter {
          clear: both;
          display: block;
          margin-left: auto;
          margin-right: auto;
#content img.alignleft,
#content img.alignright,
#content img.aligncenter {
          margin-bottom: 12px;
#content .wp-caption {
          background: #f1f1f1;
          line-height: 18px;
          margin-bottom: 20px;
          padding: 4px;
          text-align: center;
#content .wp-caption img {
          margin: 5px 5px 0;
#content .wp-caption p.wp-caption-text {
          color: #888;
          font-size: 12px;
          margin: 5px;
#content .wp-smiley {
          margin: 0;
#content .gallery {
          margin: 0 auto 18px;
#content .gallery .gallery-item {
          float: left;
          margin-top: 0;
          text-align: center;
          width: 33%;
#content .gallery img {
          border: 2px solid #cfcfcf;
#content .gallery .gallery-caption {
          color: #888;
          font-size: 12px;
          margin: 0 0 12px;
#content .gallery dl {
          margin: 0;
#content .gallery img {
          border: 10px solid #f1f1f1;
#content .gallery br+br {
          display: none;
#content .attachment img { /* single attachment images should be centered */
          display: block;
          margin: 0 auto;
/* =Navigation
.navigation {
          color: #888;
          font-size: 12px;
          line-height: 18px;
          overflow: hidden;
.navigation a:link,
.navigation a:visited {
          color: #888;
          text-decoration: none;
.navigation a:active,
.navigation a:hover {
          color: #ff4b33;
.nav-previous {
          float: left;
          width: 50%;
.nav-next {
          float: right;
          text-align: right;
          width: 50%;
#nav-above {
          margin: 0 0 18px 0;
#nav-above {
          display: none;
.paged #nav-above,
.single #nav-above {
          display: block;
#nav-below {
          margin: -18px 0 0 0;
/* =Comments
#comments {
          clear: both;
#comments .navigation {
          padding: 0 0 18px 0;
h3#comments-title,
h3#reply-title {
          color: #000;
          font-size: 20px;
          font-weight: bold;
          margin-bottom: 0;
h3#comments-title {
          padding: 24px 0;
.commentlist {
          list-style: none;
          margin: 0;
.commentlist li.comment {
          border-bottom: 1px solid #e7e7e7;
          line-height: 24px;
          margin: 0 0 24px 0;
          padding: 0 0 0 56px;
          position: relative;
.commentlist li:last-child {
          border-bottom: none;
          margin-bottom: 0;
#comments .comment-body ul,
#comments .comment-body ol {
          margin-bottom: 18px;
#comments .comment-body p:last-child {
          margin-bottom: 6px;
#comments .comment-body blockquote p:last-child {
          margin-bottom: 24px;
.commentlist ol {
          list-style: decimal;
.commentlist .avatar {
          position: absolute;
          top: 4px;
          left: 0;
.comment-author {
.comment-author cite {
          color: #000;
          font-style: normal;
          font-weight: bold;
.comment-author .says {
          font-style: italic;
.comment-meta {
          font-size: 12px;
          margin: 0 0 18px 0;
.comment-meta a:link,
.comment-meta a:visited {
          color: #888;
          text-decoration: none;
.comment-meta a:active,
.comment-meta a:hover {
          color: #ff4b33;
.commentlist .even {
.commentlist .bypostauthor {
.reply {
          font-size: 12px;
          padding: 0 0 24px 0;
.reply a,
a.comment-edit-link {
          color: #888;
.reply a:hover,
a.comment-edit-link:hover {
          color: #ff4b33;
.commentlist .children {
          list-style: none;
          margin: 0;
.commentlist .children li {
          border: none;
          margin: 0;
.nopassword,
.nocomments {
          display: none;
#comments .pingback {
          border-bottom: 1px solid #e7e7e7;
          margin-bottom: 18px;
          padding-bottom: 18px;
.commentlist li.comment+li.pingback {
          margin-top: -6px;
#comments .pingback p {
          color: #888;
          display: block;
          font-size: 12px;
          line-height: 18px;
          margin: 0;
#comments .pingback .url {
          font-size: 13px;
          font-style: italic;
/* Comments form */
input[type=submit] {
          color: #333;
#respond {
          border-top: 1px solid #e7e7e7;
          margin: 24px 0;
          overflow: hidden;
          position: relative;
#respond p {
          margin: 0;
#respond .comment-notes {
          margin-bottom: 1em;
.form-allowed-tags {
          line-height: 1em;
.children #respond {
          margin: 0 48px 0 0;
h3#reply-title {
          margin: 18px 0;
#comments-list #respond {
          margin: 0 0 18px 0;
#comments-list ul #respond {
          margin: 0;
#cancel-comment-reply-link {
          font-size: 12px;
          font-weight: normal;
          line-height: 18px;
#respond .required {
          color: #ff4b33;
          font-weight: bold;
#respond label {
          color: #888;
          font-size: 12px;
#respond input {
          margin: 0 0 9px;
          width: 98%;
#respond textarea {
          width: 98%;
#respond .form-allowed-tags {
          color: #888;
          font-size: 12px;
          line-height: 18px;
#respond .form-allowed-tags code {
          font-size: 11px;
#respond .form-submit {
          margin: 12px 0;
#respond .form-submit input {
          font-size: 14px;
          width: auto;
/* =Widget Areas
.widget-area ul {
          list-style: none;
          margin-left: 0;
.widget-area ul ul {
          list-style: square;
          margin-left: 1.3em;
.widget_search #s {/* This keeps the search inputs in line */
          width: 60%;
.widget_search label {
          display: none;
.widget-container {
          margin: 0 0 18px 45px;
.widget-title {
          color: #3B6B91;
          font-weight: bold;
.widget-area a:link,
.widget-area a:visited {
          text-decoration: none;
.widget-area a:active,
.widget-area a:hover {
          text-decoration: underline;
.widget-area .entry-meta {
          font-size: 11px;
#wp_tag_cloud div {
          line-height: 1.6em;
#wp-calendar {
          width: 100%;
#wp-calendar caption {
          color: #222;
          font-size: 14px;
          font-weight: bold;
          padding-bottom: 4px;
          text-align: left;
#wp-calendar thead {
          font-size: 11px;
#wp-calendar thead th {
#wp-calendar tbody {
          color: #aaa;
#wp-calendar tbody td {
          background: #f5f5f5;
          border: 1px solid #fff;
          padding: 3px 0 2px;
          text-align: center;
#wp-calendar tbody .pad {
          background: none;
#wp-calendar tfoot #next {
          text-align: right;
.widget_rss a.rsswidget {
          color: #000;
.widget_rss a.rsswidget:hover {
          color: #ff4b33;
.widget_rss .widget-title img {
          width: 11px;
          height: 11px;
/* Main sidebars */
#main .widget-area ul {
          margin-left: 0;
          padding: 0 20px 0 0;
#main .widget-area ul ul {
          border: none;
          margin-left: 1.3em;
          padding: 0;
#primary {
#secondary {
/* Footer widget areas */
#footer-widget-area {
/* =Footer
#footer {
          margin-bottom: 20px;
          background: url(images/footer_back.gif) no-repeat center top;
          height: 600px;
#colophon {
          overflow: hidden;
          padding: 45px 0;
          font-weight: bold;
          color: #FFF;
          text-align: center;
#site-info {
          font-weight: bold;
#site-info a {
          color: #000;
          text-decoration: none;
#site-generator {
          font-style: italic;
          position: relative;
#site-generator a {
          background: url(images/wordpress.png) center left no-repeat;
          color: #666;
          display: inline-block;
          line-height: 16px;
          padding-left: 20px;
          text-decoration: none;
#site-generator a:hover {
          text-decoration: underline;
img#wpstats {
          display: block;
          margin: 0 auto 10px;
/* =Mobile Safari ( iPad, iPhone and iPod Touch )
pre {
          -webkit-text-size-adjust: 140%;
code {
          -webkit-text-size-adjust: 160%;
#access,
.entry-meta,
.entry-utility,
.navigation,
.widget-area {
          -webkit-text-size-adjust: 120%;
#site-description {
          -webkit-text-size-adjust: none;
/* =Print Style
@media print {
          body {
                    background: none !important;
          #wrapper {
                    clear: both !important;
                    display: block !important;
                    float: none !important;
                    position: relative !important;
          #header {
                    border-bottom: 2pt solid #000;
                    padding-bottom: 18pt;
          #colophon {
                    border-top: 2pt solid #000;
          #site-title,
          #site-description {
                    float: none;
                    line-height: 1.4em;
                    margin: 0;
                    padding: 0;
          #site-title {
                    font-size: 13pt;
          .entry-content {
                    font-size: 14pt;
                    line-height: 1.6em;
          .entry-title {
                    font-size: 21pt;
          #access,
          #branding img,
          #respond,
          .comment-edit-link,
          .edit-link,
          .navigation,
          .page-link,
          .widget-area {
                    display: none !important;
          #container,
          #header,
          #footer {
                    margin: 0;
                    width: 100%;
          #content,
          .one-column #content {
                    margin: 24pt 0 0;
                    width: 100%;
          .wp-caption p {
                    font-size: 11pt;
          #site-info,
          #site-generator {
                    float: none;
                    width: auto;
          #colophon {
                    width: auto;
          img#wpstats {
                    display: none;
          #site-generator a {
                    margin: 0;
                    padding: 0;
          #entry-author-info {
                    border: 1px solid #e7e7e7;
          #main {
                    display: inline;
          .home .sticky {
                    border: none;
/* -------- sidebar region --------*/
#sidebar .sidebarContent {
          padding-left: 45px;
/* base navigation */
ul#baseNav {
          float: left;
          list-style: none;
          margin:0;
          padding:0;
          margin-bottom: 30px;
ul#baseNav li {
          margin: 0;
          padding: 0;
ul#baseNav li a{
          display: block;
          width: 272px;
          height: 70px;
          text-indent: -1000em;
ul#baseNav li a.tours {
          background: url(images/tours_main.gif) no-repeat left top;
ul#baseNav li a.mission{
          background: url(images/mission_main.gif) no-repeat left top;
ul#baseNav li a.contact {
          background: url(images/contact_main.gif) no-repeat left top;
ul#baseNav li a.resources {
          background: url(images/resource_main.gif) no-repeat left top;
ul#baseNav li a.explorers {
          background: url(images/explorers_main.gif) no-repeat left top;
ul#baseNav li a.current, ul#baseNav li a.current:hover {
          background-position: right top;
          border: none;
          cursor: default;
ul#baseNav li a:hover {
          background-position: -272px 0;
          border: none;
/* ------- footer region ------- */
#footer h1 {
          padding: 0;
#footer h3 {
          font: normal 1.3em Arial, Helvetica, sans-serif;
          color: #fff;
          margin-bottom: 0.5em;
          letter-spacing: 0.1em;
          margin-top: 0px;
#footer p{
          font: normal 1em Georgia, "Times New Roman", Times, serif;
          color: #fff;
#footer p.support {
          font-size: 0.8em;
          text-align: center;
          padding-top: 250px;
#footer p.support a{
          color: #147;
#footer p.support a:hover{
          color: #147;
          border-bottom: 1px dashed #147;
          text-decoration:none;
#footer ul#quickNav {
          list-style: none;
          margin: 0;
          padding: 0;
#footer ul#quickNav li {
          margin: 0 0 .5em 0;
          padding: 0 ;
#footer ul#quickNav li a{
          text-decoration: none;
          color: #fff;
          font-size: 1em;
          font-family: Georgia, "Times New Roman", Times, serif;
#footer ul#quickNav li a:hover {
          color: #193742;
          border-bottom-color: #193742;
#footer #footerMenu {
          float: left;
          width: 230px;
#footer #footerBody {
          float: right;
          width: 540px;
#footer #footerBody a {
          text-decoration: none;
          color: #fff;
#footer #footerBody a:hover {
          color: #193742;
          border-bottom-color: #193742;
#footer #footerBody #footerMidCol {
          float: left;
          width: 270px;
#footer #footerBody #footerMidCol p {
          margin-bottom: 2em;
#footer #footerBody #footerRightCol {
          float: right;
          width: 270px;
#footer #footerBody #footerRightCol h1{
          font: bold 1.6em Georgia, "Times New Roman", Times, serif;
          color: #fff;
          letter-spacing:.1em;
          text-align:right;
          margin-bottom: .25em;
#footer #footerBody #footerRightCol p{
          color: #fff;
          letter-spacing:.1em;
          line-height: 1.2;
          text-align:right;
          margin-bottom: 1em;
#footer #footerBody #footerRightCol p.phone{
          font: bold 1.6em Georgia, "Times New Roman", Times, serif;
          color: #fff;
          letter-spacing:.1em;
/* Page template rules */
#templateID h1 {
          text-align: center;
          font: 4em "Trebuchet MS", Arial, Helvetica, sans-serif;
#footer #footerContent {
          padding: 45px 30px 0px;
          overflow: hidden;

Live view different from design view

Hi folks,
Does anyone know why, in dreamweaver, there is a difference between the site design in Design View and what you see in live view; and how should oneapproach this difference?
Thanks.

Design View was coded a LONG time ago and Adobe hasn't really changed it much. It is very useful for my workflow, which is to work in Split view and jump back and forth between the Design view pane and the Code View pane. I know right off the bat that I won't see everything. Design View will never show me the newer CSS3 attributes, like shadow, gradients and so on. But it gives me a "rough" analog to work with while I'm doing general layout. Things like, "Am I breaking up the text enough to keep people on my web page?" "Do I have this typeface too small?" "Is the picture I just put in there positioned correctly?"
Also, be forewarned, "Live" view is Webkit (an Open Source browser) so it will accurately portray Google's Chrome and Apple's Safari. It will not accurately show issues with Firefox and Internet Exploiter. So, before you launch your website, do a check in all of the major browsers.

3rd party tags and design view customization

I know that Dreamweaver allows me to replace third party tags
with images in design view. My question is can I make my jsp widget
tags look dependent on attributes of that tag?
And why can’t I say that my <widget:suggestionBox
… size=”10” /> should look like a <input
size=”10” /> in design view?
Are there plans to support this long overlooked functionality
in the near future?

Well I am sure you wrote in good faith and I appreciate
anybodys help . However, I do not want to be rude, but if you have
nothing to say, than please don't post something useless. I am sure
there are many areas where you can post real solutions.
Of course DW works nicely with xsl in design view. My problem
was finally answered in another thread, I hope that link works.
http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?catid=190&threadid=1266443&fo rumid=12
I mark this as the answer, so everybody with that problem
knows where the solution is.
Joe

Question Aperture as a Browser for Viewing Photo Library

Hello,
I am been using Nikon's ViewNX as a browser for viewing photos mainly for workflow.
It is real buggy with Snow Leopard OS 10.6.2 ..... freezing and all. Use Photoshop for adjusting photos.
Question: Is Aperture worthwhile to use for Browsing Photos downloaded from my camera ?
I realize it has a lot of power for editing photos (like photoshop). But I wish to dump the VIEWNX as a photo browser.
Thanks,
John

John,
Hopefully Nikon Software will release a Snow Leopard capable versions in late January (as mentioned on other Nikon-related photog-forums).
I too would like VNX to be solid and work better, and be a more user-friendly intermedium to manage some details while working between NX2 and Aperture.
(Gosh, as a sidenote, can those Aperture engineers make the nav panel fonts any smaller for some of us of strained eyeballs...only kidding Apple, only kidding.)
I do quick n painless edits on "most" of my photos in Aperture (still a newb at it, and just switched from a managed lib to a referenced one), and use NX2 to really pop those few pictures I manage to have composed well.

Design view differs from browser view

When viewing in Design view my code correctly shows 2
overlapping rectangles. In browser view it shows two smaller
rectangles that do not overlap. I am using DW MX 2004. I have
attached small sample code.
Thanks,
Alexariel

DMX2004's Design view is not a browser, and can only
approximate (poorly)
how a page will look. The browser is always right. For
example, DMX2004 is
insensitive to the CSS error here -
div {width:250px; height:100;px; position:absolute; }
(note the ';' between '100' and 'px')
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Alexariel" <[email protected]> wrote in
message
news:gqh83o$kld$[email protected]..
> When viewing in Design view my code correctly shows 2
overlapping
> rectangles.
> In browser view it shows two smaller rectangles that do
not overlap. I am
> using
> DW MX 2004. I have attached small sample code.
> Thanks,
> Alexariel
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
> "
http://www.w3.org/TR/html4/loose.dtd">
> <html>
> <head>
> <title>Untitled Document</title>
> <meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
> <style type="text/css">
> body {margin: 0px; padding: 0px;}
> div {width:250px; height:100;px; position:absolute; }
> div.one {background-color:#FF0000; left: 0px; top: 0px;
> div.two {background-color:#00FF00;left: 75px; top:
25px;}
> </style>
> </head>
> <body>
> <div class="one">one</div>
> <div class="two">two</div>
> </body>
> </html>
>

CS4 Design view does not render CSS correctly but browser does !?!?

I am designing a layout using primarily CSS. I want to insert a table inside one of the div's. In design view the table gets pushed way out of position but in live view and on the web, the page looks correct. Why? Am I missing something in design view?
Here is the actual page I am working on Sample Page
Here is what I see in design view Design View
This glitch is making it difficult to add content to the table.
I tried to edit the page with Contribute CS4 and the table gets pushed so far out of position that it is impossible to access it. The page looks fine when I am connected but as soon as I try to edit it does not render properly.

This question comes up almost daily, and I dont recall seeing an answer that is much different. It comes down to that it does not matter what DV shows, it is the browser view that counts. How frustrating it is to spend time and effort to correct a view in DW Design, only to find out it throws your browser view all askew. Its hard enough to make x number of different browsers all look good with however many screen resolutions, to worry about something that in the end does not matter.....
Work more in code view, let F12 be your companion.
Gary

Is there anyway to lock CSS rules? What's happening in design view?

Hi,
I have no idea what I've done, but I've accidentally deleted some CSS rules. Now my design view shows almost a random pattern, yet most things seem to still be working when I view it in a browser.
So,
Is there a way to lock CSS rules so that you don't accidentally loose them? Is there a way to toggle them on and off? Why does my design view suddenly look all whacked out?
The jpg shows my design view and here is the link to the page.
http://test.taffyproductions.com/reservations.htm

You have an id set on one of the divs, but there is no rule for that ID selector:
<div id="sidebar2-1"><img src="_images/sidebar2.jpg" alt="sidebar2" width="180" height="479" /></div>
Change the id to sidebar2 and see what happens. The page should fall back into place correctly.
There is no way to 'lock' in styles, you just need to be careful on editing the style rules as you go
You could always keep a backup copy of a stylesheet that works correctly and if you then want to play around with the rules, do so, but knowing that you have a backup copy if you need it.
I'd also take a look at the naming convention you use for file names. I'd not start a file name or folder with and underscore... some browsers may choke. always better off starting a name with a letter, no characters, or numerals etc.,to be on the safe side.
Nadia
Adobe Community Expert : Dreamweaver
Unique CSS Templates | Tutorials | SEO Articles
http://www.DreamweaverResources.com
Web Design & Development
http://www.perrelink.com.au
http://twitter.com/nadiap

Layout / Design View questions

This is the sort of thing I've wondered about before, but
would really like to get to the bottom of.
Sometimes things seem to go a bit funny in design view -
although the page will display correctly in a browser - but can
anyone let me know if there is something not quite right somewhere,
or if it actually really matters?
As an example, I've posted some screenshots on the link
below. The only difference is that the 'footer' div has been added
to the second page. They're both fine in the browser, but as you
can see from the screenshots, the first is fine in design view, but
the second (the bottom two screenshots) it all looks wrong.
Basically is this anything to worry about?
Even if it isn't, it is a bit annoying, as from a design POV
it's good to see things as they should be!
screenshot
1
My second question is about TD widths - in these pages I have
a wrapper div set at 780px, and in the table containing the
navigation, they navigation buttons/graphics seem to need to be one
px narrower than they actually are (54 instead of 55px etc) in
order for them to line up to the total 780px, as per the screenshot
below :
screenshot
2
If anyone could shed any light on any of this it would be
greatly appreciated.
Cheers,
Iain

dukla wrote:
> Basically is this anything to worry about?
No its nothing to worry about.
I don't know what version of DW you are using but all
versions up to
2004 didn't handle css that well.
I believe DW8 has improved. However having said that I have
found a lot
of the time that it also has a lot to do with how you write
the css. I
can't believe version 8 can possible cover all eventualities
so it
probably still shows the odd thing or two incorrectly.
Personally I never had much trouble with DW04. It works
pretty well with
the css I write.
> Even if it isn't, it is a bit annoying, as from a design
POV it's good to see
> things as they should be!
Yeah it does get a bit annoying but you have to work through
it.
> My second question is about TD widths - in these pages I
have a wrapper div
> set at 780px, and in the table containing the
navigation, they navigation
> buttons/graphics seem to need to be one px narrower than
they actually are (54
> instead of 55px etc) in order for them to line up to the
total 780px, as per
> the screenshot below :
>
>
http://www.handprintwebdesign.co.uk/CollinsBartholomew/tableDesign.htm
>
> If anyone could shed any light on any of this it would
be greatly appreciated.
I don't think this web thing is totally precise and sometimes
you have
to 'hack' it to do the job. Usually if thing are a px out I
don't bother
unless it screws the design up in too mmnay browsers.

Dreamweaver Momentarily Freezing When Moving Between Code and Design View

I have Dreamweaver CS4 and have had a problem that just started yesterday. I have rebooted my machine to no avail. The local copy and the live copy of the site are on two different servers that we access through a local network.
Dreamweaver slows to a standstill if I click to another program and then attempt to go back into Dreamweaver or if I switch between design and code view.
I haven't made any changes to Dreamweaver in the way of added extensions or updates. Is it possible that the cause of this could be either a server problem or a connectivity to the server problem?
Many thanks in advance for any help you could provide.
Andy

You can use CTRL+# to switch between Code and Design View.
By the way, this is the Dreamweaver Application Development forum which deals with questions about using server-side scripting languages like PHP or ColdFusion. General Dreamweaver questions should be posted in the regular Dreamweaver General Discussions forum.
And while I´m at it: please use descriptive headlines such as "how to switch between Code and Design View" for your posts -- mentioning your screen name "Goula129" is not helpful to other users.

Design view and browser view in DW are different than when I view from local folder

I'm brand new to Dreamweaver CS5.5 and here is my problem:
I've made an html page in dreamweaver with a banner, with an additional graphic and some text on top of the banner. It displays just fine in every browser when I view from the local folder, but when I open DW and view, it displays incorrectly in all three design, live and browser views within DW. If I make changes to the css file until it views correctly in design view, it no longer displays correctly from the local folder and it still doesn't view correctly in live or browser view within DW. If what I'm doing isnt going to display accurately in any of the views provided by Dreamweaver as compared to the live server, whats the point in having this software? I could just keep building webpages in notepad and uploading with CoreFTP.
Any suggestions? Is it some setting that I dont know about that I need to change within DW? Please help.

align="center" is deprecated (obsolete) code in XHTML & HTML5 doc types. Instead of styling markup with HTML, you should be using CSS.
CSS
.center {text-align:center}
HTML
<p class="center">some centered text here</p>
With respect to break tags, in XHTML doc types the correct syntax is <br /> not <br>. However your usage of line breaks is inconsistent with good symantic markup. Use headings <h1> <h2> <h3> <h4> for important keywords. Use <p> for descriptive paragraphs. Use <ul> <li> or <ol> <li> for lists. Line breaks should be used minimally if ever.
XHTML doc types require all tags to be lowercase. Uppercase tags will throw errors.
Your design is too rigid. When text size is increased in browsers, your content is unreadable. See screenshot.
SOLUTIONS:
1) DO NOT USE POSITION ABSOLUTE. You don't need it. Absolute positioning removes content from the normal document flow resulting in a jumbled mess. Use default CSS positioning (none) with margins, padding & floats to align elements.
2) Remove HEIGHT values from all CSS containers. Height limits a container's capacity to hold more content when needed. Container height should always be determined by the amount of content it holds; not explicit values. If required to reveal a background image, for example, use CSS min-height instead of height.
CSS Box Model
http://www.w3schools.com/css/css_boxmodel.asp
CSS Floats
http://www.w3schools.com/cssref/pr_class_float.asp
CSS min-height
http://www.w3schools.com/cssref/pr_dim_min-height.asp
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com/

Font in Design View different from font in Live View and browser preview

My external style sheet has the body set for a sans-serif font and there is nothing to contradict it in the HTML documents. But while I get sans-serif in the Design View (as you would expect), I get a serif font in Live View and Browser Preview, not to mention on the Web itself.
How is this possible (and what should I do about it)?
--Paul

Murray and David: it worked! It is a rare and joyous experience to have a straightforward solution to the sorts of problems I come up with (including other realms). But I have to say that with HTML and CSS (and hence with Dreamweaver), solutions to difficulties have seemed within easier reach than in other parts of the computer world.
By the way, I wanted to choose "correct answer" for both your posts, but after making the first click it was no longer available for the remaining post--so I typed "helpful" even though that one was correct too.
Thanks again.
--Paul

Design View not matching Browser View

I mostly work in Design View and sometimes I notice there are extreme differences in what I am seeing in Design View and what I see when I preview the site with various browsers.
I now have a footer that I can't even see in design view but when I preview in a browser it's placed perfectly at the bottom of my main div. I later noticed that it's at the very top of the design view
out of view so that the very bottom of my footer div is barely showing on the very top of my design view window. Do I have code issues that are interfering? I am a complete newbie with code by the way.
My site is at: dev.soundscapemedia.com
Many thanks

Design view should never be considered accurate. It is Dreamweaver's rough guestimation of how things will look if rendered in a browser. The only "view" that may be considered accurate is the "Live" view - because it actually is rendered using a browser engine. Even with Live view though, one should always test against several major browsers.
So my suggestion/solution would be to ignore whatever crazy stuff Design view shows and just make sure you code to web standards and preview in a browser (or use Live view).
Remember: Design view is only a rough guestimate by Dreamweaver and should not be considered accurate.

NVL in view: discrepancy between 10G and 11G

Hi,
I've discovered some discrepancy between 10G and 11G in a way how view deals with NVL-based column in a where clause.
Here are two examples:
*10G:*
Connected to:
Oracle Database 10g Release 10.2.0.4.0 - Production
SQL> create table test_nvl (null_column number);
Table created.
SQL> insert into test_nvl values (null);
1 row created.
SQL> commit;
Commit complete.
SQL> create view view_nvl as select nvl(null_column,0) null_column from test_nvl;
View created.
SQL> select * from view_nvl where null_column is not null and null_column = 0;
NULL_COLUMN
0
*11G*
Connected to:
Oracle Database 11g Release 11.2.0.1.0 - 64bit Production
SQL> create table test_nvl (null_column number);
Table created.
SQL> insert into test_nvl values (null);
1 row created.
SQL> commit;
Commit complete.
SQL> create view view_nvl as select nvl(null_column,0) null_column from test_nvl;
View created.
SQL> select * from view_nvl where null_column is not null and null_column = 0;
no rows selected
Does anyone know why it behaves differently?
I couldn't find any documentation regarding this.
Or I'm just missing something here.
Thanks

BANNER
Oracle Database 11g Enterprise Edition Release 11.2.0.2.0 - 64bit Production
PL/SQL Release 11.2.0.2.0 - Production
CORE     11.2.0.2.0     Production
TNS for HPUX: Version 11.2.0.2.0 - Production
NLSRTL Version 11.2.0.2.0 - Production
CREATE TABLE test_nvl (null_column NUMBER);
INSERT INTO test_nvl
     VALUES (NULL);
COMMIT;
CREATE VIEW view_nvl
AS
   SELECT NVL (null_column, 0) null_column FROM test_nvl;
SELECT *
FROM view_nvl
WHERE null_column IS NOT NULL AND null_column = 0;
NULL_COLUMN
0

Page showing up differently in design view then in web browser

I am working on creating a page that advertises two products
that we are selling. I have a table that shows up just how I want
it to in design view. As soon as I view it in live view or in a
browser it shows up differently. It is like table rows are being
invisibly inserted.
Does anyone have any advice on how to fix this?
Thanks

Here is the code for the page that I am working on:

Discrepancy between browser & design view; Hor. Rule Question

Similar Messages

Maybe you are looking for