6 Replies Latest reply on Apr 9, 2013 1:25 PM by dwdivazona

    Excessive line spacing in a table

    dwdivazona Level 1

      I am having issues with excessive spacing in the lines of my table. I have reduced cellPadding and cellSpacing to "0" but I still get an enormous amount of space between the lines. In DesignView, it looks the way I want it:

       

      design_view.PNG

       

      But in LiveView and in any browser, the spacing is too big:

       

      live_view.PNG

       

      Do I need to address this is CSS and if so, how do I address it?

        • 1. Re: Excessive line spacing in a table
          Jon Fritz II Adobe Community Professional & MVP

          Without seeing the code, it's hard to say exactly what's going on. However, if I had to guess, I would say that the element wrapping your text in each cell (likely a set of <p> tags) has the margin/padding on it and is causing the expansion.

           

          To get rid of the default <p> margin and padding that browsers add, you can add this to your css...

           

          table p {

               margin:0;

               padding:0;

          }

           

          This way, only the <p> tags that are also in a table lose their padding and margin.

           

          If that doesn't help, could you post a link to your page?

          • 2. Re: Excessive line spacing in a table
            dwdivazona Level 1

            That didn't seem to do the trick.

             

            The address is: zonaproperties.toscawebdesign.com/rentals.html

             

            Thanks for checking it out.

            • 3. Re: Excessive line spacing in a table
              Jon Fritz II Adobe Community Professional & MVP

              That is definitely the problem though. When I added in

               

              style="margin:0; padding:0;"

               

              To each of the first rows <p> tags, it fixed the issue. You must have something later in one of your  many .css files that is overriding it. (Is there any particular reason you have 8 different external .css files on that one simple page?)

               

              Try adding this as  to the <head> section as embedded css for that page...

               

              <style type="text/css">

              #apartments p {

                   margin:0;

                   padding:0;

              }

              </style>

               

               

              Then add the bold below to the <table> tag...

               

              <table id="apartments" width="674" border="0" cellspacing="0" cellpadding="0">

              • 4. Re: Excessive line spacing in a table
                dwdivazona Level 1

                Thanks so much for the detailed information. I tried it all but I can't seem to fix it. That page is based on a template so I had to add the inline style type to the template. I also add the CSS rule #apartments p to the last main external CSS (mainTemp.css). I tried adding the inline style to each of the <p> of the first several lines of the table but for some reason, none of these things have made a difference. Any other suggestions?

                • 5. Re: Excessive line spacing in a table
                  Nancy OShea Adobe Community Professional & MVP

                  Problem is caused by all those lists.  If you strip out all the unecessary lists, span and strong tags, you'll have an easier time with this.  Use <th> tags for headings. 

                  Copy and paste this code into a new document:

                   

                   

                  <!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>Table</title>
                  <style type="text/css">
                  table {
                  border-collapse: collapse;
                  border: none;
                  }
                  
                  th {
                  text-align: left;
                  padding-top: 20px;
                  }
                  
                  td:first-child { text-indent: 25px; }
                  </style>
                  </head>
                  
                  <body>
                  <table width="674" cellspacing="0" cellpadding="0">
                  <tr>
                  <th width="374">Studio</th>
                  <th width="253">Rent</th>
                  <th width="332">Comments</th>
                  </tr>
                  <tr>
                  <td><a href="http://us.rd.yahoo.com/maps/us/insert/Tmap/extmap%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20/*-http://maps.yahoo.com/maps_result?addr=1361+Lake+Ave%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20&csz=rochester+ny+14613&country=us" target="_blank">1361 Lake Ave</a></td>
                  <td>$460 includes heat</td>
                  <td> </td>
                  </tr>
                  <tr>
                  <th>One Bedroom</th>
                  <th>Rent</th>
                  <th>Comments</th>
                  </tr>
                  <tr>
                  <td><a href="http://us.rd.yahoo.com/maps/us/insert/Tmap/extmap%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20/*-http://maps.yahoo.com/maps_result?addr=1361+Lake+Ave%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20&csz=Rochester+ny+14513;country=us" target="_blank">1361 Lake Ave</a></td>
                  <td>$560 includes heat</td>
                  <td> </td>
                  </tr>
                  <tr>
                  <td><a href="http://us.rd.yahoo.com/maps/us/insert/Tmap/extmap%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20/*-http://maps.yahoo.com/maps_result?addr=1117+South+Plymough+Ave%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20&csz=Rochester+ny+14508;country=us" target="_blank">1117 S. Plymouth Ave</a></td>
                  <td>$525 plus utilities</td>
                  <td> </td>
                  </tr>
                  <tr>
                  <th>Two Bedroom</th>
                  <th>Rent</th>
                  <th>Comments</th>
                  </tr>
                  <tr>
                  <td><a href="http://us.rd.yahoo.com/maps/us/insert/Tmap/extmap%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20/*-http://maps.yahoo.com/maps_result?addr=42+Nye+Park%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20&csz=rochester+ny+14621&country=us" target="_blank">42 Nye Park</a></td>
                  <td>$600 plus utilities</td>
                  <td> </td>
                  </tr>
                  <tr>
                  <th>Three Bedroom</th>
                  <th>Rent</th>
                  <th>Comments</th>
                  </tr>
                  <tr>
                  <td><a href="http://us.rd.yahoo.com/maps/us/insert/Tmap/extmap%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20/*-http://maps.yahoo.com/maps_result?addr=42+Ave+A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20&csz=rochester+ny+14621;country=us" target="_blank">42 Ave A</a></td>
                  <td>$650 plus utilities</td>
                  <td> </td>
                  </tr>
                  <tr>
                  <td><a href="http://us.rd.yahoo.com/maps/us/insert/Tmap/extmap%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20/*-http://maps.yahoo.com/maps_result?addr=39+Washburn+Pk%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20&csz=rochester+ny+14620;country=us" target="_blank">39 Washburn Pk</a></td>
                  <td>$875 plus utilities</td>
                  <td> </td>
                  </tr>
                  <tr>
                  <td><a href="http://us.rd.yahoo.com/maps/us/insert/Tmap/extmap%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20/*-http://maps.yahoo.com/maps_result?addr=1103+South+Clinton+Ave%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20&csz=rochester+ny+14620;country=us" target="_blank">1103 S. Clinton Ave</a></td>
                  <td>$700 plus utilities</td>
                  <td> </td>
                  </tr>
                  <tr>
                  <th>Four Bedroom</th>
                  <th>Rent</th>
                  <th>Comments</th>
                  </tr>
                  <tr>
                  <td>None at this time </td>
                  <td> </td>
                  <td> </td>
                  </tr>
                  <tr>
                  <th>Single Family Homes</th>
                  <th>Rent</th>
                  <th>Comments</th>
                  </tr>
                  <tr>
                  <td><a href="http://us.rd.yahoo.com/maps/us/insert/Tmap/extmap%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20/*-http://maps.yahoo.com/maps_result?addr=981+Exchange+St%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20&csz=rochester+ny+14608;country=us" target="_blank">981 Exchange St</a></td>
                  <td>$850 plus utilities</td>
                  <td>3 bedrooms</td>
                  </tr>
                  <tr>
                  <th>Garages for Rent</th>
                  <th>Rent</th>
                  <th>Comments</th>
                  </tr>
                  <tr>
                  <td><a href="http://us.rd.yahoo.com/maps/us/insert/Tmap/extmap%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20/*-http://maps.yahoo.com/maps_result?addr=93+Prince+St%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20&csz=rochester+ny+14605&country=us" target="_blank">93 Prince St</a></td>
                  <td>$75 per month</td>
                  <td>2 car garage</td>
                  </tr>
                  <tr>
                  <td><a href="http://us.rd.yahoo.com/maps/us/insert/Tmap/extmap%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20/*-http://maps.yahoo.com/maps_result?addr=59+Edmonds+St%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20&csz=rochester+ny+14607&country=us" target="_blank">59 Edmonds St</a></td>
                  <td>$50 per month</td>
                  <td>storage only</td>
                  </tr>
                  <tr>
                  <td><a href="http://us.rd.yahoo.com/maps/us/insert/Tmap/extmap%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20/*-http://maps.yahoo.com/maps_result?addr=99+Orange+St%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20&csz=rochester+ny+14608&country=us" target="_blank">99 Orange St</a></td>
                  <td>$50 per month</td>
                  <td>storage only</td>
                  </tr>
                  <tr>
                  <th>Store Fronts for Rent</th>
                  <th>Rent</th>
                  <th>Comments</th>
                  </tr>
                  <tr>
                  <td><a href="http://us.rd.yahoo.com/maps/us/insert/Tmap/extmap%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20/*-http://maps.yahoo.com/maps_result?addr=166+Genesee+St%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20&csz=rochester+ny+14611&country=us" target="_blank">166 Genesee St</a></td>
                  <td> </td>
                  <td> </td>
                  </tr>
                  <tr>
                  <td><a href="http://us.rd.yahoo.com/maps/us/insert/Tmap/extmap%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20/*-http://maps.yahoo.com/maps_result?addr=168+Genesee+St%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20&csz=rochester+ny+14611&country=us" target="_blank">168 Genesee St</a></td>
                  <td> </td>
                  <td> </td>
                  </tr>
                  </table>
                  </body>
                  </html>
                  
                  

                   

                  Nancy O.

                  • 6. Re: Excessive line spacing in a table
                    dwdivazona Level 1

                    As ever, you are a genius, Nancy O.!