13 Replies Latest reply on Oct 24, 2010 4:33 PM by burkey83

    positioning issues

    burkey83

      Hi There,

       

      The home page I am working on displays correctly in IE8 but not in IE7 (the side nav, login buttons, tile and bottom nav display incorrectly) and I cannot figure out what needs to be done to fix it. An example of the correct layout is below.

       

      I have validated the home page although a tag for google tracking still has an error against it, however I do not believe this is causing the layout issues.

       

      Should I be applying another conditional comment to fix the issues in IE7?

       

      The home page I am referring too is http://www.lombardfinance.com.au/dev/

       

      Some help/guidance would be much appreciated!

       

      Thanks.

       

      hmepg.jpg

        • 2. Re: positioning issues
          burkey83 Level 1

          thank you, we're working on getting a link to view the page and its dependent files.

          • 3. Re: positioning issues
            Ken Binney-GnPIX3 Level 4

            That's great.... you will surely get better assistance.

             

            Good night from NY

            • 4. Re: positioning issues
              John Waller Adobe Community Professional & MVP

              Am I missing something or was the link to the page not provided in your opening post at the top of this page?

              • 5. Re: positioning issues
                burkey83 Level 1

                No you're right, I have provided a link to the site in my opening post. Is this not enough for review?

                • 6. Re: positioning issues
                  burkey83 Level 1

                  Here is a link where the index page and it's supporting files can be downloaded for review.

                  http://uploading.com/files/1m1cm186/NEW%2BSite.rar/

                  Please let me know if you require more information regarding my query.

                  Any help will be much appreciated!

                  Thanks

                  • 7. Re: positioning issues
                    burkey83 Level 1

                    Hi There,

                     

                    I have provided a link to my site and a link to download the site to check all the code and the supporting files - is anyone able to now help me? Being a beginner I am completely stuck with this issue so some help would be great

                     

                    Thanks!

                    • 8. Re: positioning issues
                      osgood_ Level 8

                      Code and css below. Select all, paste into new document and save to your site folder. Now works in IE7.

                       

                       

                       

                      <!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>Lombard Finance - Welcome to Lombard - Retail and Personal finance solutions</title>
                      <meta name="description" content="Lombard Finance is an Australian owned consumer finance company helping both business owners and consumers achieve their goals." />
                      <meta name="keywords" content="Lombard Finance, Lombard, consumer finance, personal loan, personal loans, finance, interest free, home loans, loans, patient finance, payment plans, dental finance, finance companies, Lombard Card, Lombard Visa Card, cosmetic surgery finance, retail choice, customer choice, medical finance, retail finance, credit cards, interest free finance, visa card, visa debit, Lombard low rate, retail partners, Australian owned, Internet banking, personal, personal finance, interest free offers, special promotion rates, become a retail partner, customer application, car loan, boat loan, credit card, apply now, apply online, Lombard dealer, Bpay, pay my bills online, shop interest free," />

                       

                      <style type="text/css">
                      <!--
                      body  {
                          font:Arial, Helvetica, sans-serif, Verdana 100%;
                          margin:0 auto;
                          background-color:#FFF;
                          background-image:url(images/background2.jpg);
                          background-repeat:repeat-x;
                          padding-top:2px;
                          background-attachment: scroll;
                      }
                      a img { border: none; }
                      #loginbuttons {
                          position: absolute;
                          width: 84px;
                          left: 900px;
                          top: 9px;
                      }
                      #loginbuttons img {
                          margin-bottom: 12px;
                      }
                      .twoColFixRtHdr #container {
                          width: 1002px; /* this overrides the text-align: center on the body element. */
                          font-family: Arial, Helvetica, sans-serif, Verdana;
                          font-size: 10px;
                          color: #000000;
                          background-color: #FFFFFF;
                          margin:0 auto;
                          line-height: 10px;
                          overflow: hidden;
                      }
                      .twoColFixRtHdr #header {
                          font-family: Arial, Helvetica, sans-serif, Verdana;
                          font-size: 10px;
                          color: #000000;
                          background-color: #FFF;
                          padding-left: 5px;
                      position: relative;

                      }
                      #bottomnav table tr td ul li {
                          list-style-position: outside;
                          list-style-image: url(images/listarrow.jpg);
                      }
                      ul li {
                        list-style:square inside url(images/listarrow.jpg);
                      }
                      /* in this particular case if Images/listarrow.jpg is not available
                          then a square will be provided as secondary */
                      .twoColFixRtHdr #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: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
                      }
                      .twoColFixRtHdr #sidebar1 {
                          float: left; /* since this element is floated, a width must be given */
                          width: 250px; /* the background color will be displayed for the length of the content in the column, but no further */
                          background-attachment: scroll;
                          background-repeat: no-repeat;
                      }
                      .tile {
                          float: right;
                      }
                      .twoColFixRtHdr #mainContent {
                         float: left;
                         width: 747px;
                      }

                      #footer  {
                      width: 1002px;
                      margin: 0 auto;
                      background-color: #FFF;
                      }
                      #footer a  {
                      padding: 0 0 0 25px;
                      }
                      .twoColFixRtHdr #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 */
                      font-size: 14px;
                      }
                      .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 */
                      background-image: url(images/Toplogin.jpg);
                          background-position: right center;
                          background-repeat: no-repeat;
                      }
                      .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;
                      }
                      #sidebar1 table tr td strong {
                          color: #FFF;
                          font-size: 14px;
                          font-family: Arial, Helvetica, sans-serif, Verdana;
                          font-style: normal;
                          font-weight: 500;
                          padding-top: 0px;
                          padding-right: 0px;
                          padding-bottom: 0px;
                          padding-left: 10px;
                      }
                      #sidebar1 img {
                      float: left;
                      }
                      #bottomnav {
                      clear: both;
                      width: 743px;
                      padding-right: 2px;
                      }
                      #bottomnav table {
                          font-family: Arial, Helvetica, sans-serif, Verdana;
                          font-size: 11pt;
                          color: #000;
                          max-width: 743px;
                      }
                      #wrapper {
                        width: 960px;
                        margin: 0 auto;
                      }
                      img.centreimage2 {display:block; margin: 0 auto;}
                      a:link {
                          color: #000;
                          text-decoration: none;
                      }
                      a:visited {
                          text-decoration: none;
                          color: #000;
                      }
                      a:hover {
                          text-decoration: none;
                          color: #A3D8F4;
                      }
                      a:active {
                          text-decoration: none;
                          color: #000;
                          line-height: 1px;
                      }
                      -->
                      </style>
                      <!--[if IE 7]>
                      <style type="text/css">
                      /* place css box model fixes for IE 7 in this conditional comment */
                      #loginbuttons img {
                      margin-bottom: 9px;
                      }
                      #bottomnav table td {
                      padding: 8px 0;
                      }
                      </style>
                      <![endif]-->
                      <!--[if IE 5]>
                      <style type="text/css">
                      /* place css box model fixes for IE 5* in this conditional comment */
                      .twoColFixRtHdr #sidebar1 { width: 250px; }
                      </style>
                      <![endif]-->
                      <!--[if IE]>
                      <style type="text/css">
                      /* place css fixes for all versions of IE in this conditional comment */
                      .twoColFixRtHdr #sidebar1 { padding-top: 0px; }
                      .twoColFixRtHdr #mainContent { zoom: 1; }
                      /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
                      </style>
                      <style type="text/css">
                      .mybuggyelement { zoom: 1;}
                      </style>
                      <![endif]-->
                      <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>

                       


                      </head>
                      <body class="twoColFixRtHdr" onload="MM_preloadImages('images/n_homeRO.jpg','images/n_personalRO.jpg','images/n_retail partnerRO.jpg','images/n_aboutRO.jpg','images/n_contactRO.jpg','images/h_lombardvisaRO.jpg ','images/h_lombardhomeloansRO.jpg','images/h_personalRO.jpg','images/h_retailpartnersRO.j pg','images/b_loginON.jpg','images/n_lombardvisaRO.jpg','images/h_contactusRO.jpg','images /n_homeloansRO.jpg','images/n_aboutRO2.jpg')">
                      <div align="left" class="twoColFixRtHdr" id="container">
                        <div class="fltlft" id="header">
                        <div id="loginbuttons">
                        <a href="https://www.lombardfinance.com.au/internetbanking" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image21','','images/b_loginON.jpg',1)"><img src="images/b_login.jpg" alt="Internet Banking Login" name="Image21" width="84" height="29" vspace="2" id="Image21"/></a>
                        <a href="https://applications.lombardfinance.com.au/lombard" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image22','','images/b_loginON.jpg',1)"><img src="images/b_login.jpg" name="Image22" width="84" height="29" id="Image22" alt="Retail Partners Login"/></a>
                        </div><!-- end loginbuttons -->
                          <div id="logo">
                            <table width="998" border="0" align="left" bgcolor="#FFFFFF" class="fltlft">
                              <tr>
                                <td width="446" height="60"><img src="images/logo.jpg" alt="" name="logo" width="361" height="88" id="logo2" style="background-color: #003399" /></td>
                                <td width="307" align="center" valign="top"><div id="navSub"><a href="h_contactus.html">Contact Us</a>   |  <a href="h_productdisclosure.html">Product Disclosure</a>  |  <a href="h_privacy.html">Privacy</a></div></td>
                                <td width="231"> </td>
                              </tr>
                            </table>
                          </div>
                        </div>
                        <br style="clear: both;" />
                         <div class="fltlft" id="topnavigation">
                          <table width="99%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                              <td width="9%"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image16','','images/n_homeRO.jpg',1)"><img src="images/n_home.jpg" name="Image16" width="84" height="48" border="0" id="Image16" alt="Home"/></a></td>
                              <td width="11%"><a href="lv_lombardvisa.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','images/n_lombardvisaRO.jpg',1)"><img src="images/n_lombardvisa.jpg" name="Image15" width="121" height="48" border="0" id="Image15" alt="Lombard Visa" /></a></td>
                              <td width="17%"><a href="rp_Partnership Opportunities.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('RetailPartners','','images/n_retailpartnerRO.jpg',1)"><img src="images/n_retailpartners.jpg" name="RetailPartners" width="155" height="48" border="0" id="RetailPartners" alt="Retail Partners" /></a></td>
                              <td width="11%"><a href="hl_introduction.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('HomeLoans','','images/n_homeloansRO.jpg',1)"><img src="images/n_homeloans.jpg" name="HomeLoans" width="109" height="48" border="0" id="AboutUs2" alt="About Us"/></a></td>
                              <td width="12%"><a href="h_aboutus.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('AboutUs','','images/n_aboutRO2.jpg',1)"><img src="images/n_about2.jpg" name="AboutUs" width="125" height="48" border="0" id="AboutUs" alt="About Us"/></a></td>
                              <td width="40%"><img src="images/n_search.jpg" width="407" height="48" alt="search" /></td>
                            </tr>
                          </table>
                        </div>

                       

                        <div id="mainContent">
                       
                        <a href="lv_lombardvisa.html"><img src="images/mockcentre3.jpg" alt="" name="centreimage" width="747" height="227" vspace="1" align="left" id="centreimage2" /></a>
                        <div id="bottomnav">
                          <table width="743" border="0" align="left" cellpadding="0" cellspacing="0">
                            <tr>
                              <td width="248"><a href="lv_lombardvisa.html"><img src="images/bn_lombard.jpg" width="250" height="39" alt="Lombard Visa" /></a></td>
                              <td width="247"><a href="rp_Partnership Opportunities.html"><img src="images/bn_retail.jpg" width="250" height="39" alt="Retail Partners" /></a></td>
                              <td width="252"><a href="hl_introduction.html"><img src="images/bn_homeloans.jpg" alt="Lombard Home Loans" width="250" height="39" /></a></td>
                            </tr>
                            <tr>
                              <td align="left" valign="top"><ul>
                                <li><a href="lv_applicationcriteria.html">Apply now</a><br />
                                </li>
                              </ul></td>
                              <td align="left" valign="top"><ul>
                                <li><a href="rp_Partnership Opportunities.html">Our products</a> </li>
                              </ul></td>
                              <td align="left" valign="top"><ul>
                                <li>
                                  <p><a href="hl_introduction.html">Buying your first home</a></p>
                                </li>
                              </ul></td>
                            </tr>
                            <tr>
                              <td align="left" valign="top"><ul>
                                <li><a href="lv_activateyourcard.html">Activate your card</a></li>
                              </ul></td>
                              <td align="left" valign="top"><ul>
                                <li>
                                  <p><a href="retail_app.htm">Apply now</a><a href="hl_refinancing.html"></a></p>
                                </li>
                              </ul></td>
                              <td align="left" valign="top"><ul>
                                <li>
                                  <p><a href="hl_introduction.html">Refinancing</a></p>
                                </li>
                              </ul></td>
                            </tr>
                            <tr>
                              <td align="left" valign="top"><ul>
                                <li><a href="lv_internetbanking.html">Internet Banking</a></li>
                              </ul></td>
                              <td align="left" valign="top"><ul>
                                <li>
                                  <p><a href="https://applications.lombardfinance.com.au/lombard">Retail Partner login</a></p>
                                </li>
                              </ul></td>
                              <td align="left" valign="top"><ul>
                                <li>
                                  <p><a href="hl_introduction.html">Increasing your home loan</a></p>
                                </li>
                              </ul></td>
                            </tr>
                            <tr>
                              <td align="left" valign="top"><ul>
                                <li><a href="lv_lostorstolencards.html">Lost or stolen cards</a></li>
                              </ul></td>
                              <td align="left" valign="top"><ul>
                                <li><a href="contact_retailpartners.htm">Contact us</a> </li>
                              </ul></td>
                              <td align="left" valign="top"><ul>
                                <li>
                                  <p><a href="hl_introduction.html">Personal &amp; Car Loans</a></p>
                                </li>
                              </ul></td>
                            </tr>
                          </table>
                        </div>
                        </div><!-- end mainContent -->
                        <div id="sidebar1"><a href="lv_lombardvisa.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image17','','images/h_lombardvisaRO.jpg',1)"><img src="images/h_lombardvisa.jpg" alt="Lombard Visa" name="Image17" width="249" height="57" align="left" id="Image17"/></a><a href="rp_Partnership Opportunities.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image18','','images/h_retailpartnersRO.jpg',1)"><img src="images/h_retailpartners.jpg" name="Image18" width="249" height="57" align="left" id="Image18" alt="Retail Partners" /></a><a href="hl_introduction.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image19','','images/h_lombardhomeloansRO.jpg',1)"><img src="images/h_lombardhomeloans.jpg" name="Image19" width="249" height="57" align="left" id="Image19" alt="Lombard Home Loans"/></a><a href="h_contactus.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image20','','images/h_contactusRO.jpg',1)"><img src="images/h_contactus.jpg" name="Image20" width="249" height="57" align="left" id="Image20" alt="Contact Us"/></a>
                          <div class="tile"> <a href="http://www.fantasticfurniture.com.au/home" target="_blank"><img src="images/FF Lombard Image.jpg" alt="Tile" name="FFImage" width="249" height="230" vspace="2" id="FFImage" /></a></div>
                          <!-- end #sidebar1 -->
                        </div>
                          </div>
                       
                       
                        <div id="footer"><p>&copy; Copyright: 2010 Lombard Finance Pty Limited ABN 31 099 651 877 <a href="h_termsofuse.html">Terms of Use</a> <a href="h_sitemap.html">Sitemap</a></p>
                      <!-- end #footer -->
                        </div>
                        <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
                        <!-- end #container -->
                      </div>

                       

                      </body>
                      <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">
                      var pageTracker = _gat._getTracker("UA-1273939-2");
                      pageTracker._initData();
                      pageTracker._trackPageview();
                      </script>

                       


                      </html>

                      • 9. Re: positioning issues
                        osgood_ Level 8

                        Once pasted into a new document IF you find an image is missing check the source code. In some instances the forum paste function appears to be splitting the 'i' and the 'm' between : <i mg src=

                        1 person found this helpful
                        • 10. Re: positioning issues
                          MurraySummers Level 8

                          Actually the forum software puts those spurious spaces in lots of places, unfortunately.

                           

                          By the way, the OP might want to consider doing some house cleaning on the keywords meta tag.  There is a length limit there of about 4-8 keyword phrases, as recommended by Matt Cutts of Google (notwithstanding the fact that neither Google nor the other major SE suppliers even use the meta keyword content).  Alternatively, you could just remove the keywords altogether since they serve marginal if any purpose.

                           

                          Citation from Matt Cutt's Blog -

                           

                          This Meta tag provides a list of words or phrases about the contents of  the Web page. This tag provides some additional text for crawler-based  search engines. However because of frequent attempts to abuse their  system, most search engines ignore this tag.

                          1 person found this helpful
                          • 11. Re: positioning issues
                            osgood_ Level 8

                            Hi Murray, yep I agree about the keyword meta tag, not really necessary at all in my opinion.

                             

                            Was'nt really taking too much notice apart from getting the page to work in IE7 which required a bit of css tweaking and moving blocks of code into more suitable positions.

                             

                            The OP's code is not optomized by any means and a bit over elaborated in places. It's not feasable to change everything to ones own satisfaction but if the code is reasonably presented as this was then a solution can usually be found.

                            • 12. Re: positioning issues
                              MurraySummers Level 8

                              Wasn't taking issue with your comments at all.  Sometimes by the time I have finished rebuilding a page for someone, I'm just too exhausted to fill in the fine points!   I was trying to carry that load for you....

                              • 13. Re: positioning issues
                                burkey83 Level 1

                                Perfect, thank you so much for the new code and css! As I am a beginner it was extremely hard figuring out what I was doing wrong so it great to get some professional help. I look forward to increasing my knowledge though so I can understand code a lot better.

                                 

                                Murray thanks for the advice re meta tags - the tag has been used for a long time so it is well due for a clean up.

                                 

                                Thanks again for your help again, it is very much appreciated!!!