Rendering problems only in editor, not on web

does anyone use design view in dreamweaver?

[nigassma]

I have a nav div floating left on a page that looks fine when it's viewed in any browser, but for some reason it runs across the screen in Dreamweaver's "design" view. I only use code view, but it just seems strange to me that it would do something like that.

Here's the CSS...

#nav {
clear: both;
float: left;
margin: -28px 0 0 0;
width: 50px;
}
#nav ul {
margin: 0;
padding: 0;
width: 10em;
background: #FFF;
background-position: 45% 100%;
background-repeat: repeat-y;
}
#nav ul.level2 {
background: #FFF;
background-position: 45% 100%;
background-repeat: repeat-y;
}
#nav ul.level3 {
background: #FFF;
background-position: 45% 100%;
background-repeat: repeat-y;
}
#nav li {
position: relative;
background-image: url(images/small_arrow.gif);
background-repeat: no-repeat;
background-position: left;
list-style: none;
margin: 0;
z-index: 25;
padding-left: 15px;
}
#nav li:hover {
z-index: 25;
background-image: url(images/hoversmall_arrow.gif);
background-repeat: no-repeat;
background-position: left;
}
#nav li.submenu {
background: url(images/submenu.gif);
background-position: 5% 100%;
background-repeat: no-repeat;
}
#nav li.submenu:hover {
background-color: #DDD;
color: #000;
}
#nav li a {
padding: 0.25em 0 0.25em 0.5em;
text-decoration: none;
width: 15em;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #A4A4A4;
z-index: 30;
}
#nav li a:hover {
border-left-color: #DDD;
color: #000;
}
#nav>ul a {
width: auto;
}
#nav ul ul {
position: absolute;
top: 0;
left: 10em;
display: none;
}
#nav ul.level1 li.submenu:hover ul.level2, #nav ul.level2 li.submenu:hover ul.level3 {
display:block;
}

------------The only thing that looks normal is the header and one of the content divs, everything else is running to the right.----------

(more troubled css)...
#body_quote p {
font-style: italic;
font-size: 1.5em;
position: relative;
line-height: 1.2em;
text-align: center;
border-color: #DDD;
border-style: solid;
border-width: 1px;
width: 250px;
left: 175px;
top: 14px;
}
#sideimage {
float: left;
position: relative;
background: url(images/dove.gif);
background-position: left;
background-repeat: no-repeat;
height: 592px;
width: 225px;
margin-top: -500px;
margin-bottom: -60px;
z-index: 50;
}

[nanotopia]

WYSIWYG editors aren't 100% perfect. VisualStudio.NET is one of the worst, and Dreamweaver has its issues too (which you no doubt just discovered). Many seasoned designers don't use WYSIWYG at all. They hand code everything in the HTML view.

As long as it renders correctly in different browsers, that's all that should matter. However, this may be a good time to ween yourself off of Dreamweaver's design view. You will increasingly experience these issues as your layouts become more complex.

[nigassma]

Yah I never use design view, but if I move on to bigger and better things, the next person to take my position where I work may not have the ability to understand how to work a webpage in code view (heaven forbid someone knows what they're doing).

[piskie]

I overcome this by using a second CSS for design view only.
When I have got the completed page in WYSIWYG, I then change the css file from design.css to styles.css with a bit of swapping back and forth in between.

A nuisance, but it enables Design View to be used when it can increase speed of page production against hand coding.

[nigassma]

What does the swapping entail? and does it really make it worth while?

[piskie]

I use external css files and modify one to compensate for DW design view problems. This I call design.css which is a direct copy of what will be my final styles.css but with a few adjustments.

When I am working in design view the external css call is:
<link rel="stylesheet" href="design.css" type="text/css">

When previewing for exact view, the external css call is:
<link rel="stylesheet" href="styles.css" type="text/css">

It doesn't take long to learn the particular styles that need a vaue adjusting for the DW quirks and you will very quickly be able to switch between the two.

It works for me and in particular when populating and updating content that DW would otherwise stack like a pack of cards.