Greetings!
I have recently struck out into the land of Dreamweaver layers (after only ever using tables). I've positioned them all lovingly, everything looks fab and then i test it in a browser and find they are all over the page!!
i have looked everywhere in Dreamweaver to find out why this is happening, but it's got me stumped as everything looks fine in dreamweaver, it's only when i test it...
any help with this would really be appreciated...
thanks!

Lesson1 - do NOT use Dreamweaver only in WYSIWYG mode.
Lesson2 - do NOT position every single DIV (they are NOT 'layers' !)

Learn to code by hand and learn to use the normal document flow, it is your friend. DW will set EVERYTHING to position:absolute and that is just asking for trouble.

Can't help if we can't see the code.

Thanks for that, I'm starting to deal with the code but it's a daunting, daunting prospect.
Sorry, didn't know how much of the code you require, but here it is, all of it:

body {
margin-left: 5px;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 0px;
}
.projectsbox {
background-image: url(econorfolk_images/project_box_pic.jpg);
background-repeat: no-repeat;
}
#projectsbox {
position:absolute;
visibility:visible;
width:200px;
height:325px;
z-index:1;
left: 48px;
top: 200px;
}
#TravelLayer {
position:absolute;
visibility:visible;
width:200px;
height:328px;
z-index:2;
left: 299px;
top: 200px;
}
.travelbox {
background-image: url(econorfolk_images/travel_box_pic.jpg);
background-repeat: no-repeat;
position: absolute;
}
#NewsLayer {
position:absolute;
visibility:visible;
width:207px;
height:328;
z-index:3;
left: 554px;
top: 200px;
background-image: url(econorfolk_images/news_box_pic.jpg);
}
.newsbox {
background-repeat: no-repeat;
background-image: url(econorfolk_images/news_box_pic.jpg);
}
#ProjectsText {
position:absolute;
visibility:visible;
width:156px;
height:60px;
z-index:4;
left: 81px;
top: 438px;
font-family: "75 Helvetica Bold", "Arial Black", "B Helvetica Bold", "Bl Avenir Black";
font-size: 12px;
line-height: 15px;
color: #333333;
}
.smallboxtxt {
font-family: "75 Helvetica Bold", "Arial Black", "B Helvetica Bold", "Bl Avenir Black";
font-size: 12px;
line-height: 17px;
color: #333333;
position: absolute;
}
.construction {
font-family: "75 Helvetica Bold", "Arial Black", "B Helvetica Bold", "Bl Avenir Black";
font-size: 16px;
color: #333333;
}
#ProjectArrows {
position:absolute;
visibility:visible;
width:12px;
height:62px;
z-index:5;
left: 64px;
top: 438px;
}
.style1 {font-family: "75 Helvetica Bold", "Arial Black", "B Helvetica Bold", "Bl Avenir Black"; font-size: 12px; line-height: 15px; color: #575231; font-weight: bold; }
#TravelArrows {
position:absolute;
visibility:visible;
width:12;
height:62;
z-index:6;
left: 313px;
top: 424px;
}
.style3 {
font-family: "75 Helvetica Bold", "Arial Black", "B Helvetica Bold", "Bl Avenir Black";
font-size: 12px;
line-height: 15px;
color: #0B2C46;
font-weight: bold;
position: absolute;
}
#TravelText {
position:absolute;
visibility:visible;
width:156;
height:77px;
z-index:7;
left: 330px;
top: 424px;
overflow: auto;
font-family: "75 Helvetica Bold", "Arial Black", "B Helvetica Bold", "Bl Avenir Black";
font-size: 12px;
color: #333333;
}
#NewsArrows {
position:absolute;
visibility:visible;
width:12;
height:62;
z-index:8;
left: 569px;
top: 426;
}
#NewsText {
position:absolute;
visibility:visible;
width:156;
height:63px;
z-index:9;
left: 585px;
top: 424px;
overflow: visible;
}
.style5 {
font-family: "75 Helvetica Bold", "Arial Black", "B Helvetica Bold", "Bl Avenir Black";
font-size: 12px;
line-height: 15px;
color: #41582F;
font-weight: bold;
position: absolute;
}
#ProjectsMore {
position:absolute;
visibility:visible;
width:157px;
height:20px;
z-index:10;
left: 81px;
top: 502px;
}
.style6 {
color: #575231;
font-weight: bold;
}
#TravelMore {
position:absolute;
visibility:visible;
width:157;
height:20;
z-index:11;
left: 865px;
top: 539px;
font-family: "75 Helvetica Bold", "Arial Black", "B Helvetica Bold", "Bl Avenir Black";
font-size: 14px;
color: #0A3049;
font-weight: bold;
}
.style8 {
font-family: "75 Helvetica Bold", "Arial Black", "B Helvetica Bold", "Bl Avenir Black";
font-size: 12px;
line-height: 17px;
color: #11344D;
font-weight: bold;
}
#Layer1 {
position:absolute;
visibility:visible;
width:157;
height:20;
z-index:12;
left: 584px;
top: 501px;
}
.style9 {
color: #42642B;
font-weight: bold;
}
#construction {
position:absolute;
visibility:visible;
width:705px;
height:21px;
z-index:13;
left: 48px;
top: 540px;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>

<body>
<div class="smallboxtxt" id="ProjectsText"><strong>EcoFootprinting</strong> an island<br />
<strong>EcoVillage</strong></div>
<div id="TravelText">
<p>This section is under construction. </p>
<p align="right" class="style8">MORE &gt;&gt;</p>
</div>
<div class="style1" id="ProjectArrows">&gt;<br />
&gt;</div>
<table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="econorfolk_images/banner_index.jpg" width="800" height="150" /></td>
</tr>
<tr>
<td><img src="econorfolk_images/topmenu_index.jpg" width="800" height="25" /></td>
</tr>
<tr>
<td height="390" bgcolor="#C4E2B7"><div class="projectsbox" id="projectsbox"></div>
<div class="travelbox" id="TravelLayer"></div>
<div class="newsbox" id="NewsLayer"></div></td>
</tr>
<tr>
<td><img src="econorfolk_images/footer_index.jpg" width="800" height="45" /></td>
</tr>
</table>
<div class="construction" id="construction">
<div align="center">This site is under construction for more information click here. </div>
</div>
<div id="TravelMore">
<div align="right">MORE &gt;&gt; </div>
</div>
<div class="smallboxtxt" id="Layer1">
<div align="right" class="style9">MORE &gt;&gt; </div>
</div>
<div class="smallboxtxt" id="ProjectsMore">
<div align="right" class="style6">MORE &gt;&gt; </div>
</div>
<div class="smallboxtxt" id="NewsText">
<p><strong>BL3 </strong>&ndash; Licencee <br />
<strong>Closure </strong>of Headstone <br />
<strong>EcoNorfolk VS Admin</strong></p>
</div>
<div class="style3" id="TravelArrows"><span class="style3">&gt;<br />
</span></div>
<div id="NewsArrows"><span class="style5">&gt;<br />
&gt;<br />
&gt;</span></div>
</body>
</html>

I'll have to look at this in-depth when I have a bit more time, but here's a couple of tips;

Name your ID's with something that makes sense, lots of "layer1... layer12" is difficult to debug. Same goes with classes - style8, style9 isn't helpful, name the class so that it relates to it's purpose or function in some way.

You do need to try to do this w/o all the absolute positioning, they really can make things difficult if not done properly. You might want to read up on Float layouts: http://css-discuss.incutio.com/?page=FloatLayouts

You should also avoid things like <div align="right">, the alignment should be handled with CSS.

You can also dispense with Dreamweaver's old 'resize fix' script - it was for Netscape Navigator 4.0-- that browser is dead and buried and the new Netscape and Mozilla-based browsers no longer have that resize problem

Lol, tables and absolutely positioned divs, oh my.

Upgrade to DW CS3 and it will teach you how to do things right. IT even has different HTML templates that follow current "Web 2.0" standards.

Web 2.0 is not a 'standard', it's a phase and really isn't about gradients and reflections either.

DWCS3 ? Out of reach of the budgets of an awful lot of people !

Learn to code by hand and learn to use the normal document flow, it is your friend. DW will set EVERYTHING to position:absolute and that is just asking for trouble.

I don't know about this guy, but If I had to learn strictly by hand, I wouldn't be into web design at all. I mean, I understand that it makes things easier and you can periodically check your work, but I like to see what I am doing, and code bores me. I would not suggest using only DW however, but a combination of codeing and DW (ie. Split view) I started off this way and now I can do the straight coding fine, and clean up anything DW does wrong.

I can see what I'm doing ! I use TopStyle which has a built in preview and I can preview using IE or Mozilla. Every change I make in my CSS I can immediately see in my preview. DW8 (dunno about CS3) still uses an older version of the IE rendering engine for it's internal viewer and it will still get CSS wrong. I have DW8, but I need to be 100% sure that my code is right, so I don't use it a whole lot. At least in TopStyle I don't even have to open my external browsers to see if everything is rendered correctly, I can see it inside the application. For external previews, I can tell it to preview in whatever browsers I choose, just like DW does. TopStyle has syntax coloring and highlighting, it has code reference and HTML Tidy built right in.

I don't have time to spend cleaning up behind DW's bad implementation of code, I know it's exactly the way I want it from the get-go . I have code snippets and other such tools in TS too, so I'm by no means slow at coding.

DW is a good TOOL, but for someone who is learning I don't think it's the best way to start. Like anything, you need a solid foundation and you'll only get that by learning to hand-code. Once you can do that, then you can get full benefit from more advanced tools - like DW.

I didn't know topstyle was not a wysiwyg type application.. The way I learned was in no way comprehensive and I still learn things everyday. I basically just hit the view source button and tryed to recreate sites. I use DW and open my project in two browsers and cntrl+R to see if the site is the same all around. And I am not that fast.

TS is only WYSIWYG in the sense that you can see the results of your coding in real time. It doesn't DO anything FOR you, like DW can. In other words, you have to know what you're doing because it's doesn't hand-hold you. It will give you warnings when you goof up a CSS rule or an HTML tag, but other than that you're on your own.

I started like you-- doing view source on sites I liked to see how they did that -- I still do it, only now I look deeper at the CSS files - if there is one.

Hello,

I just updated from Macromedia DW 2004 to Adobe DW CS3 and now I have a problem seeing my layers display properly in the program. It's just showing them in random places when I try to edit the page. Everything still works and previews correctly when I load it to IE and Firefox and It has worked perfectly in previous versions of DW. Can anybody help me understand why this is happening? Should I revert to the older software?

Thank You

Steve

DW2004 had horrible rendering in it's internal 'browser', especially if you used CSS. CS3 has a much improved rendering and, while not perfect, is much closer to right.

Did you have everything absolutely positioned by any chance ??

Every layer has been "absolutely positioned." I reinstalled Macromedia Dreamweaver 8 and opened my website with that software and again, everything is perfect, as it was designed. It's only in DW CS3 that the layers are shown in other locations within the application. So to be clear, when I preview the site in question from DW CS3, it looks and works as it was designed in previous versions of DW, even though the CS3 application is showing the layers in different locations.

Every layer has been "absolutely positioned."

That is a HUGE problem and definitely not the way to lay out a site.
Without seeing the code, there's no way to know for sure what's going on.

Hi Lady,

You say that it is a "Huge Problem" but the fact of the matter is, these tools exist for a reason and are meant to be used. My site is built, works correctly, and has been for years now. The problem is the new CS3 application not displaying the code correctly. No offense, but your response is a bit of a cop-out.

To you maybe, but there are plenty of industry CSS gurus who would agree with me. Absolute positioning for everything simply isn't necessary and comes with a whole host of bugs when you're dealing with IE. I never said you CAN'T use them, I said it's not RECOMMENDED.

I don't have DW CS3 so I can't speak to what it is or isn't doing. I can tell you that my TopStyle Pro, which has always been better than DW at rendering CSS, shows no 'disaster'.

In looking at the code laid out, I can do your entire layout without all that absolute stuff.

Hi Lady et al,

I wanted to post to this thread because I too am having issues related to dreamweaver. I am using CS3 and sucessfully built a website. However, a colleague of mine sees the site a lot differently from his firefox browser on linux. To him, the divs look out of place and are overlapping. On my computer it looks fine and I tried 3 different browsers.

Here is the link, could someone take a look and tell me if they any issues.


Another question specific for Lady is what is the rule of thumb when to use absolute positioning and when not to.

Thanks

Use position:absolute only when you really have to - like to position a logo or other small elements. This preserves the normal document flow for the rest of your layout which is much easier to work with and allows you to have a fluid layout if you choose.

That URL doesn't work.

Sorry, here is the link:

http://home.comcast.net/~homerjay80/


Since I couldn't see any problems on my computer. I put the link thru browsershots to see what he was talking about. How is it that my site could be so off on other computers' browsers and ok on my browswer.

How was it designed ? Was it designed only for IE ? If so, then it WILL be 'off' for most other browsers, that's just the way it is. IE6 especially has SO many bugs it drives web designer nuts - until you learn to combat them and code so that you don't trigger them.

I'll have to look at the site from home.. the propeller heads in IT have the site blocked