9 Replies Latest reply on Jun 6, 2013 8:39 AM by Kim Louise 22

    Page layout appears incorrect in anything other than IE 10...?

    Kim Louise 22 Level 1

      Hi

       

      I have created a very simple microsite in Dreamweaver CS6 (my web design knowledge is very basic hence the ‘very simple microsite’!).

       

      My site appears and work well in Internet Explorer (10) although when viewed in previous versions Firefox or Chrome the pages appear on the right hand side of the screen rather than centralised as it should. 

       

      I initially used one of the default fixed layout templates in Dreamweaver in which I have used tables on some pages but not on others?  


      Another strange thing is that I have a simple navigation bar at the top of the pages which consist of three rollover buttons ‘Next, Home and Back’ in that order.  However when viewed in anything other than IE 10 the 'Next' and 'Back' buttons have been reversed??? 


      I thought it would be quicker to ask for some advice rather than try and work out the problem, so any suggestions will be very much appreciated!

       

      Many thanks

       

      Kim

        • 1. Re: Page layout appears incorrect in anything other than IE 10...?
          MurraySummers Level 8

          The answer is in your page's code. Can you please paste the code into a reply here, or better yet, post a link to the live page?

          • 2. Re: Page layout appears incorrect in anything other than IE 10...?
            Kim Louise 22 Level 1

            Thank you, here's the code for my index page which is also proving to be a problem....

             

            <!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"><!-- InstanceBegin template="/Templates/template_welcome page.dwt" codeOutsideHTMLIsLocked="false" -->

            <head>

            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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

            <title>Pulse Dynamics </title>

            <!-- InstanceEndEditable -->

            <!-- InstanceBeginEditable name="head" -->

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

            <!-- InstanceEndEditable -->

            <style type="text/css">

            <!--

            body  {

                font: 100% Verdana, Arial, Helvetica, sans-serif;

                background: #666666;

                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;

                background-color: #f2f4f4;

            }

            .thrColFixHdr #container {

                width: 900px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */

                background: #FFFFFF;

                text-align: left; /* this overrides the text-align: center on the body element. */

                margin-top: 0;

                margin-right: auto;

                margin-bottom: 0;

                margin-left: auto;

                border-top-style: none;

                border-right-style: none;

                border-bottom-style: none;

                border-left-style: none;

                border-top-color: #000000;

                border-right-color: #000000;

                border-bottom-color: #000000;

                border-left-color: #000000;

            }

            .thrColFixHdr #header {

                height: 152px;

                background-color: #FFF;

                background-repeat: no-repeat;

                background-image: url(file:///T|/Copy%20of%20Pulse%20Dynamics%20WEB%20copy%20taken%20Feb%202012%20Edited%20 version/Images/headerlogo.jpg);

                background-position: right;

                padding: 20;

            }

            .thrColFixHdr #header h1 {

                margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */

                padding: 0px; /* using padding instead of margin will allow you to keep the element away from the edges of the div */

            }

            .thrColFixHdr #mainContent {

                margin-top: 0;

                margin-right: 0px;

                margin-bottom: 0;

                margin-left: 0px;

                padding-top: 20px;

                padding-right: 20px;

                padding-bottom: 0;

                padding-left: 20px;

                font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

                font-size: small;

            }

            .thrColFixHdr #footer {

                padding: 0 10px 0 20px;

                font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

                font-size: 12px;

                background-color: #464646;

                color: #FFF;

            }

            .thrColFixHdr #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;

            }

            a:link {

                color: #000000;

                text-decoration: none;

            }

            a:hover {

                color: #000000;

                text-decoration: none;

            }

            a:visited {

                text-decoration: none;

                color: #000000;

            }

            a:active {

                text-decoration: none;

                color: #851f82;

            }

            #Navbar {

                width: 120px;

            }

            #Navbar {

            }

            #Navigation bar {

                height: 50px;

                width: 540px;

                margin-right: auto;

                margin-left: auto;

            }

            #Title header {

                font-size: 12px;

                font-style: italic;

                font-weight: bold;

                color: #606;

            }

            #Sub title {

            }

            #Spacer {

            }

            #Main body {

            }

            -->

            </style><!--[if IE 5]>

            <style type="text/css">

            /* place css box model fixes for IE 5* in this conditional comment */

            .thrColFixHdr #sidebar1 { width: 180px; }

            .thrColFixHdr #sidebar2 { width: 190px; }

            </style>

            <![endif]--><!--[if IE]>

            <style type="text/css">

            /* place css fixes for all versions of IE in this conditional comment */

            .thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; }

            .thrColFixHdr #mainContent { zoom: 1; }

            /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */

            </style>

            <![endif]-->

            <link href="file:///T|/Copy of Pulse Dynamics WEB copy taken Feb 2012 Edited version/navigation.css" rel="stylesheet" type="text/css" />

            <script type="text/javascript">

            <!--

            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_nbGroup(event, grpName) { //v6.0

              var i,img,nbArr,args=MM_nbGroup.arguments;

              if (event == "init" && args.length > 2) {

                if ((img = MM_findObj(args[2])) != null && !img.MM_init) {

                  img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;

                  if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();

                  nbArr[nbArr.length] = img;

                  for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {

                    if (!img.MM_up) img.MM_up = img.src;

                    img.src = img.MM_dn = args[i+1];

                    nbArr[nbArr.length] = img;

                } }

              } else if (event == "over") {

                document.MM_nbOver = nbArr = new Array();

                for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {

                  if (!img.MM_up) img.MM_up = img.src;

                  img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);

                  nbArr[nbArr.length] = img;

                }

              } else if (event == "out" ) {

                for (i=0; i < document.MM_nbOver.length; i++) {

                  img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }

              } else if (event == "down") {

                nbArr = document[grpName];

                if (nbArr)

                  for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }

                document[grpName] = nbArr = new Array();

                for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {

                  if (!img.MM_up) img.MM_up = img.src;

                  img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;

                  nbArr[nbArr.length] = img;

              } }

            }

            //-->

            </script>

            <style type="text/css">

            <!--

            h1,h2,h3,h4,h5,h6 {

                font-family: Trebuchet MS, Arial, Helvetica, sans-serif;

            }

            h1 {

                font-size: large;

                color: #851f82;

                font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

            }

            body,td,th {

                font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

                font-size: small;

                color: #000000;

                float: right

            }

            -->

            </style>

            <link href="file:///T|/Copy of Pulse Dynamics WEB copy taken Feb 2012 Edited version/bottomnav.css" rel="stylesheet" type="text/css" />

            <style type="text/css">

            <!--

            a {

                font-family: Trebuchet MS, Arial, Helvetica, sans-serif;

            }

            -->

            </style>

            <link href="file:///T|/Copy of Pulse Dynamics WEB copy taken Feb 2012 Edited version/bottomnavlinks.css" rel="stylesheet" type="text/css" />

            <link href="file:///T|/Copy of Pulse Dynamics WEB copy taken Feb 2012 Edited version/pulseemail.css" rel="stylesheet" type="text/css" />

            </head>

             

            <body class="thrColFixHdr" onload="MM_preloadImages('Images/Buttons/Gif%20buttons/images/new%20buttons/Up-button-our -services.gif','Images/Buttons/Gif%20buttons/images/new%20buttons/Down-button-our-services .gif','Images/Buttons/Gif%20buttons/images/new%20buttons/Up-button-the-challenge.gif','Ima ges/Buttons/Gif%20buttons/images/new%20buttons/Down-button-the-challenge.gif','Images/Butt ons/Gif%20buttons/images/new%20buttons/Up-button-our-approach.gif','Images/Buttons/Gif%20b uttons/images/new%20buttons/Down-button-our-approach.gif','Images/Buttons/Gif%20buttons/im ages/new%20buttons/Up-button-benefits.gif','Images/Buttons/Gif%20buttons/images/new%20butt ons/Down-button-benefits.gif','Images/Buttons/Gif%20buttons/images/new%20buttons/Up-button -resources.gif','Images/Buttons/Gif%20buttons/images/new%20buttons/Down-button-resources.g if','Images/Buttons/Gif%20buttons/images/new%20buttons/Up-button-contact-us.gif','Images/B uttons/Gif%20buttons/images/new%20buttons/Down-button-contact-us.gif')">

             

            <div id="container"><!-- InstanceBeginEditable name="header" -->

              <div id="emaillink">

              </div>

             

             

             

            <!-- InstanceEndEditable -->

              <div id="pulseemail">

                <div align="right"></div>

              </div>

              <!-- InstanceBeginEditable name="main content area" -->

              <div id="mainContent">

                <p> </p>

                <p> </p>

                <h1 align="center"><em>The instant voice for every person, everywhere, all the time.</em></h1>

                <h1 align="center"><img src="Images/pngs/Pulse-Dynamics-logo_large.png" width="813" height="325" /></h1>

                <p align="center">Welcome to Pulse Dynamics training</p>

                <p align="center"> </p>

                <p align="center"><a href="Contents.html"><img src="Images/pngs/Click-here-to-start-button.png" width="156" height="39" alt="Click here to start" /></a></p>

                <p> </p>

              </div>

              <!-- InstanceEndEditable -->

              <div id="footer">

                <p align="left"><strong>Pulse Dynamics Ltd.</strong>    </p>

                <p align="left"><strong>e: </strong><a href="mailto:talktome@pulse-dynamics.co.uk"><strong><font color="#edc2ff">talktome@pulse-dynamics.co.uk</font></strong></a>

                  <!-- end #footer -->

                </p>

              </div>

            <!-- end #container --></div>

            <script type="text/javascript">

            var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");

            document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

            </script>

            <script type="text/javascript">

            try{

            var pageTracker = _gat._getTracker("UA-3325753-6");

            pageTracker._trackPageview();

            } catch(err) {}

            </script>

             

            </body>

            <!-- InstanceEnd --></html>

            • 3. Re: Page layout appears incorrect in anything other than IE 10...?
              MurraySummers Level 8

              All of your CSS links, as well as the links within your embedded CSS are broken -

               

              <link href="file:///T|/Copy of Pulse Dynamics WEB

               

              That's because you are linking to files and images that are NOT within the local root folder you have defined for the site. This is not going to work. The local root folder should contain all of the files that are used by the site (except for those linked using an absolute link, e.g., <img src="http://www.example.com/image.jpg">.

              1 person found this helpful
              • 4. Re: Page layout appears incorrect in anything other than IE 10...?
                Kim Louise 22 Level 1

                ok thank you, I'll take a look and see what's missing from the root folder.

                 

                Thanks again, that's a really big help :-)

                • 5. Re: Page layout appears incorrect in anything other than IE 10...?
                  Kim Louise 22 Level 1

                  Just for personal learning how come the pages appear correct in IE but not the other browsers? 

                  • 6. Re: Page layout appears incorrect in anything other than IE 10...?
                    MurraySummers Level 8

                    The IE is a local preview, right? So the "file:///" links will still work in a local preview, but on the web they will not (of course, since they are pointing to your hard drive, not the server).

                    • 7. Re: Page layout appears incorrect in anything other than IE 10...?
                      Kim Louise 22 Level 1

                      To test my files I navigate to my folder and right click 'Open with' Internet Explorer, Firefox, Chrome....  so none are actually on the web just previwed through the browser.  Sorry If I'm not being very clear or not using the correct terminology.

                       

                      Thanks again

                      • 8. Re: Page layout appears incorrect in anything other than IE 10...?
                        MurraySummers Level 8

                        You are not previewing from within DW, then? In that case, I really have no explanation - notwithstanding that, however, those links will not work at all if these pages were uploaded to your hosting server. You must fix them. I'm sure that will give you a better preview experience too.

                        1 person found this helpful