Skip navigation
Currently Being Moderated

How do I remove a space between tables?

May 5, 2010 2:35 PM

In dreamweaver there appears to be no space and the page looks fine, however when I go into

internet explorer there is a gap between the tables.  I want my image to be

at the bottom of my table, resting on the footer.

 

I have tried for hours to resolve this and I can't, there is still a space between my HR helpline image and my footer.

I have set all the borders and cell spacing to 0 but nothing seems to work.
I have not yet got my web site on line so can't tell you what the URL is, but when I go and view source from the internet explorer this is the code:
<td bgcolor="#FFFFFF"> </td>
    <td width="430" height="200" align="center" valign="bottom" bgcolor="#FFFFFF"><!-- InstanceBeginEditable name="EditRegion2" -->
    <p><img src="../frustrated helpline.jpg" alt="HR helpline" width="331" height="282" border="0" longdesc="http://HR telephone helpline" /><!-- InstanceEndEditable --></td>
  </tr>
</table>
<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr bgcolor="#FFFFFF">
    <td valign="top"><img src="images/Core HR Web footer 900.jpg" width="900" height="81" alt="london surrey berkshire kingston" longdesc="http://footer" /></td>
  </tr>
</table>

Thanks if anyone can help, I am really new to this.
Helen
 
Replies
  • Currently Being Moderated
    May 5, 2010 3:21 PM   in reply to Helen Marino

    Code fragments are not much help.

     

    Please upload your page somewhere and provide a link for us,

    or post ALL relevant HTML & CSS code

     
    |
    Mark as:
  • Currently Being Moderated
    May 6, 2010 4:19 PM   in reply to Helen Marino
    1. Open your page in DW Code View.  Highlight code (Ctrl+A), Copy (Ctrl+C).

    2. Click the DW forums Insert arrows >> Syntax Highlighting, Plain.
    3. Paste your HTML code (Ctrl+V) into the code box.
    4. Repeat same for CSS code in external stylesheets.

     

    This is what code looks like:
    
    <!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" />

     

     

     

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

     
    |
    Mark as:
  • Currently Being Moderated
    May 7, 2010 12:29 PM   in reply to Helen Marino

    I'm not sure I understand your problem.  This is your page as viewed in IE7.

    HR-London.jpg

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

     
    |
    Mark as:
  • Currently Being Moderated
    May 7, 2010 1:04 PM   in reply to Helen Marino

    Add CSS rule to remove image border

     

    img
    {  border-style: none;
    }

     
    |
    Mark as:
  • Currently Being Moderated
    May 7, 2010 1:52 PM   in reply to Helen Marino

    Copy and Paste this code into a NEW, blank document in Code View.

    Template comments removed so I could edit your code.

     

    <!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>HR Consultancy in Kingston, London</title>
    <style type="text/css">
    
    body {background-color: #FFF;}
    
    body,td,th {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    text-align: justify;
    }
    
    /**border added to table cells to see them, you can remove this**/
    td {border: 1px solid #333}
    
    /**styles added to paragraphs**/
    p {
    margin:0;
    padding: 10px 12px 0 12px;
    line-height: 1.5;
    }
    
    a:link {
    color: #000;
    text-decoration: none;
    }
    a:visited {
    text-decoration: none;
    color: #000;
    }
    a:hover {
    text-decoration: none;
    color: #00AF13;
    }
    a:active {
    text-decoration: none;
    color: #00AF13;
    }
    
    </style>
    </head>
    
    <body>
    <!--Header-->
    <table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
    <td width="900"><img src="images/Core HR web banner (900).jpg" alt="banner" width="900" height="100" /></td>
    </tr>
    </table>
    
    <!--Menu-->
    <table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr bgcolor="#FFFFFF">
    <td width="74"><h3><a href="index.html"> home</a></h3></td>
    <td width="208"><h3><a href="contracts.html">employment contracts</a></h3></td>
    <td width="103"><h3><a href="interviews.html">interviews</a></h3></td>
    <td width="89"><h3><a href="helpline.html">helpline</a></h3></td>
    <td width="99"><h3><a href="services.html">services</a></h3></td>
    <td width="97"><h3><a href="tribunals.html">tribunals</a></h3></td>
    <td width="86"><h3><a href="clients.html">clients</a></h3></td>
    <td width="110"><h3><a href="contact.html"> contact us</a></h3></td>
    </tr>
    </table>
    
    <!--Content and Footer-->
    <table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
    <td width="430" height="200" valign="top" bgcolor="#FFFFFF">
    <p>Modern businesses demand clear, concise and up-to-the-minute  HR advice. After all, employee problems can cost both time and money. This is  where our HR telephone helpline can prove invaluable.</p>
    <p>Whether it's the legal ins-and-outs of disciplinary  procedures or employee grievances, we can call upon up-to-the-minute knowledge,  ensuring that you remain on the right side of the law and in line with best  practice. What's more, we'll do all the hard work and research for you,  enabling your people to concentrate on what they do best.</p>
    </td>
    <td width="331" align="right" valign="bottom" bgcolor="#CCCCCC">
    <img src="../frustrated helpline.jpg" alt="HR helpline" width="331" height="282" border="0" longdesc="http://HR telephone helpline" /></td>
    </tr>
    <tr bgcolor="#CCCCCC">
    <td colspan="2" width="900" valign="top"><img src="images/Core HR Web footer 900.jpg" width="900" height="81" alt="london surrey berkshire kingston" longdesc="http://footer" /></td>
    </tr>
    </table>
    
    </body>
    </html>

     

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

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 25, 2013 5:50 AM   in reply to Nancy O.

    Hi Nancy,

     

    I know this is an old thread; but a new problem for me. I am using CS5, for Apple Computer, am also trying to stack one table on top of another, and am also getting extra space between the tables when the page is viewed with a browser- but I can't see the "extra space" when I am looking at it in Dreamweaver. I have been looking at the code you sent to Helen (and I too have pasted it into a dummy page, and indeed it doesn't realize a space between your different tables when viewed in a browser), but I have not been able to figure out what it is about your code that makes the difference.  The added code (below) just seems to highlight the different sections of the page when viewed with the browser, but it doesn't remove the space between tables ... {and I see that I can set the 1px to 0px to remove this highlighting effect})

     

    /**border added to table cells to see them, you can remove this**/

    td {border: 1px solid #333}

     

     

    /**styles added to paragraphs**/

    p {

    margin:0;

    padding: 10px 12px 0 12px;

    line-height: 1.5;

    }

     

    Is it possible for you to point out what it is that you did, that one generally needs to do, in order to construct pages with multiple tables and not have this extra space?

     

    Thanks,

    ART

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 25, 2013 6:00 AM   in reply to awl1l

    HI Again

     

    here is the code for my page

     

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

    <style type="text/css">

    <!--

    img {margin:0; padding:0;}

    -->

    </style>

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

    <title>ELISABETH SLOAN, ARCHITECT</title>

    <style type="text/css">

    <!--

    body {

              background-color: #FFFFFF;

              padding: 0px;

              width: 1000px;

              clip: rect(0px,auto,0px,auto);

              margin-top: 0px;

              margin-right: auto;

              margin-bottom: 0px;

              margin-left: auto;

              border-top-color: #FFF;

              border-right-color: #FFF;

              border-bottom-color: #FFF;

              border-left-color: #FFF;

    }

    body,td,th {

              color: #6A6A6A;

              font-size: 18px;

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

    }

    .FirstLetterBigger {

              font-size: 42px;

    }

    .Pt17 {

              font-size: 17px;

              text-align: center;

    }

    .Front18 {

              font-size: 19px;

    }

    a:link {

              color: #385399;

    }

    a:visited {

              color: #0000FF;

    }

    .FourPTszbtwnchars {

              font-size: 4px;

    }

    .FirstLetter36 {

              font-size: 36px;

    }

    .CONTAINER {

              width: 1000px;

              margin-right: auto;

              margin-left: auto;

    }

    /**border added to table cells to see them, you can remove this**/

    td {border: 0px solid #333}

     

     

    /**styles added to paragraphs**/

    p {

    margin:0;

    padding: 10px 12px 0 12px;

    line-height: 1.5;

    }

    -->

    </style>

    <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="BOX" onload="MM_preloadImages('Liz ARCHITECT Photos/1HomePageArchPics/FinalHomePageTopBanner-Pics/Laub_600W-roll.j pg','Liz ARCHITECT Photos/1HomePageArchPics/FinalHomePageTopBanner-Pics/Grunlan-P4062238 _600W-roll.jpg','Liz ARCHITECT Photos/1HomePageArchPics/FinalHomePageTopBanner-Pics/Mahoney_600W-rol l.jpg','Liz ARCHITECT Photos/1HomePageArchPics/FinalHomePageTopBanner-Pics/Harckham-back_Sn ow 1075_600W-roll.jpg')">

    <span class="CONTAINER"></span>

     

     

    <table width="1000" border="0" cellpadding="0" cellspacing="0">

      <tr>

        <td width="22" height="20" bgcolor="#84949D"> </td>

        <td width="22" bgcolor="#84949D"> </td>

        <td height="20" bgcolor="#84949D"> </td>

        <td height="20" bgcolor="#84949D"> </td>

        <td width="200" height="20" bgcolor="#84949D"> </td>

        <td height="20" bgcolor="#84949D"> </td>

        <td width="200" height="20" bgcolor="#84949D"> </td>

        <td height="20" bgcolor="#84949D"> </td>

        <td width="200" height="20" bgcolor="#84949D"> </td>

        <td width="22" height="20" bgcolor="#84949D"> </td>

        <td width="22" bgcolor="#84949D"> </td>

      </tr>

      <tr>

        <td width="22" height="45" bgcolor="#84949D"> </td>

        <td width="22" height="45" bgcolor="#B1C7D3"> </td>

        <td width="200" height="45" bgcolor="#B1C7D3"><div align="center">Practice</div></td>

        <td width="36" height="45" bgcolor="#B1C7D3"> </td>

        <td width="200" height="45" bgcolor="#B1C7D3"><div align="center">Portfolio</div></td>

        <td width="36" height="45" bgcolor="#B1C7D3"> </td>

        <td width="200" height="45" bgcolor="#B1C7D3"><p align="center"><a href="Links.html">Links</a></p></td>

        <td width="36" height="45" bgcolor="#B1C7D3"> </td>

        <td width="200" height="45" bgcolor="#B1C7D3"><div align="center"><a href="http://www.lizsloan-architect.com/">Home</a></div></td>

        <td width="22" height="45" bgcolor="#B1C7D3"> </td>

        <td width="22" height="45" bgcolor="#84949D"> </td>

      </tr>

      <tr>

        <td width="22" height="150" bgcolor="#84949D"> </td>

        <td width="22" height="150" bgcolor="#B1C7D3"> </td>

        <td width="200" height="150" bgcolor="#B1C7D3"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','Liz ARCHITECT Photos/1HomePageArchPics/FinalHomePageTopBanner-Pics/Laub_600W-roll.j pg',1)"><img src="Liz ARCHITECT Photos/1HomePageArchPics/FinalHomePageTopBanner-Pics/Laub_150-300W-BW .jpg" name="Laub Project" width="200" height="150" border="0" align="absmiddle" id="Image6" /></a></td>

        <td width="36" height="150" bgcolor="#B1C7D3"> </td>

        <td width="200" height="150" bgcolor="#B1C7D3"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Grunlund Project','','Liz ARCHITECT Photos/1HomePageArchPics/FinalHomePageTopBanner-Pics/Grunlan-P4062238 _600W-roll.jpg',1)"><img src="Liz ARCHITECT Photos/1HomePageArchPics/FinalHomePageTopBanner-Pics/Grunlan-P4062238 _150-300W-BW.jpg" name="Grunlund Project" width="200" height="150" border="0" align="absmiddle" id="Grunlund Project" /></a></td>

        <td width="36" height="150" bgcolor="#B1C7D3"> </td>

        <td width="200" height="150" bgcolor="#B1C7D3"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Mahoney Project','','Liz ARCHITECT Photos/1HomePageArchPics/FinalHomePageTopBanner-Pics/Mahoney_600W-rol l.jpg',1)"><img src="Liz ARCHITECT Photos/1HomePageArchPics/FinalHomePageTopBanner-Pics/Mahoney_150-300W -BW.jpg" name="Mahoney Project" width="200" height="150" border="0" id="Mahoney Project" /></a></td>

        <td width="36" height="150" bgcolor="#B1C7D3"> </td>

        <td width="200" height="150" bgcolor="#B1C7D3"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Harckham Project','','Liz ARCHITECT Photos/1HomePageArchPics/FinalHomePageTopBanner-Pics/Harckham-back_Sn ow 1075_600W-roll.jpg',1)"><img src="Liz ARCHITECT Photos/1HomePageArchPics/FinalHomePageTopBanner-Pics/Harckham-back_Sn ow 1075_150-300W-BW.jpg" name="Harckham Project" width="200" height="150" border="0" id="Harckham Project" /></a></td>

        <td width="22" height="150" bgcolor="#B1C7D3"> </td>

        <td width="22" height="150" bgcolor="#84949D"> </td>

      </tr>

    </table>

    <table width="1000" border="0" cellpadding="0" cellspacing="0">

      <tr>

        <td height="21" bgcolor="#84949D"> </td>

        <td bgcolor="#B1C7D3"> </td>

        <td width="250" height="50" rowspan="6" bgcolor="#B1C7D3"><img src="Index-Extra_Files/ArtFROMflashLOGOgrab.jpg" width="235" height="217" alt="LOGO" /></td>

        <td height="21" valign="top" bgcolor="#B1C7D3"> </td>

        <td height="21" colspan="2" valign="bottom" bgcolor="#B1C7D3"> </td>

        <td height="21" valign="top" bgcolor="#B1C7D3"> </td>

        <td height="21" valign="top" bgcolor="#B1C7D3"> </td>

        <td height="21" valign="top" bgcolor="#84949D"> </td>

      </tr>

      <tr>

        <td height="42" bgcolor="#84949D"> </td>

        <td bgcolor="#B1C7D3"> </td>

        <td height="42" valign="top" bgcolor="#B1C7D3"> </td>

        <td height="42" colspan="2" valign="bottom" bgcolor="#B1C7D3"> </td>

        <td height="42" valign="top" bgcolor="#B1C7D3"> </td>

        <td height="42" valign="top" bgcolor="#B1C7D3"> </td>

        <td height="42" valign="top" bgcolor="#84949D"> </td>

      </tr>

      <tr>

        <td width="22" height="41" bgcolor="#84949D"> </td>

        <td width="22" bgcolor="#B1C7D3"> </td>

        <td height="41" valign="top" bgcolor="#B1C7D3"> </td>

        <td height="41" colspan="2" valign="bottom" bgcolor="#B1C7D3"><h2><span class="FirstLetter36">E</span><span class="Pt17"> </span>L<span class="Pt17"> </span>I<span class="Pt17"> </span>S<span class="Pt17"> </span>A<span class="Pt17"> </span>B<span class="Pt17"> </span>E<span class="Pt17"> </span>T<span class="Pt17"> </span>H<span class="Pt17"> </span> <span class="FirstLetter36">S</span><span class="Pt17"> </span>L<span class="Pt17"> </span>O<span class="Pt17"> </span>A<span class="Pt17"> </span>N,<span class="Pt17"> </span> <span class="FirstLetter36">A</span><span class="Pt17"> </span>R<span class="Pt17"> </span>C<span class="Pt17"> </span>H<span class="Pt17"> </span>I<span class="Pt17"> </span>T<span class="Pt17"> </span>E<span class="Pt17"> </span>C<span class="Pt17"> </span>T</h2></td>

        <td height="41" valign="top" bgcolor="#B1C7D3"> </td>

        <td width="22" height="41" valign="top" bgcolor="#B1C7D3"> </td>

        <td width="23" height="41" valign="top" bgcolor="#84949D"> </td>

      </tr>

      <tr>

        <td width="22" height="40" bgcolor="#84949D"> </td>

        <td width="22" height="40" bgcolor="#B1C7D3"> </td>

        <td height="40" bgcolor="#B1C7D3"> </td>

        <td width="356" height="40" bgcolor="#B1C7D3">Tel:  434.928.8288    <a href="http://www.LIZSLOAN-ARCHITECT.COM">lizsloan-architect.com</a></td>

        <td width="218" height="40" colspan="-1" bgcolor="#B1C7D3"><a href="mailto:liz@lizsloan-architect.com">liz@lizsloan-architect.com</a></td>

        <td height="40" bgcolor="#B1C7D3"> </td>

        <td width="22" height="40" bgcolor="#B1C7D3"> </td>

        <td width="23" height="40" bgcolor="#84949D"> </td>

      </tr>

      <tr>

        <td width="22" height="40" bgcolor="#84949D"> </td>

        <td width="22" height="40" bgcolor="#B1C7D3"> </td>

        <td height="40" bgcolor="#B1C7D3"> </td>

        <td height="40" colspan="2" bgcolor="#B1C7D3"><div align="center" class="Pt17">

          <div align="center"><span class="Front18">2</span>024  <span class="Front18">M</span>INOR ROAD  |  <span class="Front18">C</span>HARLOTTESVILLE, <span class="Front18"> V</span>IRGINIA  22903</div>

        </div></td>

        <td height="40" bgcolor="#B1C7D3"> </td>

        <td width="22" height="40" bgcolor="#B1C7D3"> </td>

        <td width="23" height="40" bgcolor="#84949D"> </td>

      </tr>

      <tr>

        <td width="22" height="30" bgcolor="#84949D"> </td>

        <td width="22" bgcolor="#B1C7D3"> </td>

        <td width="29" bgcolor="#B1C7D3"> </td>

        <td colspan="2" bgcolor="#B1C7D3"><h2> </h2></td>

        <td width="58" bgcolor="#B1C7D3"> </td>

        <td width="22" bgcolor="#B1C7D3"> </td>

        <td width="23" bgcolor="#84949D"> </td>

      </tr>

    </table>

    <table width="1000" border="0" cellpadding="0" cellspacing="0">

      <tr>

        <td width="23" height="500" bgcolor="#84949D"> </td>

        <td width="68" bgcolor="#B1C7D3"> </td>

        <td width="816" height="500" bgcolor="#B1C7D3"><div align="center">

         

     

     

    <!-- Begin DWUser_EasyRotator -->

          <script type="text/javascript" src="http://c520866.r66.cf2.rackcdn.com/1/js/easy_rotator.min.js"></script>

          <div class="dwuserEasyRotator" style="width: 800px; height: 600px; position:relative; text-align: left;" data-erconfig="{autoplayEnabled:true, autoplayDelay:6100, lpp:'102-105-108-101-58-47-47-47-85-115-101-114-115-47-97-114-116-104 -117-114-108-105-99-104-116-101-110-98-101-114-103-101-114-47-68-111-9 9-117-109-101-110-116-115-47-69-97-115-121-82-111-116-97-116-111-114-8 0-114-101-118-105-101-119-47-112-114-101-118-105-101-119-95-115-119-10 2-115-47', wv:1, audio_showController:false, pro_infiniteLoop:true}" data-ername="BottomRotatorSloan">

            <div data-ertype="content" style="display: none;"><ul data-erlabel="Main Category">

              <li>

                        <img class="main" src="Liz ARCHITECT Photos/1HomePageArchPics/SlideShow_HomePage/Graves057_BackView.jpg" /> <img class="thumb" src="Liz ARCHITECT Photos/1HomePageArchPics/SlideShow_HomePage/Graves057_BackView.jpg" />

              </li>

              <li>

                        <img class="main" src="Liz ARCHITECT Photos/1HomePageArchPics/SlideShow_HomePage/Grunlan-P4062238_800.jpg" /> <img class="thumb" src="Liz ARCHITECT Photos/1HomePageArchPics/SlideShow_HomePage/Grunlan-P4062238_800.jpg" />

              </li>

              <li>

                        <img class="main" src="Liz ARCHITECT Photos/1HomePageArchPics/SlideShow_HomePage/GrunlundBack.jpg" /> <img class="thumb" src="Liz ARCHITECT Photos/1HomePageArchPics/SlideShow_HomePage/GrunlundBack.jpg" />

              </li>

              <li>

                        <img class="main" src="Liz ARCHITECT Photos/1HomePageArchPics/SlideShow_HomePage/Harckham-back_Snow 1075_800.jpg" /> <img class="thumb" src="Liz ARCHITECT Photos/1HomePageArchPics/SlideShow_HomePage/Harckham-back_Snow 1075_800.jpg" />

              </li>

              <li>

                        <img class="main" src="Liz ARCHITECT Photos/1HomePageArchPics/SlideShow_HomePage/Harckham-front-snow_1092. jpg" /> <img class="thumb" src="Liz ARCHITECT Photos/1HomePageArchPics/SlideShow_HomePage/Harckham-front-snow_1092. jpg" />

              </li>

              <li>

                        <img class="main" src="Liz ARCHITECT Photos/1HomePageArchPics/SlideShow_HomePage/Laub_800.jpg" /> <img class="thumb" src="Liz ARCHITECT Photos/1HomePageArchPics/SlideShow_HomePage/Laub_800.jpg" />

              </li>

              <li>

                        <img class="main" src="Liz ARCHITECT Photos/1HomePageArchPics/SlideShow_HomePage/Mahoney_800.jpg" /> <img class="thumb" src="Liz ARCHITECT Photos/1HomePageArchPics/SlideShow_HomePage/Mahoney_800.jpg" />

              </li>

              <li>

                        <img class="main" src="Liz ARCHITECT Photos/1HomePageArchPics/SlideShow_HomePage/Payne_450.jpg" /> <img class="thumb" src="Liz ARCHITECT Photos/1HomePageArchPics/SlideShow_HomePage/Payne_450.jpg" />

              </li>

              <li>

                        <img class="main" src="Liz ARCHITECT Photos/1HomePageArchPics/SlideShow_HomePage/Scott ElevP3312150_800.jpg" /> <img class="thumb" src="Liz ARCHITECT Photos/1HomePageArchPics/SlideShow_HomePage/Scott ElevP3312150_800.jpg" />

              </li>

              <li>

                        <img class="main" src="Liz ARCHITECT Photos/1HomePageArchPics/SlideShow_HomePage/Studio Quandt P3312137_800.jpg" /> <img class="thumb" src="Liz ARCHITECT Photos/1HomePageArchPics/SlideShow_HomePage/Studio Quandt P3312137_800.jpg" />

              </li>

    </ul>

    </div>

            <div data-ertype="layout" data-ertemplatename="NONE" style="">

              <div class="erimgMain" style="position: absolute; left:0;right:0;top:0;bottom:70px;" data-erconfig="{___numTiles:3, scaleMode:'fillArea', imgType:'main', __loopNextButton:false, arrowButtonMode:'rollover'}">

                <div class="erimgMain_slides" style="position: absolute; left:0px; top:0; bottom:0; right:0px;">

                  <div class="erimgMain_slide">

                    <div class="erimgMain_img" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0;"></div>

                    <div class="erhideWhenNoText" style="background: #000; background: rgba(0,0,0,0.85); position: absolute; left: 0; right: 0; bottom: 0; padding: 5px; color: #FFF; font-family: Arial; font-size: 12px;">

                      <p class="erimgMain_title" style="padding: 0; margin: 0 0 3px 0; font-weight: bold;"></p>

                      <p class="erimgMain_desc" style="padding: 0 0 10px 0; margin: 0;"></p>

                    </div>

                  </div>

                </div>

                <div class="erimgMain_arrowLeft" style="position:absolute; left: 10px; top: 50%; margin-top: -15px;" data-erconfig="{image:'circleSmall', image2:'circleSmall'}"></div>

                <div class="erimgMain_arrowRight" style="position:absolute; right: 10px; top: 50%; margin-top: -15px;"></div>

              </div>

              <div class="erimgMain rotatorTileNav" style="position: absolute; left:0;right:0;bottom:0;height:80px;" data-erconfig="{numTiles:-1, scaleMode:'fillArea', imgType:'thumb', loopNextButton:false, arrowButtonMode:'rollover', __slideLinkEvent:'rollover'}">

                <div style="position: absolute; left: 0; top: 10px; right: 0; bottom: 0; background: #FFF;"></div>

                <div class="erimgMain_slides" style="position: absolute; left:0px; top:0; bottom:0; right:0px;">

                  <div class="erimgMain_slide">

                    <div class="erimgMain_img" style="position: absolute; left: 0; right: 0; top: 10px; bottom: 0; margin: 2px 1px;"></div>

                    <!-- <div class="" style="background: #555; position: absolute; left: 1px; right: 1px; top: 10px; bottom: 0; padding: 5px; color: #FFF; font-family: Arial; font-size: 12px; text-align: center;">

                                                                <p class="erimgMain_title" style="padding: 5px; margin: 0 0 3px 0; font-weight: bold;"></p>

                                                      </div> -->

                    <div class="selectionArrow visibleWhenSelected" style="position: absolute; top: 0; left: 50%; margin-left: -10px; width: 20px; height: 10px; background-image: url('http://easyrotator.s3.amazonaws.com/1/i/rotator/FFF_arrow10_export.png ');"></div>

                  </div>

                </div>

                <div class="erimgMain_arrowLeft" style="position:absolute; left: 60px; top: 50%; margin-top: -10px;" data-erconfig="{image:'circleSmall', image2:'circleSmall'}"></div>

                <div class="erimgMain_arrowRight" style="position:absolute; right: 60px; top: 50%; margin-top: -10px;"></div>

              </div>

              <div class="erabout erFixCSS3" style="color: #FFF; text-align: left; background: #000; background:rgba(0,0,0,0.93); border: 2px solid #FFF; padding: 20px; font: normal 11px/14px Verdana,_sans; width: 300px; border-radius: 10px; display:none;"> This <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/" target="_blank">jQuery slider</a> was created with the free <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/" target="_blank">EasyRotator</a> software from DWUser.com. <br />

                <br />

                Use WordPress? The free <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/wordpress/" target="_blank">EasyRotator for WordPress</a> plugin lets you create beautiful <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/wordpress/" target="_blank">WordPress sliders</a> in seconds. <br />

                <br />

                <a style="color:#FFF;" href="#" class="erabout_ok">OK</a></div>

              <noscript>

                Rotator powered by <a href="http://www.dwuser.com/easyrotator/">EasyRotator</a>, a free and easy jQuery slider builder from DWUser.com.  Please enable JavaScript to view.

              </noscript>

              <script type="text/javascript">/*Avoid IE gzip bug*/(function(b,c,d){try{if(!b[d]){b[d]="temp";var a=c.createElement("script");a.type="text/javascript";a.src="http://easyrotator.s3.amazonaws.com/1/js/nozip/easy_rotator.min.js";c.getElementsByTagName("head")[0].appendChild(a)}}catch(e){alert("Ea syRotator fail; contact support.")}})(window,document,"er_$144");</script>

            </div>

          </div>

        <!-- End DWUser_EasyRotator -->

     

     

        </div></td>

        <td width="74" height="500" bgcolor="#B1C7D3"> </td>

        <td width="23" bgcolor="#84949D"> </td>

      </tr>

    </table>

    <table width="1000" border="0" cellspacing="0" cellpadding="0">

      <tr>

        <td height="22" bgcolor="#84949D"> </td>

      </tr>

    </table>

    <p> </p>

    </body>

    </html>

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 25, 2013 8:34 AM   in reply to awl1l

    I don't recommend using tables for layouts except for tabular data like spreadsheets or charts.  The height property in tables is deprecated (obsolete).  Also, you don't need to express height because it's determined by content.

     

    By default, all browsers add their own margins & padding to every HTML element: h1, h2, h3, p, li, tables, div, etc....  To overcome this, you can use a CSS Reset method -- there are several to choose from below.  Or you can manually shore things up by adding margin:0; padding:0 to CSS selectors in your style sheet.

    http://cssresetr.com/

     

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points