5 Replies Latest reply: Oct 23, 2009 3:27 PM by E. Michael Brandt RSS

    What is up with my vertical spacing?

    thersher Community Member

      I can't figure out why my vertical spacing in my left side column is off. No matter what I do, all the elements want to spread themselves and I want them to be towards the top. I'd appreciate it if someone could look at this site for me and maybe offer some insight as to what I'm doing wrong here. The URL is http://www.agrabest.com. The index page is not as much of a problem as the subsequent pages, simply because of the page length, I believe. Thanks so much for any help!

        • 1. What is up with my vertical spacing?
          polar_bare Community Member

          Table... after table... after table.

           

          You have so many tables that it is hard to navigate the code.

           

          You might want to transition to a two column css design with a header and a footer.

           

          I tried to look at the code, but I don't have the time right now to look it over closely.

           

          Jim

          • 2. Re: What is up with my vertical spacing?
            E. Michael Brandt Community Member

            The problem you are having is that the content in the apparent-left column and the content in the apparent-main column are both contained within the same <tr> tag (the same table row) AND you are using multiple rows for these two content areas.  So, as the content of one td (table cell) grows in height with additional content, necessarily the height of all cells in that row will grow as well.  Therefore as you add content to the apparent-right column, the apparent-left column gets too spaced out.

             

            I am not at all clear why you are using so many table rows.  Simply use one row for your content: put all your left column content into one cell, the graphic for the column divider into another cell, and all your right column content into yet another cell in that row, and i think it will all work okay. You may have to set the cell's "valign" value to "top".

             

            (Of course at some point you may decide no longer use tables for layout, but that is another whole discussion, and the conversion to table-less layout is very often not easily accomplished.)

             

            --

            E. Michael Brandt

            www.divahtml.com
            www.divahtml.com/products/scripts_dreamweaver_extensions.php
            Standards-compliant scripts and Dreamweaver Extensions

            www.valleywebdesigns.com/vwd_Vdw.asp
            JustSo PictureWindow
            JustSo PhotoAlbum, et alia

            --
            • 3. Re: What is up with my vertical spacing?
              thersher Community Member

              Thanks Michael. I have tried to get away from using so many tables, but then I seem to have even MORE formatting issues. The reason I have so many table rows, is that some of the content in the same column is left aligned and some is center aligned, and that isn't working if it's all in one row. For example, the logo is center aligned, but the spry menu is left aligned. If I center align the spry menu, it overlaps the green column divider. Also, the main table is actually nested inside the actual main table. I know, we're supposed to be moving away from tables, but I just haven't arrived there yet.

              I do have all the table rows vertical aligned to top, at least in the left column.

               

              Theresa Sheridan Enterprises

              Graphic Design ~ Website Design ~ Virtual Assistance

              559.306.7887

              www.theresasheridan.com

              • 4. Re: What is up with my vertical spacing?
                bregent CommunityMVP

                >I know, we're supposed to be moving away from tables, but I just haven't arrived there yet.

                 

                Then you probably want to actually add more nested tables. You are currently using row and column spans in that area which is probably messing things up. Avoid using row/col spans and insert another nested table instead. Then add 3 rows to that and you should be fine.

                • 5. Re: What is up with my vertical spacing?
                  E. Michael Brandt Community Member

                  I have recreted a table for you that contains the content from you broccoli page as an example  You do not need a table cell to cneter protions of an individual cell - you can use a di, in this case with a class="ctr", and add this to yoru css :

                   

                  .ctr {
                      text-align: center;
                  }

                   

                  I have not attempted to do this precisely matching yorus.  But it does let you see how to do this without nexting lots of tables or using lots of table cells:

                   

                  <table  width="100%" border="0" cellspacing="0">
                              <tr>
                                <td valign="top"><img src="images/popatoplogo.jpg" width="164" height="184">
                                  <ul id="MenuBar1" class="MenuBarVertical">
                        <li><a href="harvester.html">Broccoli Floret Harvester</a></li>
                        <li><a href="3-in-1_unit.html">3-in-1 Online Unit</a></li>
                        <li><a href="broccoli_online_unit.html">Broccoli Online Floret Unit</a></li>
                        <li><a href="cauliflower_online_unit.html">Cauliflower Online Floret Unit</a></li>

                   

                        <li><a href="clients.html">Satisfied Clients</a></li>
                        <li><a href="index.html">Home</a></li>
                      </ul> 
                       <div class="ctr">
                                    <p>Dealer inquiries from<br>
                                    all countries welcome!                    </p>
                                   
                                 
                                    <p class="style1">Agra-Best, LLC<br>
                                      P.O. Box 1854<br>
                                    Bakersfield, CA 93303</p>
                                    <p class="style1">David Vargas<br>
                                      661.477.3663<br>
                                    <a href="mailto:david@agrabest.com">david@agrabest.com</a></p>
                                    <p class="style1">Keith Randall<br>
                                      661.243.6421<br>
                                <a href="mailto:keith@agrabest.com">keith@agrabest.com</a>    </p>          </div></td>
                                <td width="6" bgcolor="#254925"> </td>
                                <td valign="top"><h2><span class="style2">Broccoli &amp; Cauliflower Floretting Field Harvesting Machine</span></h2><img src="images/harvester.jpg" width="575" height="259">
                               
                                <p>This machine uses a developed &quot;cutting edge&quot; technology to deliver cutting consistency and convenience while minimizing the need for hand labor.</p>
                                  <ul>
                                    <li>Designed for a large variety of broccoli and cauliflower types and dimensions.</li>
                                    <li>Harvester has the capacity of floretting 52-60 units per minute, or 900 to 1200 lbs per hour with a single-row harvester; 672 units per minute and up to 10,000 lbs per hour with a 12-row harvester.</li>

                   

                                    <li>Reduces labor by 60% over hand harvesting!</li>
                                    <li>Core waste materials are automatically fed out of the harvester.</li>
                                    <li>Harvesters are custom built to your needs (1 to 12 rows) and are 100% stainless steel construction.</li>
                                  </ul>
                                  <div class="ctr">
                                    <p>Click here to download printable brochure.</p>
                                    Harvester Video<br>
                                    <object width="425" height="344">
                                    <param name="movie" value="http://www.youtube.com/v/EciURvL15Zw&hl=en&fs=1">
                                    </param>
                                    <param name="allowFullScreen" value="true">
                                    </param>

                   

                                    <param name="allowscriptaccess" value="always">
                                    </param>
                                    <embed src="http://www.youtube.com/v/EciURvL15Zw&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
                                    </object>
                                </div></td>
                              </tr>
                            </table>

                   

                  Hope that helps.

                   

                  --

                  E. Michael Brandt

                  www.divahtml.com
                  www.divahtml.com/products/scripts_dreamweaver_extensions.php
                  Standards-compliant scripts and Dreamweaver Extensions

                  www.valleywebdesigns.com/vwd_Vdw.asp
                  JustSo PictureWindow
                  JustSo PhotoAlbum, et alia

                  --