Inconsistent layer position

aglang · September 14th, 2006, 02:51 AM

Just started web design with DW MX 2004.

Designed a simple page with two layers, problem is the position of the layers when viewed designing in DW is significantly different from their position in the resulting htm files.

ANy ideas appreciated, makes designing difficult if you do not know where your layers will end up!!

-Adam

Imar · September 15th, 2006, 07:26 AM

Hi Adam,

Can you post the code for the page?

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
Author of ASP.NET 2.0 Instant Results and Beginning Dreamweaver MX / MX 2004
While typing this post, I was listening to: Glass by Joy Division (Track 2 from the album: Heart And Soul (CD 1)) What's This?

aglang · September 19th, 2006, 12:59 PM

Sorry for the delay, was away ove weekend.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD><TITLE>Untitled Document</TITLE>
<META http-equiv=Content-Type content="text/html; charset=big5">
<SCRIPT language=JavaScript type=text/JavaScript>

</SCRIPT>

<STYLE type=text/css>.style2 {
    COLOR: #6d7e90; FONT-FAMILY: Arial, Helvetica, sans-serif
}
.style6 {
    FONT-FAMILY: Arial, Helvetica, sans-serif
}
A:visited {
    COLOR: #009999; TEXT-DECORATION: none
}
A:active {
    COLOR: #009966; TEXT-DECORATION: none
}
A:hover {
    COLOR: #660000; TEXT-DECORATION: none
}
A:link {
    COLOR: #006666; TEXT-DECORATION: none
}
.style7 {
    FONT-SIZE: 18px
}
</STYLE>

<META content="MSHTML 6.00.2800.1561" name=GENERATOR></HEAD>
<BODY bgColor=#ffffff leftMargin=0 topMargin=0 marginheight="0" marginwidth="0">
<TABLE cellSpacing=4 cellPadding=4 width="74%" align=center border=0>
  <TBODY>
  <TR>
    <TD vAlign=bottom align=right width="33%" height=533>
      <DIV align=center>
      <DIV id=Layer2
      style="Z-INDEX: 2; LEFT: 531px; VISIBILITY: inherit; WIDTH: 201px; POSITION: absolute; TOP: 171px; HEIGHT: 132px">
      <P><A href="http://www.zelephands.com/zelephands_website_4.htm"><IMG
      height=133 src="test_files/web_design_4_200.jpeg" width=200
      border=0></A></P></DIV>
      <DIV id=Layer1
      style="Z-INDEX: 1; LEFT: 311px; WIDTH: 160px; POSITION: absolute; TOP: 128px; HEIGHT: 216px">
      <P class=style6><A
      href="http://www.zelephands.com/zelephands_website_3.htm"><IMG height=217
      src="test_files/web_design_3_200.jpeg" width=158
      border=0></A></P></DIV><IMG height=525
      src="test_files/web_design_2a_700.jpeg" width=700></DIV></TD></TR>
  <TR>
    <TD vAlign=bottom align=right height=31>
      <DIV class="style6 style7" align=center><A
      href="http://www.zelephands.com/index.htm"><STRONG>Home</STRONG></A></DIV></TD></TR></TBODY></TABLE></BODY></HTML>

TIA
Adam

Imar · September 19th, 2006, 02:34 PM

Hi Adam,

This code features a number of out dated tags and an incorrect doc type. This way, there's a fair chance the document looks different in different browsers and editors.

First, fix the doc type to something like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

Then remove the attributes from the <body> tag and replace them with the following CSS:

body
{
  margin: 0;
  background-color: #ffffff;
}

This should make a difference. But I haven't tested your code yet, so I don't know if it will fix all of your problems.

You could take a look at Beginning CSS by Richard York. This book deals with CSS and cross browser issues extensively.
http://www.wrox.com/WileyCDA/WroxTit...764576429.html

HtH,

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
Author of ASP.NET 2.0 Instant Results and Beginning Dreamweaver MX / MX 2004
Want to be my colleague? Then check out this post.