Inserting image in MainContent lower at some point causing shift

Hello and thank you in advance for your help.

I'm working on a webpage using the fixed CS3 Design 2 columns, bar left side, header and footer layout, and I insert an image in the maincontent div. when I do that, throughout the site move when displayed in a web browser. This change is not big, but it's notable because the logo in the header is located in the same place through all other navigations of page moves to the left when this page is loaded.

Additional notes:

(1) this change occurs only when the image is inserted fairly low on the page, arrives first for ie, firefox, chrome and then back down to the page for safari

(2) I stuck in two pages of code, with moving and the other that behaves like all other pages

(3) Note that the passage would happen in all pages that an image is displayed, it is not a problem unique to the first page of code given.

PAGE WITH THE SHIFT:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css"> 
<!-- 
body  {
     font: 100% Verdana, Arial, Helvetica, sans-serif;
     background: #000000;
     margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
     padding: 0;
     text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
     color: #000000;
}
.twoColFixLtHdr #container {
     width: 1004px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
     background: #FFFFFF;
     margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
     border: 1px solid #000000;
     text-align: left; /* this overrides the text-align: center on the body element. */
} 
.twoColFixLtHdr #header {
     background: #DDDDDD;
     padding: 0 10px 0 0px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
     background-color: #000000;
} 
.twoColFixLtHdr #header h1 {
     margin: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
     color: #000000;
}
.twoColFixLtHdr #sidebar1 {
     float: left; /* since this element is floated, a width must be given */
     width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
     background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
     padding: 0px 5px 15px 5px;
     background-color: #666666;
}
.twoColFixLtHdr #mainContent {
     padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
     margin: 0 0 0 250px;
} 
.twoColFixLtHdr #footer {
     padding: 0 10px 0 0px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
     background:#DDDDDD;
     background-color: #000000;
} 
.twoColFixLtHdr #footer p {
     margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
     padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
     float: right;
     margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
     float: left;
     margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
     clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
--> 
</style><!--[if IE 5]>
<style type="text/css"> 
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixLtHdr #sidebar1 { width: 230px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixLtHdr #sidebar1 { padding-top: 30px; }
.twoColFixLtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]--></head>

<body class="twoColFixLtHdr">

<div id="container">
  <div id="header">
    <h1><a href="index.html"><img src="Images/CAG_Logo_letters_redder.gif" alt="Home" width="241" height="115" border="0" /></a></h1>
  <!-- end #header --></div>
  <div id="sidebar1">
    <h3><img src="Images/exhibit_flyer.jpg" alt="IStorm" width="200" height="301" />
    <!-- end #sidebar1 --></h3>
  </div>
  <div id="mainContent">
    <h1><font face="BernhardMod BT">The &quot;I&quot; of the Storm</font></h1>
    <p><font face="Futura Lt BT">The &quot;I&quot; of the Storm features the work of eleven artists striving to capture the elusive creative spirit...</font></p>
    <p><font face="Futura Lt BT">Featured Artists:<br />
    J.D. Biggs</font><br />
      <font face="Futura Lt BT">Cole Carothers<br />
    Tarrence Corbin<br />
      Voss Finn<br />
    Jason Franz<br />
      Brian Joiner</font><font face="Futura Lt BT"><br />
      Kevin Muente<br />
      Leslie Shiels<br />
      Greg Storer<br />
      Heather Stormer<br />
    Dana Tindall</font></p>
    <p><font face="Futura Lt BT">-Collector's Art Group: For the Artist's Touch-</font></p>
    <table width="500" border="0" cellspacing="5">
      <tr>
        <td><img src="Images/Art_Restoration_inprog.jpg" alt="Exhibit1" width="200" height="301" /></td>
        <td><p><font face="Futura Lt BT">10 x 12 </font></p>
        <p><font face="Futura Lt BT">Oil on Canvas</font></p></td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
      </tr>
    </table>
    <p><br />
    </p>
    <p><font face="BernhardMod BT"></font></p>
  <!-- end #mainContent --></div>
     <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
  <div id="footer">
    <p><font color="#990000" size="2" face="BernhardMod BT">Copyright    ©  2009, Collector's Art Group. All Rights Reserved</font></p>
  <!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

PAGE WITHOUT THE SHIFT:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css"> 
<!-- 
body  {
     font: 100% Verdana, Arial, Helvetica, sans-serif;
     background: #000000;
     margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
     padding: 0;
     text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
     color: #000000;
}
.twoColFixLtHdr #container {
     width: 1004px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
     background: #FFFFFF;
     margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
     border: 1px solid #000000;
     text-align: left; /* this overrides the text-align: center on the body element. */
} 
.twoColFixLtHdr #header {
     background: #DDDDDD;
     padding: 0 10px 0 0px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
     background-color: #000000;
} 
.twoColFixLtHdr #header h1 {
     margin: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
     color: #000000;
}
.twoColFixLtHdr #sidebar1 {
     float: left; /* since this element is floated, a width must be given */
     width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
     background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
     padding: 0px 5px 15px 5px;
     background-color: #666666;
}
.twoColFixLtHdr #mainContent {
     padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
     margin: 0 0 0 250px;
} 
.twoColFixLtHdr #footer {
     padding: 0 10px 0 0px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
     background:#DDDDDD;
     background-color: #000000;
} 
.twoColFixLtHdr #footer p {
     margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
     padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
     float: right;
     margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
     float: left;
     margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
     clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
--> 
</style><!--[if IE 5]>
<style type="text/css"> 
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixLtHdr #sidebar1 { width: 230px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixLtHdr #sidebar1 { padding-top: 30px; }
.twoColFixLtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]--></head>

<body class="twoColFixLtHdr">

<div id="container">
  <div id="header">
    <h1><a href="index.html"><img src="Images/CAG_Logo_letters_redder.gif" alt="Home" width="241" height="115" border="0" /></a></h1>
  <!-- end #header --></div>
  <div id="sidebar1">
    <h3><img src="Images/Consultation.jpg" alt="Consultation" width="200" height="301" /></h3>
  <!-- end #sidebar1 --></div>
  <div id="mainContent">
    <h1><font face="BernhardMod BT">Unique Framing Solutions</font></h1>
    <p>
      <!-- end #mainContent -->
    </p>
  </div>
     <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
  <div id="footer">
    <p><font color="#990000" size="2" face="BernhardMod BT">Copyright © 2009, Collector's Art Group.   All Rights Reserved</font></p>
  <!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

Thank you again, I have tried to solve this problem for two days and have not yet found the solution.

Concerning

I don't have timte keep two page DW codes, so I don't have access to the real images, so that would not work in any case. This is why it is recommended that a live version of the pages is available for viewing - download the pages and provide that a link is the best way to get support for this type of problem.

Just guessing here in this case:

Is one longer than the other pages... (I ask because you're talking about when you add the image further down on the page). change occur when passing from one short page to a longer page and vice versa?

If so, add this rule to your style sheet (or the head of the doc with other style rules)

html {
overflow-y:scroll; }

He takes care of the page jump (offset) by forcing all pages have a 'gutter' where the vertical scroll bar would be, even if they do not need a vertical scroll bar.

Nadia

Adobe® Expert community: Dreamweaver

Unique templates CSS | Tutorials | SEO articles

http://www.DreamweaverResources.com

http://csstemplates.com.au/

--------------------------------------------------

http://Twitter.com/nadiap

Tags: Dreamweaver

Inserting image in MainContent lower at some point causing shift

Similar Questions

Maybe you are looking for