Welcome guest. Before posting on our computer help forum, you must register. Click here it's easy and free.

Author Topic: Website Template Broken up??  (Read 5374 times)

0 Members and 1 Guest are viewing this topic.

newone

    Topic Starter


    Greenhorn

    Website Template Broken up??
    « on: July 30, 2009, 04:03:48 AM »
    Hi,

    I'd REALLY appreciate any help, I've completed a website template, after adding content to the pages, I would end up adding more content to some pages than others, and I would increase certain image heights on the template, to accomodate the content.
    The website displayed PERFECTLY in google chrome, unfortunately when viewed in Firefox and IE, the images are spaced out from each other??
    I've come across this before and I'd normally solve the problem by applying the valign="top" attribute to the column or row the picture was in, this seemed to solve the problem, but this time, it's not doing anything.
    I've tried setting the table height to 0, this has also not done me any good.
     ???
    here is a link:
    http://www.exalon.co.za/africall/tours.html

    kpac

    • Web moderator
    • Moderator


    • Hacker

    • kpac®
    • Thanked: 184
      • Yes
      • Yes
      • Yes
    • Certifications: List
    • Computer: Specs
    • Experience: Expert
    • OS: Windows 7
    Re: Website Template Broken up??
    « Reply #1 on: July 30, 2009, 04:22:49 AM »
    Nice choice in picking Google Chrome to do your testing. ;D

    Are we talking about the menu images on the left?

    newone

      Topic Starter


      Greenhorn

      Re: Website Template Broken up??
      « Reply #2 on: July 30, 2009, 04:45:28 AM »
      Jip, that would be the problem,
      i don't know if it shows in your browser,
      but the bottom images are also out of place
      and the boxes on the right, but this will probably
      be solved once the menu links are sorted?
      If you have any ideas for me, I'd be sOO grateful!

      kpac

      • Web moderator
      • Moderator


      • Hacker

      • kpac®
      • Thanked: 184
        • Yes
        • Yes
        • Yes
      • Certifications: List
      • Computer: Specs
      • Experience: Expert
      • OS: Windows 7
      Re: Website Template Broken up??
      « Reply #3 on: July 30, 2009, 04:51:07 AM »
      I'm not sure what way the site works, looking at the code... Did you download the template or did you code it yoursself?

      newone

        Topic Starter


        Greenhorn

        Re: Website Template Broken up??
        « Reply #4 on: July 30, 2009, 04:57:41 AM »
        I did everything myself.
        Please keep in mind, I'm like a total newbie and self-taught..  :-[
        If this will help?

        Code: [Select]
        <html>
        <head>
        <title>title</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <meta name="keywords" content="keywords...">
        <meta name="description" content="description...">
        <!-- ImageReady Preload Script (templaterolled.psd) -->
        <script type="text/javascript">
        <!--

        function newwindow(name)
        {
        window.open(name,'','width=1024,height=683,resizable=no,scrollbars=0,left=0,right=0');
        }

        // -->
        </script>
        <!-- ImageReady Preload Script (templaterolled.psd) -->
        <SCRIPT TYPE="text/javascript">
        <!--

        function newImage(arg) {
        if (document.images) {
        rslt = new Image();
        rslt.src = arg;
        return rslt;
        }
        }

        function changeImages() {
        if (document.images && (preloadFlag == true)) {
        for (var i=0; i<changeImages.arguments.length; i+=2) {
        document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
        }
        }
        }

        var preloadFlag = false;
        function preloadImages() {
        if (document.images) {
        template_05_over = newImage("images/template_05-over.png");
        template_09_over = newImage("images/template_09-over.png");
        template_11_over = newImage("images/template_11-over.png");
        template_12_over = newImage("images/template_12-over.png");
        template_13_over = newImage("images/template_13-over.png");
        template_16_over = newImage("images/template_16-over.png");
        template_17_over = newImage("images/template_17-over.png");
        template_18_over = newImage("images/template_18-over.png");
        template_24_over = newImage("images/template_24-over.png");
        preloadFlag = true;
        }
        }

        // -->
        </script>
        <!-- End Preload Script -->
        <link rel="stylesheet" href="style.css">
        <style type="text/css">
        <!--
        .style1 {font-size: 14px}
        .style2 {font-size: 14}
        .style3 {font-size: 10px}
        -->
        </style>
        </head>
        <body background="bg1.jpg" marginwidth="0" marginheight="0" onLoad="preloadImages();">
        <!-- ImageReady Slices (templaterolled.psd) -->
        <table id="Table_01" align="center" width="801" height="0" border="0" cellpadding="0" cellspacing="0">
        <tr valign="top">
        <td colspan="2" valign="top">
        <img src="images/template_01.png" width="177" height="10" alt="" align="top"></td>
        <td colspan="6" rowspan="2" valign="top">
        <table border="0" background="images/template_02.png" width="623" height="137" alt="">
        <tr valign="top">
        <td valign="top"><center><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="505" height="141" title="Header"></center>
                      <param name="movie" value="images/Movie1.swf">
                      <param name="quality" value="high">
                      <embed src="images/Movie1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="505" height="141"></embed>
          </object></td>
        </tr>
        </table></td>
        <td valign="top">
        <img src="images/spacer.gif" width="1" height="10" alt="" align="top"></td>
        </tr>
        <tr valign="top">
        <td colspan="2" rowspan="2" valign="top"><img src="images/AfricaCallingLogo.JPG" width="177" height="131" align="top"></td>
        <td valign="top">
        <img src="images/spacer.gif" width="1" height="127" alt="" align="top"></td>
        </tr>
        <tr valign="top">
        <td colspan="6" valign="top">
        <img src="images/template_04.png" width="623" height="4" alt="" align="top"></td>
        <td valign="top">
        <img src="images/spacer.gif" width="1" height="4" alt="" align="top"></td>
        </tr>
        <tr valign="top">
        <td colspan="3" valign="top">
        <a href="index.php"
        onmouseover="changeImages('template_05', 'images/template_05-over.png'); return true;"
        onmouseout="changeImages('template_05', 'images/template_05.png'); return true;"
        onmousedown="changeImages('template_05', 'images/template_05-over.png'); return true;"
        onmouseup="changeImages('template_05', 'images/template_05-over.png'); return true;">
        <img name="template_05" src="images/template_05.png" width="220" height="60" border="0" alt="" align="top"></a></td>
        <td rowspan="18">
        <table border="0" background="images/template_06.png" width="353" height="100%" alt="">
        <tr valign="top">
        <td valign="top"><center>
          <img src="images/toursheading.png" width="91" height="42" align="top">
        </center>  
          <a href="exclusivesafaris.php"><img src="images/eslink.png" alt="Exclusive Safaris" width="160" height="160" border="0" align="top"></a><a href="kilimanjarohikes.php"><img src="images/khlink.png" alt="Kilimanjaro Hikes" width="160" height="160" border="0" align="top"><br>
                      </a><a href="mokorosafaris.php"><img src="images/mslink.png" alt="Mokoro Safaris" width="160" height="160" border="0" align="top"></a> <a href="overlandtours.php"><img src="images/otlink.png" alt="Overland Tours" width="160" height="160" border="0" align="top"><br>
                                                </a><a href="selfdrivetours.php"><img src="images/sdplink.png" alt="Self Drive Packages" width="160" height="160" border="0" align="top"></a> <a href="volunteerprojects.html"><img src="images/vplink.png" alt="Volunteer Packages" width="160" height="160" border="0" align="top"><br>
                                                              </a><a href="walkingsafaris.php"><img src="images/wslink.png" alt="Walking Safari" width="160" height="160" border="0" align="top"></a> <a href="canoesafaris.php"><img src="images/cslink.png" alt="Canoe Safari" width="160" height="160" border="0" align="top"><br>
                                                                            </a><a href="campingsafaris.php"><img src="images/caslink.png" alt="Camping Safari" width="160" height="160" border="0" align="top"></a> <a href="adrenalineaddiction.php"><img src="images/adlink.png" alt="Adrenaline Addiction" width="160" height="160" border="0" align="top"></a><br>
                      <a href="sharkcagediving.php"><img src="images/scdlink.png" alt="Shark Cage Diving" width="160" height="160" border="0" align="top"></a> <a href="kayakingholidays.php"><img src="images/kahlink.png" alt="Kayaking holidays" width="160" height="160" border="0" align="top"></a><br>
                      <a href="familyholidays.php"><img src="images/fhlink.png" alt="Family Holidays" width="160" height="160" border="0" align="top"></a> <a href="honeymoon.php"><img src="images/honarr.png" alt="honeymoon arrangements" width="160" height="160" border="0" align="top"><br>
                                    </a><a href="fifaworldcup.php">
                      <center>
                        <img src="images/fifalink.png" alt="Fifa 2010" width="160" height="160" border="0" align="top">
                      </center>
                      </a>   <br>
            <br>
           <center>
              </center></tr>
          </table>
          </td>
        <td colspan="3" rowspan="6" valign="top">
        <table border="0" cellpadding="10px" background="images/template_07.png" width="212" height="0" alt="">
        <tr valign="top">
        <td valign="top"><p>&nbsp;</p>
          <p>&nbsp;</p>
          <p align="center" class="style6"><span class="style1"><span class="style2"><span class="style3"><a href="volunteerprojects.html">10%   off Volunteer Projects</a></span></span></span></p>
          <p align="center" class="style6 style3"><a href="honeymoon.html">10%   off Honeymoon Packages</a></p>
          <p align="center" class="style6 style3"><a href="fifaworldcup.html">FIFA   World Cup Specials</a></p>
          <p align="center" class="style6"><span class="style3"><a href="services.php">Crazy   Cape Town Special</a></span></p>   </td>
        </tr>
        </table>
          </td>
        <td rowspan="20" valign="top">
        <img src="images/template_08.png" width="15" height="835" alt="" align="top"></td>
        <td valign="top">
        <img src="images/spacer.gif" width="1" height="60" alt="" align="top"></td>
        </tr>
        <tr valign="top">
        <td colspan="3" valign="top">
        <a href="travelpolicy.php"
        onmouseover="changeImages('template_09', 'images/template_09-over.png'); return true;"
        onmouseout="changeImages('template_09', 'images/template_09.png'); return true;"
        onmousedown="changeImages('template_09', 'images/template_09-over.png'); return true;"
        onmouseup="changeImages('template_09', 'images/template_09-over.png'); return true;">
        <img name="template_09" src="images/template_09.png" width="220" height="58" border="0" alt="" align="top"></a></td>
        <td valign="top">
        <img src="images/spacer.gif" width="1" height="58" alt="" align="top"></td>
        </tr>
        <tr>
        <td colspan="3" valign="top">
        <img src="images/template_10.png" width="220" height="1" alt="" align="top"></td>
        <td valign="top">
        <img src="images/spacer.gif" width="1" height="1" alt="" align="top"></td>
        </tr>
        <tr valign="top">
        <td colspan="3" valign="top">
        <a href="tours.html"
        onmouseover="changeImages('template_11', 'images/template_11-over.png'); return true;"
        onmouseout="changeImages('template_11', 'images/template_11.png'); return true;"
        onmousedown="changeImages('template_11', 'images/template_11-over.png'); return true;"
        onmouseup="changeImages('template_11', 'images/template_11-over.png'); return true;">
        <img name="template_11" src="images/template_11.png" width="220" height="59" border="0" alt="" align="top"></a></td>
        <td valign="top">
        <img src="images/spacer.gif" width="1" height="59" alt="" align="top"></td>
        </tr>
        <tr valign="top">
        <td colspan="3" valign="top">
        <a href="services.php"
        onmouseover="changeImages('template_12', 'images/template_12-over.png'); return true;"
        onmouseout="changeImages('template_12', 'images/template_12.png'); return true;"
        onmousedown="changeImages('template_12', 'images/template_12-over.png'); return true;"
        onmouseup="changeImages('template_12', 'images/template_12-over.png'); return true;">
        <img name="template_12" src="images/template_12.png" width="220" height="62" border="0" alt="" align="top"></a></td>
        <td valign="top">
        <img src="images/spacer.gif" width="1" height="62" alt="" align="top"></td>
        </tr>
        <tr valign="top">
        <td colspan="3" rowspan="3" valign="top">
        <a href="http://exalon.co.za/africall/blog/?page_id=21"
        onmouseover="changeImages('template_13', 'images/template_13-over.png'); return true;"
        onmouseout="changeImages('template_13', 'images/template_13.png'); return true;"
        onmousedown="changeImages('template_13', 'images/template_13-over.png'); return true;"
        onmouseup="changeImages('template_13', 'images/template_13-over.png'); return true;">
        <img name="template_13" src="images/template_13.png" width="220" height="59" border="0" alt="" align="top"></a></td>
        <td valign="top">
        <img src="images/spacer.gif" width="1" height="8" alt="" align="top"></td>
        </tr>
        <tr valign="top">
        <td colspan="3" valign="top">
        <img src="images/template_14.png" width="212" alt="" align="top"></td>
        <td valign="top">
        <img src="images/spacer.gif" width="1" height="8" alt="" align="top"></td>
        </tr>
        <tr valign="top">
        <td colspan="3" rowspan="4" valign="top">
        <table boder="0" cellpadding="10px" background="images/template_15.png" width="212" height="0" alt="">
        <tr valign="top">
        <td valign="top"></td>
        </tr>
        </table>
          </td>
        <td valign="top">
        <img src="images/spacer.gif" width="1" height="43" alt="" align="top"></td>
        </tr>
        <tr valign="top">
        <td colspan="3" valign="top">
        <a href="http://exalon.co.za/africall/blog/?page_id=16"
        onmouseover="changeImages('template_16', 'images/template_16-over.png'); return true;"
        onmouseout="changeImages('template_16', 'images/template_16.png'); return true;"
        onmousedown="changeImages('template_16', 'images/template_16-over.png'); return true;"
        onmouseup="changeImages('template_16', 'images/template_16-over.png'); return true;">
        <img name="template_16" src="images/template_16.png" width="220" height="80" border="0" alt="" align="top"></a></td>
        <td valign="top">
        <img src="images/spacer.gif" width="1" height="80" alt="" align="top"></td>
        </tr>
        <tr valign="top">
        <td colspan="3" valign="top">
        <a href="http://www.exalon.co.za/africall/blog"
        onmouseover="changeImages('template_17', 'images/template_17-over.png'); return true;"
        onmouseout="changeImages('template_17', 'images/template_17.png'); return true;"
        onmousedown="changeImages('template_17', 'images/template_17-over.png'); return true;"
        onmouseup="changeImages('template_17', 'images/template_17-over.png'); return true;">
        <img name="template_17" src="images/template_17.png" width="220" height="61" border="0" alt="" align="top"></a></td>
        <td valign="top">
        <img src="images/spacer.gif" width="1" height="61" alt="" align="top"></td>
        </tr>
        <tr valign="top">
        <td colspan="3" rowspan="4" valign="top">
        <a href="newsandspecials.php"
        onmouseover="changeImages('template_18', 'images/template_18-over.png'); return true;"
        onmouseout="changeImages('template_18', 'images/template_18.png'); return true;"
        onmousedown="changeImages('template_18', 'images/template_18-over.png'); return true;"
        onmouseup="changeImages('template_18', 'images/template_18-over.png'); return true;">
        <img name="template_18" src="images/template_18.png" width="220" height="68" border="0" alt="" align="top"></a></td>
        <td valign="top">
        <img src="images/spacer.gif" width="1" height="49" alt="" align="top"></td>
        </tr>
        <tr valign="top">
        <td colspan="3" valign="top">
        <img src="images/template_19.png" width="212" height="7" alt="" align="top"></td>
        <td valign="top">
        <img src="images/spacer.gif" width="1" height="7" alt="" align="top"></td>
        </tr>
        <tr valign="top">
        <td colspan="3" valign="top">
        <img src="images/template_20.png" width="212" height="2" alt="" align="top"></td>
        <td valign="top">
        <img src="images/spacer.gif" width="1" height="2" alt="" align="top"></td>
        </tr>
        <tr valign="top">
        <td rowspan="5" valign="top">
        <img src="images/template_21.png" width="22" height="320" alt="" align="top"></td>
        <td rowspan="4" valign="top">
        <img src="images/template_22.png" width="161" height="302" alt="" align="top">   </td>
        <td rowspan="5" valign="top">
        <img src="images/template_23.png" width="29" height="320" alt="" align="top"></td>
        <td valign="top">
        <img src="images/spacer.gif" width="1" height="10" alt="" align="top"></td>
        </tr>
        <tr valign="top">
        <td colspan="3" valign="top">
        <a href="contactus.php"
        onmouseover="changeImages('template_24', 'images/template_24-over.png'); return true;"
        onmouseout="changeImages('template_24', 'images/template_24.png'); return true;"
        onmousedown="changeImages('template_24', 'images/template_24-over.png'); return true;"
        onmouseup="changeImages('template_24', 'images/template_24-over.png'); return true;">
        <img name="template_24" src="images/template_24.png" width="220" height="71" border="0" alt="" align="top"></a></td>
        <td valign="top">
        <img src="images/spacer.gif" width="1" height="71" alt="" align="top"></td>
        </tr>
        <tr valign="top">
        <td valign="top">
        <img src="images/template_25.png" width="172" height="178" alt="" align="top"></td>
        <td colspan="2" rowspan="6" valign="top">
        <img src="images/template_26.png" width="48" height="264" alt="" align="top"></td>
        <td valign="top">
        <img src="images/spacer.gif" width="1" height="178" alt="" align="top"></td>
        </tr>
        <tr valign="top">
        <td rowspan="6" valign="top">
        <img src="images/template_27.png" width="172" height="102" alt="" align="top"></td>
        <td valign="top">
        <img src="images/spacer.gif" width="1" height="43" alt="" align="top"></td>
        </tr>
        <tr valign="top">
        <td valign="top">
        <img src="images/template_28.png" width="161" height="18" alt="" align="top"></td>
        <td valign="top">
        <img src="images/spacer.gif" width="1" height="18" alt="" align="top"></td>
        </tr>
        <tr valign="top">
        <td colspan="4">
        <img src="images/template_29.png" width="565" height="3" alt="" align="top"></td>
        <td valign="top">
        <img src="images/spacer.gif" width="1" height="3" alt="" align="top"></td>
        </tr>
        <tr valign="top">
        <td colspan="4" rowspan="2" valign="top">
        <img src="images/template_30.png" width="565" height="22" alt="" align="top"></td>
        <td valign="top">
        <img src="images/spacer.gif" width="1" height="14" alt="" align="top"></td>
        </tr>
        <tr valign="top">
        <td rowspan="2">
        <img src="images/template_31.png" width="15" height="24" alt="" align="top"></td>
        <td valign="top">
        <img src="images/spacer.gif" width="1" height="8" alt="" align="top"></td>
        </tr>
        <tr valign="top">
        <td colspan="6">
        <img src="images/template_32.png" width="613" height="16" alt="" align="top"></td>
        <td valign="top">
        <img src="images/spacer.gif" width="1" height="16" alt="" align="top"></td>
        </tr>
        <tr valign="top">
        <td valign="top">
        <img src="images/spacer.gif" width="172" height="1" alt="" align="top"></td>
        <td valign="top">
        <img src="images/spacer.gif" width="5" height="1" alt="" align="top"></td>
        <td valign="top">
        <img src="images/spacer.gif" width="43" height="1" alt="" align="top"></td>
        <td valign="top">
        <img src="images/spacer.gif" width="353" height="1" alt="" align="top"></td>
        <td valign="top">
        <img src="images/spacer.gif" width="22" height="1" alt="" align="top"></td>
        <td valign="top">
        <img src="images/spacer.gif" width="161" height="1" alt="" align="top"></td>
        <td valign="top">
        <img src="images/spacer.gif" width="29" height="1" alt="" align="top"></td>
        <td valign="top">
        <img src="images/spacer.gif" width="15" height="1" alt="" align="top"></td>
        <td></td>
        </tr>
        </table>
        <!-- End ImageReady Slices -->
        </body>
        </html>

        kpac

        • Web moderator
        • Moderator


        • Hacker

        • kpac®
        • Thanked: 184
          • Yes
          • Yes
          • Yes
        • Certifications: List
        • Computer: Specs
        • Experience: Expert
        • OS: Windows 7
        Re: Website Template Broken up??
        « Reply #5 on: July 30, 2009, 05:06:05 AM »
        Try adding this to each of the <td> tags in the menu.
        style="padding:0px;margin:0px;"

        So, for example, that would look something like this:
        Code: [Select]
        <td style="padding:0px;margin:0px;" colspan="3" valign="top">

        I also found something (accidentally) - your background image. Do you want that to repeat across the screen?

        newone

          Topic Starter


          Greenhorn

          Re: Website Template Broken up??
          « Reply #6 on: July 30, 2009, 05:13:46 AM »
          Thanks for that!
          Unfortunately it didn't do the trick..  :-\
          Thanks for noticing, I actually don't want it to repeat!

          kpac

          • Web moderator
          • Moderator


          • Hacker

          • kpac®
          • Thanked: 184
            • Yes
            • Yes
            • Yes
          • Certifications: List
          • Computer: Specs
          • Experience: Expert
          • OS: Windows 7
          Re: Website Template Broken up??
          « Reply #7 on: July 30, 2009, 05:17:56 AM »
          Okay. ;D

          Code: [Select]
          <td colspan="3" valign="top">That's what you have now.

          What I can see wrong is that it spans 3 columns, but then you have another <td> after it, which makes 4 columns. Then in the next <tr> you only have 3 columns. That's about the easiest way to explain it.
          In other words, I'd try removing the <td> with the spacer image.

          newone

            Topic Starter


            Greenhorn

            Re: Website Template Broken up??
            « Reply #8 on: July 30, 2009, 05:29:26 AM »
            YAY!
            That made a difference!
            http://www.exalon.co.za/africall/tours.html
            I only have gaps 2 big gaps left between the menu items
            then few small gaps between the contnent and the right hand side boxes.
             ;D SO HAPPY though!

            kpac

            • Web moderator
            • Moderator


            • Hacker

            • kpac®
            • Thanked: 184
              • Yes
              • Yes
              • Yes
            • Certifications: List
            • Computer: Specs
            • Experience: Expert
            • OS: Windows 7
            Re: Website Template Broken up??
            « Reply #9 on: July 30, 2009, 05:39:31 AM »
            Great.

            Without looking at the code, I'd say it's probably the same thing for the right side of the page.

            newone

              Topic Starter


              Greenhorn

              Re: Website Template Broken up??
              « Reply #10 on: July 30, 2009, 06:00:53 AM »
              I've taken out all the spacer images, there were quite a few..!
              Not quite clued up on how they get put there??
              Thanks for that! It really made a difference! 
              It just isn't 100% yet, not the way it displays in chrome I mean?
              Am I missing something? Here is what I've done:
              Code: [Select]
              <html>
              <head>
              <title>Unique Travel Experience in Africa!</title>
              <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
              <meta name="keywords" content="keywords">
              <meta name="description" content="discription">
              <!-- ImageReady Preload Script (templaterolled.psd) -->
              <script type="text/javascript">
              <!--

              function newwindow(name)
              {
              window.open(name,'','width=1024,height=683,resizable=no,scrollbars=0,left=0,right=0');
              }

              // -->
              </script>
              <!-- ImageReady Preload Script (templaterolled.psd) -->
              <SCRIPT TYPE="text/javascript">
              <!--

              function newImage(arg) {
              if (document.images) {
              rslt = new Image();
              rslt.src = arg;
              return rslt;
              }
              }

              function changeImages() {
              if (document.images && (preloadFlag == true)) {
              for (var i=0; i<changeImages.arguments.length; i+=2) {
              document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
              }
              }
              }

              var preloadFlag = false;
              function preloadImages() {
              if (document.images) {
              template_05_over = newImage("images/template_05-over.png");
              template_09_over = newImage("images/template_09-over.png");
              template_11_over = newImage("images/template_11-over.png");
              template_12_over = newImage("images/template_12-over.png");
              template_13_over = newImage("images/template_13-over.png");
              template_16_over = newImage("images/template_16-over.png");
              template_17_over = newImage("images/template_17-over.png");
              template_18_over = newImage("images/template_18-over.png");
              template_24_over = newImage("images/template_24-over.png");
              preloadFlag = true;
              }
              }

              // -->
              </script>
              <!-- End Preload Script -->
              <link rel="stylesheet" href="style.css">
              <style type="text/css">
              <!--
              .style1 {font-size: 14px}
              .style2 {font-size: 14}
              .style3 {font-size: 10px}
              -->
              </style>
              </head>
              <body background="bg1.jpg" marginwidth="0" marginheight="0" onLoad="preloadImages();">
              <!-- ImageReady Slices (templaterolled.psd) -->
              <table id="Table_01" align="center" width="801" height="0" border="0" cellpadding="0" cellspacing="0">
              <tr valign="top">
              <td style="padding:0px;margin:0px;"colspan="2" valign="top">
              <img src="images/template_01.png" width="177" height="10" alt="" align="top"></td>
              <td style="padding:0px;margin:0px;" colspan="6" rowspan="2" valign="top">
              <table border="0" background="images/template_02.png" width="623" height="137" alt="">
              <tr valign="top">
              <td style="padding:0px;margin:0px;" valign="top"><center><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="505" height="141" title="Header"></center>
                            <param name="movie" value="images/Movie1.swf">
                            <param name="quality" value="high">
                            <embed src="images/Movie1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="505" height="141"></embed>
                </object></td>
              </tr>
              </table></td>
              </tr>
              <tr valign="top">
              <td style="padding:0px;margin:0px;" colspan="2" rowspan="2" valign="top"><img src="images/AfricaCallingLogo.JPG" width="177" height="131" align="top"></td>
              </tr>
              <tr valign="top">
              <td style="padding:0px;margin:0px;" colspan="6" valign="top">
              <img src="images/template_04.png" width="623" height="4" alt="" align="top"></td>
              </tr>
              <tr valign="top">
              <td style="padding:0px;margin:0px;" colspan="3" valign="top">
              <a href="index.php"
              onmouseover="changeImages('template_05', 'images/template_05-over.png'); return true;"
              onmouseout="changeImages('template_05', 'images/template_05.png'); return true;"
              onmousedown="changeImages('template_05', 'images/template_05-over.png'); return true;"
              onmouseup="changeImages('template_05', 'images/template_05-over.png'); return true;">
              <img name="template_05" src="images/template_05.png" width="220" height="60" border="0" alt="" align="top"></a></td>
              <td width="365" rowspan="18" style="padding:0px;margin:0px;">
              <table border="0" background="images/template_06.png" width="353" height="100%" alt="">
              <tr valign="top">
              <td style="padding:0px;margin:0px;" valign="top"><center>
                <img src="images/toursheading.png" width="91" height="42" align="top">
              </center>  
                <a href="exclusivesafaris.php"><img src="images/eslink.png" alt="Exclusive Safaris" width="160" height="160" border="0" align="top"></a><a href="kilimanjarohikes.php"><img src="images/khlink.png" alt="Kilimanjaro Hikes" width="160" height="160" border="0" align="top"><br>
                            </a><a href="mokorosafaris.php"><img src="images/mslink.png" alt="Mokoro Safaris" width="160" height="160" border="0" align="top"></a> <a href="overlandtours.php"><img src="images/otlink.png" alt="Overland Tours" width="160" height="160" border="0" align="top"><br>
                                                      </a><a href="selfdrivetours.php"><img src="images/sdplink.png" alt="Self Drive Packages" width="160" height="160" border="0" align="top"></a> <a href="volunteerprojects.html"><img src="images/vplink.png" alt="Volunteer Packages" width="160" height="160" border="0" align="top"><br>
                                                                    </a><a href="walkingsafaris.php"><img src="images/wslink.png" alt="Walking Safari" width="160" height="160" border="0" align="top"></a> <a href="canoesafaris.php"><img src="images/cslink.png" alt="Canoe Safari" width="160" height="160" border="0" align="top"><br>
                                                                                  </a><a href="campingsafaris.php"><img src="images/caslink.png" alt="Camping Safari" width="160" height="160" border="0" align="top"></a> <a href="adrenalineaddiction.php"><img src="images/adlink.png" alt="Adrenaline Addiction" width="160" height="160" border="0" align="top"></a><br>
                            <a href="sharkcagediving.php"><img src="images/scdlink.png" alt="Shark Cage Diving" width="160" height="160" border="0" align="top"></a> <a href="kayakingholidays.php"><img src="images/kahlink.png" alt="Kayaking holidays" width="160" height="160" border="0" align="top"></a><br>
                            <a href="familyholidays.php"><img src="images/fhlink.png" alt="Family Holidays" width="160" height="160" border="0" align="top"></a> <a href="honeymoon.php"><img src="images/honarr.png" alt="honeymoon arrangements" width="160" height="160" border="0" align="top"><br>
                                          </a><a href="fifaworldcup.php">
                            <center>
                              <img src="images/fifalink.png" alt="Fifa 2010" width="160" height="160" border="0" align="top">
                            </center>
                            </a>   <br>
                  <br>
                 <center>
                    </center></tr>
                </table>
                </td>
              <td style="padding:0px;margin:0px;" colspan="3" rowspan="6" valign="top">
              <table border="0" cellpadding="10px" background="images/template_07.png" width="213" height="0" alt="">
              <tr valign="top">
              <td width="189" height="237" valign="top" style="padding:0px;margin:0px;"><p>&nbsp;</p>
                <p>&nbsp;</p>
                <p align="center" class="style6"><span class="style1"><span class="style2"><span class="style3"><a href="volunteerprojects.html">10%   off Volunteer Projects</a></span></span></span></p>
                <p align="center" class="style6 style3"><a href="honeymoon.html">10%   off Honeymoon Packages</a></p>
                <p align="center" class="style6 style3"><a href="fifaworldcup.html">FIFA   World Cup Specials</a></p>
                <p align="center" class="style6"><span class="style3"><a href="services.php">Crazy   Cape Town Special</a></span></p>   </td>
              </tr>
                </table>
                </td>
              <td width="16" rowspan="20" valign="top" style="padding:0px;margin:0px;">
              <img src="images/template_08.png" width="15" height="835" alt="" align="top"></td>
              </tr>
              <tr valign="top">
              <td style="padding:0px;margin:0px;" colspan="3" valign="top">
              <a href="travelpolicy.php"
              onmouseover="changeImages('template_09', 'images/template_09-over.png'); return true;"
              onmouseout="changeImages('template_09', 'images/template_09.png'); return true;"
              onmousedown="changeImages('template_09', 'images/template_09-over.png'); return true;"
              onmouseup="changeImages('template_09', 'images/template_09-over.png'); return true;">
              <img name="template_09" src="images/template_09.png" width="220" height="58" border="0" alt="" align="top"></a></td>

              </tr>
              <tr>
              <td style="padding:0px;margin:0px;" colspan="3" valign="top">
              <img src="images/template_10.png" width="220" height="1" alt="" align="top"></td>

              </tr>
              <tr valign="top">
              <td style="padding:0px;margin:0px;" colspan="3" valign="top">
              <a href="tours.html"
              onmouseover="changeImages('template_11', 'images/template_11-over.png'); return true;"
              onmouseout="changeImages('template_11', 'images/template_11.png'); return true;"
              onmousedown="changeImages('template_11', 'images/template_11-over.png'); return true;"
              onmouseup="changeImages('template_11', 'images/template_11-over.png'); return true;">
              <img name="template_11" src="images/template_11.png" width="220" height="59" border="0" alt="" align="top"></a></td>

              </tr>
              <tr valign="top">
              <td style="padding:0px;margin:0px;" colspan="3" valign="top">
              <a href="services.php"
              onmouseover="changeImages('template_12', 'images/template_12-over.png'); return true;"
              onmouseout="changeImages('template_12', 'images/template_12.png'); return true;"
              onmousedown="changeImages('template_12', 'images/template_12-over.png'); return true;"
              onmouseup="changeImages('template_12', 'images/template_12-over.png'); return true;">
              <img name="template_12" src="images/template_12.png" width="220" height="62" border="0" alt="" align="top"></a></td>

              </tr>
              <tr valign="top">
              <td style="padding:0px;margin:0px;" colspan="3" rowspan="3" valign="top">
              <a href="http://exalon.co.za/africall/blog/?page_id=21"
              onmouseover="changeImages('template_13', 'images/template_13-over.png'); return true;"
              onmouseout="changeImages('template_13', 'images/template_13.png'); return true;"
              onmousedown="changeImages('template_13', 'images/template_13-over.png'); return true;"
              onmouseup="changeImages('template_13', 'images/template_13-over.png'); return true;">
              <img name="template_13" src="images/template_13.png" width="220" height="59" border="0" alt="" align="top"></a></td>

              </tr>
              <tr valign="top">
              <td style="padding:0px;margin:0px;" colspan="3" valign="top">
              <img src="images/template_14.png" width="212" alt="" align="top"></td>

              </tr>
              <tr valign="top">
              <td style="padding:0px;margin:0px;" colspan="3" rowspan="4" valign="top">
              <table boder="0" cellpadding="10px" background="images/template_15.png" width="213" height="0" alt="">
              <tr valign="top">
              <td width="187" height="228" valign="top" style="padding:0px;margin:0px;"></td>
              </tr>
                </table>
                </td>

              </tr>
              <tr valign="top">
              <td style="padding:0px;margin:0px;" colspan="3" valign="top">
              <a href="http://exalon.co.za/africall/blog/?page_id=16"
              onmouseover="changeImages('template_16', 'images/template_16-over.png'); return true;"
              onmouseout="changeImages('template_16', 'images/template_16.png'); return true;"
              onmousedown="changeImages('template_16', 'images/template_16-over.png'); return true;"
              onmouseup="changeImages('template_16', 'images/template_16-over.png'); return true;">
              <img name="template_16" src="images/template_16.png" width="220" height="80" border="0" alt="" align="top"></a></td>

              </tr>
              <tr valign="top">
              <td style="padding:0px;margin:0px;" colspan="3" valign="top">
              <a href="http://www.exalon.co.za/africall/blog"
              onmouseover="changeImages('template_17', 'images/template_17-over.png'); return true;"
              onmouseout="changeImages('template_17', 'images/template_17.png'); return true;"
              onmousedown="changeImages('template_17', 'images/template_17-over.png'); return true;"
              onmouseup="changeImages('template_17', 'images/template_17-over.png'); return true;">
              <img name="template_17" src="images/template_17.png" width="220" height="61" border="0" alt="" align="top"></a></td>

              </tr>
              <tr valign="top">
              <td style="padding:0px;margin:0px;" colspan="3" rowspan="4" valign="top">
              <a href="newsandspecials.php"
              onmouseover="changeImages('template_18', 'images/template_18-over.png'); return true;"
              onmouseout="changeImages('template_18', 'images/template_18.png'); return true;"
              onmousedown="changeImages('template_18', 'images/template_18-over.png'); return true;"
              onmouseup="changeImages('template_18', 'images/template_18-over.png'); return true;">
              <img name="template_18" src="images/template_18.png" width="220" height="68" border="0" alt="" align="top"></a></td>

              </tr>
              <tr valign="top">
              <td style="padding:0px;margin:0px;" colspan="3" valign="top">
              <img src="images/template_19.png" width="212" height="7" alt="" align="top"></td>

              </tr>
              <tr valign="top">
              <td style="padding:0px;margin:0px;" colspan="3" valign="top">
              <img src="images/template_20.png" width="212" height="2" alt="" align="top"></td>

              </tr>
              <tr valign="top">
              <td width="23" rowspan="5" valign="top" style="padding:0px;margin:0px;">
              <img src="images/template_21.png" width="22" height="320" alt="" align="top"></td>
              <td width="167" rowspan="4" valign="top" style="padding:0px;margin:0px;">
              <img src="images/template_22.png" width="161" height="302" alt="" align="top">   </td>
              <td width="29" rowspan="5" valign="top" style="padding:0px;margin:0px;">
              <img src="images/template_23.png" width="29" height="320" alt="" align="top"></td>

              </tr>
              <tr valign="top">
              <td style="padding:0px;margin:0px;" colspan="3" valign="top">
              <a href="contactus.php"
              onmouseover="changeImages('template_24', 'images/template_24-over.png'); return true;"
              onmouseout="changeImages('template_24', 'images/template_24.png'); return true;"
              onmousedown="changeImages('template_24', 'images/template_24-over.png'); return true;"
              onmouseup="changeImages('template_24', 'images/template_24-over.png'); return true;">
              <img name="template_24" src="images/template_24.png" width="220" height="71" border="0" alt="" align="top"></a></td>

              </tr>
              <tr valign="top">
              <td width="172" valign="top" style="padding:0px;margin:0px;">
              <img src="images/template_25.png" width="172" height="178" alt="" align="top"></td>
              <td style="padding:0px;margin:0px;" colspan="2" rowspan="6" valign="top">
              <img src="images/template_26.png" width="48" height="264" alt="" align="top"></td>

              </tr>
              <tr valign="top">
              <td style="padding:0px;margin:0px;" rowspan="6" valign="top">
              <img src="images/template_27.png" width="172" height="102" alt="" align="top"></td>

              </tr>
              <tr valign="top">
              <td style="padding:0px;margin:0px;" valign="top">
              <img src="images/template_28.png" width="161" height="18" alt="" align="top"></td>

              </tr>
              <tr valign="top">
              <td style="padding:0px;margin:0px;" colspan="4">
              <img src="images/template_29.png" width="565" height="3" alt="" align="top"></td>

              </tr>
              <tr valign="top">
              <td style="padding:0px;margin:0px;" colspan="4" rowspan="2" valign="top">
              <img src="images/template_30.png" width="565" height="22" alt="" align="top"></td>

              </tr>
              <tr valign="top">
              <td style="padding:0px;margin:0px;" rowspan="2">
              <img src="images/template_31.png" width="15" height="24" alt="" align="top"></td>

              </tr>
              <tr valign="top">
              <td style="padding:0px;margin:0px;" colspan="6">
              <img src="images/template_32.png" width="613" height="16" alt="" align="top"></td>

              </tr>

              </table>
              <!-- End ImageReady Slices -->
              </body>
              </html>