7 Replies Latest reply on Feb 15, 2010 3:35 PM by paulCA1

    Layout weirdness, div width (I think?)

    paulCA1

      Straight off, I apologize if the fix for my question is in the faq or something - I did a good look around, but my main problem is I don't exactly know what I'm looking for.

       

      I am working on building myself a new site based off a template that a friend built for me. I'm not too well versed in html or css so I do a fair bit of work in the layout mode, then finesse the html if it doesn't look right, based on what I can find on the web.

       

      This problem doesn't affect how my site looks in preview in firefox - it's more just something that bothers me, as I'm weird like that.

       

      In the first attached file, noProblem, this is how all of my pages look in preview mode, except one. Which is the attached file problem. As seen in the images, the layout mode for the problem screenshot stretches across the whole work area. I have no idea how to change this, so that everything is centered as in the noProblem screenshot.

       

      Any help would be greatly appreciated. If more explanation is needed, please let me know.

       

      Thanks very much.

        • 1. Re: Layout weirdness, div width (I think?)
          Nancy OShea Adobe Community Professional & MVP

          Sorry, but screenshots don't tell the whole story.

           

          How To get Help Quickly
          http://forums.adobe.com/thread/470404

           

          Posting Code in the DW Forum
          http://forums.adobe.com/thread/427712

           

          Validation tools:  (check your code, and fix any reported errors)

           

          HTML  Validator - http://validator.w3.org 

          CSS Validator - http://jigsaw.w3.org/css-validator/

           

           

          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media   Specialists
          www.alt-web.com/
          www.twitter.com/altweb
          www.alt-web.blogspot.com

          • 2. Re: Layout weirdness, div width (I think?)
            paulCA1 Level 1

            Sorry about that - I've copied in code from both pages below. The first section is the code for the page where everything displays fine - the second, the problem page. Again, these are just bothering me in layout mode, they display fine on the web (at least when I preview, haven't uploaded anything yet). It's just driving me nuts that I can't fix it.

             

            Thanks again.

             

            <html><!-- InstanceBegin template="/Templates/Standard.dwt" codeOutsideHTMLIsLocked="false" -->
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
            <!-- InstanceBeginEditable name="doctitle" -->
            <title>cimagery - contact</title>
            <!-- InstanceEndEditable -->
            <!-- InstanceBeginEditable name="head" -->
            
            
            
            
            <script type="text/JavaScript">
            <!--
            function MM_swapImgRestore() { //v3.0
              var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
            }
            
            function MM_preloadImages() { //v3.0
              var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
                var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
                if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
            }
            
            function MM_findObj(n, d) { //v4.01
              var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
                d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
              if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
              for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
              if(!x && d.getElementById) x=d.getElementById(n); return x;
            }
            
            function MM_swapImage() { //v3.0
              var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
               if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
            }
            //-->
            </script>
            
            
            <link href="file:///C|/Documents and Settings/Administrator/My Documents/My Designs/Paul 1.0/style.css" rel="stylesheet" type="text/css">
            <style type="text/css">
            <!--
            .style5 {
                 font-size: x-small;
                 color: #666666;
            }
            .style6 {font-family: "Myriad Pro"}
            a:link {
                 color: #000000;
                 text-decoration: none;
            }
            a:visited {
                 text-decoration: none;
            }
            a:hover {
                 text-decoration: none;
            }
            a:active {
                 text-decoration: none;
            }
            -->
            </style>
            <!-- InstanceEndEditable -->
            <script type="text/JavaScript">
            <!--
            function MM_swapImgRestore() { //v3.0
              var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
            }
            
            function MM_preloadImages() { //v3.0
              var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
                var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
                if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
            }
            
            function MM_findObj(n, d) { //v4.01
              var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
                d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
              if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
              for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
              if(!x && d.getElementById) x=d.getElementById(n); return x;
            }
            
            function MM_swapImage() { //v3.0
              var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
               if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
            }
            //-->
            </script>
            <style type="text/css">
            html {overflow-y: scroll;}
            <!--
            .style5 {     font-size: x-small;
                 color: #666666;
            }
            #Layer1 {
                 position:absolute;
                 width:200px;
                 height:115px;
                 z-index:1;
                 left: 313px;
                 top: 15px;
            }
            -->
            </style>
            </head>
            
            <body>
            <table border="0" align="center" cellpadding="0" cellspacing="0">
              <tr>
                <td width="100" height="100" rowspan="2"><div style="position: relative; left: 0px; top: 0px; width:150px;"><img src="img/logo1.gif" width="255" height="140"></div> </td>
            <!--    <td width="100" height="100" rowspan="2"><img src="../img/logospace.jpg" width="150" height="150"></td>-->
                <td height="125" valign="bottom"><img src="img/title1.jpg" width="760" height="75"></td>
              </tr>
              <tr>
                <td height="30" align="center" valign="top"><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Home','','img/but_home_in.jpg',0)"><img src="img/but_home.jpg" name="Home" width="65" height="25" border="0"></a><img src="img/but_divider.jpg" width="40" height="25"><a href="gallery/gallery.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Portfolio','','img/but_portfolio_in.jpg',0)"><img src="img/but_portfolio.jpg" name="Portfolio" width="113" height="25" border="0"></a><img src="img/but_divider.jpg" width="40" height="25"><a href="http://charettephoto.blogspot.com/" target="_blank" onMouseOver="MM_swapImage('Blog','','img/but_blog_in.jpg',0)" onMouseOut="MM_swapImgRestore()"><img src="img/but_blog.jpg" name="Blog" width="59" height="25" border="0"></a><img src="img/but_divider.jpg" width="40" height="25"><a href="about.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('About','','img/but_about_in.jpg',0)"><img src="img/but_about.jpg" name="About" width="74" height="25" border="0"></a><img src="img/but_divider.jpg" width="40" height="25"><a href="contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Contact','','img/but_contact_in.jpg',0)"><img src="img/but_contact.jpg" name="Contact" width="97" height="25" border="0"></a></td>
              </tr>
              
              <tr>
                <td colspan="2"><table width="100%%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td><table width="100%" align="center" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td width="2" height="2" background="img/table_corner_nw.jpg"></td>
                        <td background="img/table.jpg"></td>
                        <td width="2" height="2" background="img/table_corner_ne.jpg"></td>
                      </tr>
                      <tr>
                       
                         
                       
                           <td background="img/table.jpg"></td>
                        <td><table width="100%" border="0" cellpadding="6" cellspacing="0">
                          <tr>
                            <td colspan="3"><!-- InstanceBeginEditable name="Body" -->
                              <div align="center">
                                <p> </p>
                                <p> </p>
                                <p> </p>
                                <p class="style6"> </p>
                                <p class="style6"> </p>
                                <p class="style6"> </p>
                                <p class="style6">paul   charette</p>
                                <p class="style6"><a href="mailto:paul@cimagery.ca">paul@cimagery.ca</a></p>
                                <p> </p>
                                <p> </p>
                                <p class="style6"> Want to  collaborate? Contact me.  </p>
                                <p> </p>
                                <p><br>
                                    <br>
                                      <br>
                                </p>
                                <p> </p>
                                <p> </p>
                                <p> </p>
                                <p><img src="img/ContactSpacer.jpg" width="905" height="12"></p>
                              </div>
                              <script language=JavaScript>
            <!--
            
            //Disable right click script III- By Renigade (renigade@mediaone.net)
            //For full source code, visit http://www.dynamicdrive.com
            
            var message="";
            /////////////////////////////////// remove comment tags from next line to turn back on no-right click
            <!--function clickIE() {if (document.all) {(message);return false;}}-->
            function clickNS(e) {if 
            (document.layers||(document.getElementById&&!document.all)) {
            if (e.which==2||e.which==3) {(message);return false;}}}
            if (document.layers) 
            {document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
            else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
            
            document.oncontextmenu=new Function("return false")
            // --> 
                                </script>
                                <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
            </script>
                              <script type="text/javascript">
            _uacct = "UA-2364797-2";
            urchinTracker();
            </script>
            <!-- End Google Analytics -->
            <!-- InstanceEndEditable --></td>
                            </tr>
                      
                            
                             
                        </table></td>
                        <td background="img/table.jpg"></td>
                      </tr>
                      <tr>
                        <td width="2" height="2" background="img/table_corner_sw.jpg"></td>
                        <td background="img/table.jpg"></td>
                        <td width="2" height="2" background="img/table_corner_se.jpg"></td>
                      </tr>
                    </table></td>
                  </tr>
            
                </table></td>
              </tr>
            </table>
            <table border="0" align="center">
              <tr>
                <td width="600" height="28"><div align="center">
                  <p class="copyright style5"><br>
                    &copy; C.Imagery 2009. All rights reserved.<br>
                    Website design: Andrew Ross</p>
                </div></td>
              </tr>
            </table>
            </body>
            <!-- InstanceEnd --></html>
            
            

             

            <html><!-- InstanceBegin template="/Templates/Standard.dwt" codeOutsideHTMLIsLocked="false" -->
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
            <!-- InstanceBeginEditable name="doctitle" -->
            <title>c.imagery - About</title>
            <!-- InstanceEndEditable -->
            <!-- InstanceBeginEditable name="head" -->
            
            
            
            
            <script type="text/JavaScript">
            <!--
            function MM_swapImgRestore() { //v3.0
              var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
            }
            
            function MM_preloadImages() { //v3.0
              var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
                var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
                if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
            }
            
            function MM_findObj(n, d) { //v4.01
              var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
                d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
              if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
              for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
              if(!x && d.getElementById) x=d.getElementById(n); return x;
            }
            
            function MM_swapImage() { //v3.0
              var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
               if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
            }
            //-->
            </script>
            
            
            <link href="file:///C|/Documents and Settings/Administrator/My Documents/My Designs/Paul 1.0/style.css" rel="stylesheet" type="text/css">
            <style type="text/css">
            <!--
            .style5 {
                 font-size: x-small;
                 color: #666666;
            }
            .style6 {font-family: "Myriad Pro"}
            -->
            </style>
            <!-- InstanceEndEditable -->
            <script type="text/JavaScript">
            <!--
            function MM_swapImgRestore() { //v3.0
              var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
            }
            
            function MM_preloadImages() { //v3.0
              var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
                var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
                if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
            }
            
            function MM_findObj(n, d) { //v4.01
              var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
                d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
              if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
              for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
              if(!x && d.getElementById) x=d.getElementById(n); return x;
            }
            
            function MM_swapImage() { //v3.0
              var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
               if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
            }
            //-->
            </script>
            <style type="text/css">
            html {overflow-y: scroll;}
            <!--
            .style5 {     font-size: x-small;
                 color: #666666;
            }
            #Layer1 {
                 position:absolute;
                 width:200px;
                 height:115px;
                 z-index:1;
                 left: 313px;
                 top: 15px;
            }
            -->
            </style>
            </head>
            
            <body>
            <table border="0" align="center" cellpadding="0" cellspacing="0">
              <tr>
                <td width="100" height="100" rowspan="2"><div style="position: relative; left: 0px; top: 0px; width:150px;"><img src="img/logo1.gif" width="255" height="140"></div> </td>
            <!--    <td width="100" height="100" rowspan="2"><img src="../img/logospace.jpg" width="150" height="150"></td>-->
                <td height="125" valign="bottom"><img src="img/title1.jpg" width="760" height="75"></td>
              </tr>
              <tr>
                <td height="30" align="center" valign="top"><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Home','','img/but_home_in.jpg',0)"><img src="img/but_home.jpg" name="Home" width="65" height="25" border="0"></a><img src="img/but_divider.jpg" width="40" height="25"><a href="gallery/gallery.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Portfolio','','img/but_portfolio_in.jpg',0)"><img src="img/but_portfolio.jpg" name="Portfolio" width="113" height="25" border="0"></a><img src="img/but_divider.jpg" width="40" height="25"><a href="http://charettephoto.blogspot.com/" target="_blank" onMouseOver="MM_swapImage('Blog','','img/but_blog_in.jpg',0)" onMouseOut="MM_swapImgRestore()"><img src="img/but_blog.jpg" name="Blog" width="59" height="25" border="0"></a><img src="img/but_divider.jpg" width="40" height="25"><a href="about.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('About','','img/but_about_in.jpg',0)"><img src="img/but_about.jpg" name="About" width="74" height="25" border="0"></a><img src="img/but_divider.jpg" width="40" height="25"><a href="contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Contact','','img/but_contact_in.jpg',0)"><img src="img/but_contact.jpg" name="Contact" width="97" height="25" border="0"></a></td>
              </tr>
              
              <tr>
                <td colspan="2"><table width="100%%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td><table width="100%" align="center" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td width="2" height="2" background="img/table_corner_nw.jpg"></td>
                        <td background="img/table.jpg"></td>
                        <td width="2" height="2" background="img/table_corner_ne.jpg"></td>
                      </tr>
                      <tr>
                       
                         
                       
                           <td background="img/table.jpg"></td>
                        <td><table width="100%" border="0" cellpadding="6" cellspacing="0">
                          <tr>
                            <td colspan="3"><!-- InstanceBeginEditable name="Body" -->
                              <div align="center">
                                     <table width="905" height="614" border="0" cellpadding="6">
                                  <tr>
                                    <td><p class="style6"> </p>
                                      <p class="style6"> </p>
                                      <p class="style6"> </p>
                                      <p class="style6">Create. Because I enjoy the feeling of creating; of creating something; of creating a record of a moment in time that wouldn't have existed otherwise. I like the fact that what I record and create will be distinct from what anyone else in the world will create, even if they are standing beside me and click their shutter at the exact instant as me. I like to create.</p>
                                      <p class="style6"> </p>
                                      <p class="style6">Community. I've learned so much in the past from those who so generously share through various social media outlets. Anyone who shares on the web or anywhere else continues to inspire. Chase Jarvis, one of those who shares so much with the photography community, has the mantra Create - Share - Sustain. I hope to be able to add some value to the community<img src="img/me.jpg" alt="Me" width="360" height="277" hspace="20" vspace="20" align="left"> through photography and through this process. </p>
                                      <p class="style6"> </p>
                                      <p class="style6"> Colloborate. I like to collaborate; to collaborate with you. Let's collaborate, create, and make awesome imagery. </p>
                                      <p class="style6"> </p>
                                      <p class="style6"> </p>
                                      <p class="style6"> </p>
                                      <p class="style6"> </p>
                                      <p class="style6"> </p>
                                      <p class="style6"><br>
                                      </p></td>
                                    <td width="50" valign="top"><p><img src="img/twitter.png" alt="Cimagery on Twitter" width="50" height="50" vspace="0" align="top"></p>
                                      <p><img src="img/facebook.png" alt="Cimagery on Facebook" width="50" height="50" align="top"></p>
                                      <p><img src="img/imagekindButton.png" alt="Cimagery on Imagekind" width="50" height="50" align="top"></p></td>
                                  </tr>
                                </table>
                                     <p><img src="img/ContactSpacer.jpg" width="905" height="8"></p>
                                     </div>
                              <script language=JavaScript>
            <!--
            
            //Disable right click script III- By Renigade (renigade@mediaone.net)
            //For full source code, visit http://www.dynamicdrive.com
            
            var message="";
            /////////////////////////////////// remove comment tags from line below to turn back on no right click
            <!--function clickIE() {if (document.all) {(message);return false;}}-->
            function clickNS(e) {if 
            (document.layers||(document.getElementById&&!document.all)) {
            if (e.which==2||e.which==3) {(message);return false;}}}
            if (document.layers) 
            {document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
            else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
            
            document.oncontextmenu=new Function("return false")
            // --> 
                                </script>
                                <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
            </script>
                              <script type="text/javascript">
            _uacct = "UA-2364797-2";
            urchinTracker();
            </script>
            <!-- End Google Analytics -->
            <!-- InstanceEndEditable --></td>
                            </tr>
                      
                            
                             
                        </table></td>
                        <td background="img/table.jpg"></td>
                      </tr>
                      <tr>
                        <td width="2" height="2" background="img/table_corner_sw.jpg"></td>
                        <td background="img/table.jpg"></td>
                        <td width="2" height="2" background="img/table_corner_se.jpg"></td>
                      </tr>
                    </table></td>
                  </tr>
            
                </table></td>
              </tr>
            </table>
            <table border="0" align="center">
              <tr>
                <td width="600" height="28"><div align="center">
                  <p class="copyright style5"><br>
                    &copy; C.Imagery 2009. All rights reserved.<br>
                    Website design: Andrew Ross</p>
                </div></td>
              </tr>
            </table>
            </body>
            <!-- InstanceEnd --></html>
            
            
            • 3. Re: Layout weirdness, div width (I think?)
              osgood_ Level 8
              <link href="file:///C|/Documents and Settings/Administrator/My Documents/My Designs/Paul 1.0/style.css" rel="stylesheet" type="text/css">

               

              You'd need to supply the css for the code as well.

               

              You could try and set your main table width to 1015, as below. At the moment it has no width set. As content is added it will adjust to its 'natural' size unless you restrict it with a width.

               

              <table border="0" width="1015" align="center" cellpadding="0" cellspacing="0">

               

               

              Also you have no Document type declared at the start of your page. I would advise that you do have one present:

               

              <!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">

              • 4. Re: Layout weirdness, div width (I think?)
                paulCA1 Level 1

                Hi osgood, thanks for the reply.

                 

                As far as I can tell, I do have a width set for the table - 905. Or am I looking in the wrong place here?

                 

                What is somewhere embarrassing is that I looked in the path you posted from my code for the css stylesheet, and one does not exist there. I don't know what's up with that. I emailed my friend to ask him where the stylesheet is for the site.

                 

                In regards to adding a doctype, where do I add this? I tried copying in what you had posted just before and just after the <head>, and once I had done this the hidden controls for my main page slideshow were no longer hidden. I'm afraid I'm getting in over my head here...

                • 5. Re: Layout weirdness, div width (I think?)
                  osgood_ Level 8

                  I'm talking about your outer table, not the inner one which has a width declared.

                   

                  Look along the bottom of design view in Dreamweaver. You'll see a row of tags <body> <table> <tr> <td> etc etc. Click on the first <table> tag and make sure its highlighted then go to the properties inspector and give it a width of 1015.

                   

                  I don't think it is the issue to your design view problem but then again I have no trouble seeing the page correctly in the version of Dreamweaver that I am using CS4 despite errors in your code. ie the table which is 905 wide appear centrally, not set to the left as your image shows.

                   

                  You should not need a <div> to center the table which is 905 wide, you just select the <td> cell that it is in and set the alignment to center in the properties inspector.

                   

                  The document type declaration should go before the opening <html> tag at the beginning of the page.

                  • 6. Re: Layout weirdness, div width (I think?)
                    paulCA1 Level 1

                    Thanks osgood.

                     

                    You were right, the table width had nothing to do with the design view problem.

                     

                    The screenshot I took with the alignment at the left was before I put in the centre div - at least I have it centered on the page now. I tried to just change the alignment in the properties inspector as you mentioned, but it was just affecting the contents of the table, rather than the table itself. I suspect my lack of knowledge is more in error here, however.

                     

                    Technically, everything is fine I guess since it displays in firefox OK - it's just that it was bothering me in display view and I thought the fix would be a buttom or something somewhere I was missing. Apparently not!

                     

                    Thank you for your attempts to help me though, they are much appreciated.

                    • 7. Re: Layout weirdness, div width (I think?)
                      paulCA1 Level 1

                      osgood, I do have a more pressing issue now that perhaps you could help me with.

                       

                      I've gone ahead and uploaded everything to the web. I have the problem now that my main page slideshow is not functioning at all.

                       

                      You can check out the code at http://home.cogeco.ca/~capo139/index.html

                      There is also slideshow code (different type though) in the portfolio link, and it loads and works fine.

                       

                      The main page slideshow is just a cycle of 5 images that fade out to each other. It works fine when I preview from DW in firefox :s

                       

                      Any help would be greatly appreciated.