1 Reply Latest reply on May 1, 2010 8:41 PM by John Waller

    "Table" changes locations with different browsers

    NSidhom

      The the body of my website is a JPEG, and I have a table that contains a form. I am trying to line up the form with the text that is in the background, but when I get it right looking in one browser, it is completely wrong in another.


      Any advice on how to fix this would be greatly appreciated! The specific website is: http://www.high-road.org/contact.html


      Here is my code..

       

       

       

      <meta name="description" content="High Road is a Christian Celtic Music Group based in Memphis, TN.">

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

      "http://www.w3.org/TR/html4/loose.dtd">

      <html>

      <head>

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

      <title>Untitled Document</title>

      <style type="text/css">

      <!--

      body {

      background-color: #000000;

      }

      .style1 { font-size: 20px;

      font-family: "Times New Roman", Times, serif;

      }

      .style5 {font-size: 20px}

      .style9 {font-size: 28px}

      -->

      </style>

      <script language="JavaScript" 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 onLoad="MM_preloadImages('IMAGES/menubarroll_2.jpg','IMAGES/menubarroll_3.jpg','IMAGES/me nubarroll_4.jpg','IMAGES/menubarroll_5.jpg','IMAGES/menubarroll_6.jpg','IMAGES/menubarroll _7.jpg')">

      <table width="800" height="1293" border="0" align="center">

        <tr>

          <td height="1289" valign="top" background="IMAGES/contactmain.jpg" bgcolor="#E8E8E8"><p><img src="IMAGES/header.jpg" width="800" height="365"><br>

            <img src="IMAGES/menubar_1.jpg" width="64" height="50"><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Menu_Home','','IMAGES/menubarroll_2.jpg',1)"><img src="IMAGES/menubar_2.jpg" name="Menu_Home" width="105" height="50" border="0"></a><a href="about.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Menu_About','','IMAGES/menubarroll_3.jpg',1)"><img src="IMAGES/menubar_3.jpg" name="Menu_About" width="104" height="50" border="0"></a><a href="media.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Menu_Media','','IMAGES/menubarroll_4.jpg',1)"><img src="IMAGES/menubar_4.jpg" name="Menu_Media" width="105" height="50" border="0"></a><a href="schedule.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Menu_Schedule','','IMAGES/menubarroll_5.jpg',1)"><img src="IMAGES/menubar_5.jpg" name="Menu_Schedule" width="140" height="50" border="0"></a><a href="contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Menu_Contact','','IMAGES/menubarroll_6.jpg',1)"><img src="IMAGES/menubar_6.jpg" name="Menu_Contact" width="126" height="50" border="0"></a><a href="store.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Menu_Store','','IMAGES/menubarroll_7.jpg',1)"><img src="IMAGES/menubar_7.jpg" name="Menu_Store" width="86" height="50" border="0"></a><img src="IMAGES/menubar_8.jpg" width="68" height="50"><br>

          </p>

            <p> </p>

            <p> </p>

            <p> </p>

            <p><br>

              <br>

              <br>

            </p>

            <table width="85%"  border="0">

              <tr>

                <td width="676" align="right" valign="top"><div align="right">

                  <p><br>

                  </p>

                  <form action="process.php" method="post" enctype="multipart/form-data" name="" id="">

                    <p>

                      <input name='Name' type=text class="style1" id="Name" size="30">

                      <br>

                      <br>

      </p>

                    <p>

                      <input name='Email' type=text class="style1" id="Email" size="30">

                    </p><p align="right"><br>

                      <br>

                      <textarea name="Comments" cols="28" rows="8" class="style1" id="Comments"></textarea>

                        <br>

                        <br>

                        <br>

                    </p>

                    <p>                  <input name='Location' type=text class="style1" id="Location" size="30">

                    </p>

                    <p>                  <input type=submit class="style5" value='Submit Form'>

                      </p>

                  </form>

                  </div></td>

              </tr>

            </table>     

            <br>

            <p> </p>

          </td>

        </tr>

      </table>

      </body>

      </html>

        • 1. Re: "Table" changes locations with different browsers
          John Waller Adobe Community Professional & MVP

          I'm afraid that it's never going to work. What you're attempting is akin to nailing jelly to a wall.

           

          Just focus on creating a simple functional form and style it with CSS.

           

           

          Other comments:

           

          Do you realize that you're doing the website a disservice by making all the text of the website part of a huge (300KB+) JPG?

           

          The top photo with the people looks great but the entire website will be slow and invisible to search engines due to the background JPG e.g. there's no text content on the pages.

           

          I understand the intent of the design in trying to convey Celtic colours and fonts but it's not the best approach for a website which Google can see and potential visitors can find online. In addition, it's inaccessible to vision impaired users who cannot change colours or resize text due to the JPG and maintenance will be tough since you have to recreate the images every time.

           

          Use a DW template, keep the colour theme and group photo, drop the background JPG with embedded Celtic font and use CSS-styled text wherever possible.