Skip navigation
D M Vance
D M Vance Calculating status...
Currently Being Moderated

Template content shifting slightly from page to page?

Sep 19, 2012 1:24 PM

Hi folks,

I am using Dreamweaver MX (yeah, I know) on OSX 10.6.8 and I am having problems with the navigation content in templates shifting slightly left and right between nearly identically created pages. 

 

See example at http://www.darrylvance.com/design_print.html and notice the shift when going from the sub-pages (which are in one position) back to the print, motion, other, etc. pages.

 

The top tier pages were created using one template (for the navigation) and the Print sub-pages were created using a new template which is identical to the first one, except there is the navigation links added below.

 

Another example is at http://www.darrylvance.com/art_painting.html where the same template was used for ALL the pages, but the Other and About pages have a similar horizontal shift as in the first example.

 

I am assuming the different widths of the various pages content is causing these particular shifts, which are never noticable in DW but appear when in the browser.  I have rebuilt and rebuilt the offenders from identical correct pages and changed the widths of the content, but I'm still getting the same problem.  

 

I'd guess there is some kind of anomaly in the table settings, but for the life of me I can't find it. 

 

Thanks for your help.

DV

454 Views   5 Replies   Latest reply: D M Vance, Sep 19, 2012 4:57 PM
 
Replies
  • John Waller
    Currently Being Moderated
    1. John Waller,
    Sep 19, 2012 1:47 PM   in reply to D M Vance
    Report

    Try adding the following to your CSS for all pages:

     

    html {

    overflow-y: scroll;

    }

     

    See:

    http://haslayout.net/css-tuts/Fixing-Page-Shift-Problem

    http://forums.adobe.com/message/4260584

     
    |
    Mark as:
  • bregent
    Currently Being Moderated
    2. bregent,
    Sep 19, 2012 2:21 PM   in reply to D M Vance
    Report

    >I am assuming the different widths of the various

    >pages content is causing these particular shifts,

     

    It the varying length, not width. Longer pages force scroll bars to appear. John has the right solution.

     
    |
    Mark as:
  • D M Vance
    Currently Being Moderated
    3. D M Vance,
    Sep 19, 2012 2:34 PM   in reply to John Waller
    Report

    Thanks, John.  However, I can't figure out where to insert the code on the pages.  The tutorial you referenced is using a CSS style, but I am not (as far as I can tell), and frankly am not experienced enough with CSS to understand where it might go, if at all, on my pages.

     

    Do I edit the code on the templates and then let DW update the pages, or edit all the pages in the editable area of the code on each page.

     

    Here is the code from the template:

     

    <html>

    <head>

    <!-- TemplateBeginEditable name="doctitle" -->

    <title>DARRYL VANCE | design: print</title>

    <!-- TemplateEndEditable -->

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <link href="../2011%20darrylvance.com/noline.css" rel="stylesheet" type="text/css">

    <script language="JavaScript" 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>

    <!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->

    </head>

    <body bgcolor="ececec" background="../darrylvance.com/images/bg.jpg" text="#333333" link="#996600" vlink="#666666" alink="ececec" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

    <table width="24%" height="56" border="0" align="center" cellpadding="0" cellspacing="0">

      <tr>

        <td width="134" height="12" valign="top"></td>

        <td width="129" height="12" valign="top"></td>

        <td width="170" height="12" valign="top"></td>

        <td width="106" height="12" valign="top"></td>

        <td width="94" height="12" valign="top"></td>

        <td width="120" height="12" valign="top"></td>

        <td width="125" height="12" valign="top"></td>

        <td width="130" height="12" valign="top"></td>

        <td width="110" height="12" valign="top"></td> ....

     

    thanks,

    DV

     
    |
    Mark as:
  • John Waller
    Currently Being Moderated
    4. John Waller,
    Sep 19, 2012 4:02 PM   in reply to D M Vance
    Report

    D M Vance wrote:

     

    The tutorial you referenced is using a CSS style, but I am not (as far as I can tell)

    No, you're not. Time to start. Makes maintaining your site far easier.

     

    The CSS file linked in the head of your template contains HTML code so it serves no purpose.

     

    In your Template, change

     

    <link href="../2011%20darrylvance.com/noline.css" rel="stylesheet" type="text/css">

    .

    to

     

    <link href="/noline.css" rel="stylesheet" type="text/css">

     

    Save the template and update all child pages.

     

    Create a new blank text only file named noline.css and insert:

     

    html {

    overflow-y: scroll;

    }

     

    Save inline.css in the top directory of your website and upload it to the server. ##

     
    |
    Mark as:
  • D M Vance
    Currently Being Moderated
    5. D M Vance,
    Sep 19, 2012 4:57 PM   in reply to John Waller
    Report

    John, THANK YOU!  This saved my biscuits.

     

    I will go back in and re-make the site using CSS, but for now this was the fix I was hoping for.

     

    Thanks again,

    DV

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points