Dreamweaver interface is all messed up

Question

I don't know how it became like this. it has seemed to just
degrade more and more today. I am a noob to dreamweaver, though
learned a whole lot about CSS today. The graphical interface in
dreamweaver is out of place with images, margins/paddings all out
of place. But when I view it in a browser such as firefox, it is
perfect--it appears just as the code is supposed to. I don't know
how to attach a pic, so I'll upload some to imageshack.
Messed
up dreamweaver
Accurate
firefox

Answer 1

Where did this layout come from?
Anyhow, your original image is a good example of how DMX2004
falls down with
CSS layouts. I'm afraid to get a good Design view of this
markup, you will
have to be using DW8.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"dcarmor" <[email protected]> wrote in
message
news:[email protected]...
> thanks for bearing with me.
>
> there is some CSS in there that isn't being used in the
html file i
> attached
> because I've continued to work on it...it appears fine
in the browsers so
> I
> figured it wouldn't matter even if I can't fix the
graphical issues in
> dreamweaver.
>
> html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form,
fieldset {
> margin: 0;
> padding: 0;
> border: 0;
> }
>
> body {
> font-family: Arial, Helvetica, sans-serif;
> font-size: 100.01%;
> background-color:#FFF;
> color: #666666;
> text-align: center;
> }
>
> #wrapper {
> width: 770px;
> background-color:#D1EBEE;
> margin:10px auto;
> text-align:left;
> border: 1px solid #000;
> }
>
> #banner {
> height: 200px;
> background-image: url(../images/stick.png);
> background-repeat: no-repeat;
> }
>
>
> #leftcol #nav ul {
> background-image:url(../images/ButtonBar.gif);
> list-style-type: none;
> margin: 0;
> padding: 0;
> font-size: 80%;
> border: 0px solid #000000;/*this adds a second line to
the bottom of the
> nav,
> if you prefer a single line you can remove it by
uncommenting the other
> properties and commenting out this one. I think it gives
a nice raised
> effect,
> the choice is your's :)*/
> /*border-left: 1px solid #000000;
> border-right: 1px solid #000000;
> border-top: 1px solid #000000;*/
> }
>
>
>
> #leftcol #nav ul li {
> padding: 3px 0 3px 10px;
> margin: 0;
> }
>
> #leftcol #nav ul li a{
> background-image:url(../images/Button_up.gif);
> background-repeat:no-repeat;
> color: #000000;
> display: block;
> padding: 4px 0 6px 4px;
> text-decoration: none;
> height: 1%;
> }
>
>
> #leftcol #nav a:hover, #leftcol #nav a:focus {
> background-image:url(../images/Button_down.gif);
> background-repeat:no-repeat;
> color: #FFF;
> }
>
> #leftcol a{
> text-indent: 10%;
> font-size: 100%;
> color: FFF;
> }
>
> #content{
> margin-left: 180px;
> width: 570px;
> }
>
> #content p{
> font-size: 80%;
> margin: 20px;
> color:#232323;
> position: relative;
> }
>
> #content h1{
> font-size: 160%;
> color:#003366;
> padding: 0;
> margin: 15px 20px 0 20px;
> }
>
> #content h2{
> font-size: 110%;
> color:#990000;
> padding: 0;
> margin: /*100px 0 0*/ 20px;
> }
>
> .leftimage{
> float: left;
> margin-right: 10px;
> border: 1px solid #000000;
> }
>
> .rightimage{
> margin-bottom: 20px;
> float: right;
> margin-left: 15px;
> border: 1px solid #000000;
> width: 150px;
> }
>
> /*.clearit{
> clear: both;
> background-color:#00FF66;
> width: 200px;
> }*/
>
>
> #footer{
> border-top: 1px solid #000000;
> background-color: #003366;
> color: #FFFFFF;
> clear: both;
> }
>
> #footer p {
> font-size: 70%;
> padding: 3px;
> }
>
> #leftcol{
> margin-left: 0px;
> margin-top: 0px;
> width: 170px;
> margin-bottom: 20px;
> float: left;
> }
>
> #content p.right{
> float: right;
> }
>
> .container{
> width: 99%;
> float:right;
> }
>
> .container1{
> margin:10px 0 10px 0;
> width: 99%;
> float:right;
> background-color:#6E6E6E;
> border: 1px solid #000;
> height: auto;
> }
>
> #navTop {
> border: 1px solid #000;
> margin: 10px 0 0 0;
> font-size: 100%;
> font: Arial, Helvetica, sans-serif;
> color: #000;
> text-decoration: none;
> background: #999999;
> width: 570px;
> }
>
> #content #navTop a{
> font-size: 100%;
> color:#333333;
> text-decoration: none;
> padding: 0 18px 0 18px;
> }
>
> #content #navTop a:hover{
> font-size: 100%;
> color:#FFF;
> text-decoration: none;
> }
>