Skip navigation
cbm2008
Currently Being Moderated

Some cell contents are not aligned to top of cell

Feb 7, 2013 3:32 AM

I've been trying to get a simple table with 3 cells to align properly. In the first cell is a vimeo video, text with an image in the next two cells.

The video aligns properly, and the other two cells do not.

 

I'd really be appreciative of any help you can give me.

 

Here is the table code and the image of what it produces. Below that is the CSS code for the blogholder and cellborder styles. Really simple stuff but I can't figure out why it doesn't align properly. I am inexperienced in trying to put up a vimeo video.

 

Thanks in advance for any clues for what is in my way.

UNEVENCELLS.jpg

CODE:

<div class="blogholder" >
<table  width="918" border="0" cellpadding="10">
<tr  valign="top">
            <td colspan="3"><hr /></td>
   </tr>
   <tr>
       <td width="300" height="306" align="left"><iframe src="http://player.vimeo.com/video/57555762" width="280" height="282" frameborder="0"></iframe></td>
           
      <td width="280" align="top" valign="top" class="cellborder">
             <img src="Images/HomePage/dd-mandala.png" alt="David's Desk logo" width="108" height="101" />
          <p><strong> David's Desk </strong></p>
              <p align="left"><em><strong>#69 Zombie Apocalypse</strong></em><br />
              <strong>By David Spangler</strong></p>
          <p> Having had several years when vampires were the cultural monster de jour,   it now seems that zombies are having their turn. Books, games, television shows,   and movies about zombies are proliferating... .<a href="http://lorian.org/davidspage.html#gpm1_2"><br /><u>Read more</u></a> </p>       </td>
                   
      <td width="300" align="top" valign="top" class="cellborder" ><strong><img src="blog-mandala2.jpg" alt="Lorian blog mandala" width="100" height="100" class="textwrap"/>Views from the Lorian Community</strong>    
                   
<p align="center"><em><strong>#69 Zombie Apocalypse</strong></em><br />
  <strong>By David Spangler</strong></p>

          <p align="left">Having had several years when vampires were the cultural monster de jour,   it now seems that zombies are having their turn. Books, games, television shows,   and movies about zombies are proliferating... .<a href="http://lorianblog.wordpress.com/">
          <u> Read more</u></a> </p>       </td>
   </tr>        
         
  <tr align="center" valign="top">
          <td colspan="3"><hr /></td>
  </tr>
  </table>
</div>

 

CSS CODE:

.blogholder {

border-left-style: none;

border-left-color: #FFFFFF;

padding: 10px;

vertical-align: top;

border-top-style: none;

border-right-style: none;

border-bottom-style: none;

border-top-color: #FFFFFF;

border-right-color: #FFFFFF;

border-bottom-color: #FFFFFF;

}

.cellborder {

border-left-width: thin;

border-left-style: solid;

border-left-color: #000000;

}

 
Replies
  • Currently Being Moderated
    Feb 7, 2013 5:13 AM   in reply to cbm2008

    Except for HTML emails, While tables are no longer being used for layout purposes.

     

    That said, correct these two tags and see what happens.

     

    <td width="280" valign="top" valign="top" class="cellborder">

     

    <td width="300" valign="top" valign="top" class="cellborder" >

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 7, 2013 2:31 PM   in reply to cbm2008

    CSS with floats (you won't need anything like position:relative added) would be easiest. Here's a very basic 3 column/centered layout...

     

    <!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>Untitled Document</title>

    <style type="text/css">

    .column {

        width:300px;

        float:left;

        height:600px;

        border:1px solid black;

        padding:5px;

    }

    #wrapper {

        width:936px;

        margin:auto;

    }

    </style>

    </head>

     

    <body>

    <div id="wrapper">

    <div class="column">Content1</div>

    <div class="column">Content2</div>

    <div class="column">Content3</div>

    </div>

    </body>

    </html>

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 8, 2013 1:11 AM   in reply to cbm2008

    Can you post the actual page link here?

     

    When I tested your original code yesterday everything was in line so I'm wondering if its something else on your page or in your css that may be causing the issue

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 8, 2013 2:05 AM   in reply to Jon Fritz II

    Thanks, good info. Gone try this immediately!

     

    http://www.salonbootdenhaag.nl/

     

    Syb

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 8, 2013 2:35 AM   in reply to cbm2008

    Hi, I have checked your code it is working fine, recheck it once... copy the code bellow and past it in  a new html page and check.

     

     

    <!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>Untitled Document</title>
    <style type="text/css">

    .blogholder {
    border-left-style: none;
    border-left-color: #FFFFFF;
    padding: 10px;
    vertical-align: top;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-top-color: #FFFFFF;
    border-right-color: #FFFFFF;
    border-bottom-color: #FFFFFF;
    }

    .cellborder {
    border-left-width: thin;
    border-left-style: solid;
    border-left-color: #000000;
    }

    </style>
    </head>

    <body>
    <div class="blogholder" >
    <table  width="918" border="0" cellpadding="10">
    <tr  valign="top">
                <td colspan="3"><hr /></td>
       </tr>
       <tr>
           <td width="300" height="306" align="left"><iframe src="http://player.vimeo.com/video/57555762" width="280" height="282" frameborder="0"></iframe></td>
               
          <td width="280" align="top" valign="top" class="cellborder">
                 <img src="Images/HomePage/dd-mandala.png" alt="David's Desk logo" width="108" height="101" />
              <p><strong> David's Desk </strong></p>
                  <p align="left"><em><strong>#69 Zombie Apocalypse</strong></em><br />
                  <strong>By David Spangler</strong></p>
              <p> Having had several years when vampires were the cultural monster de jour,   it now seems that zombies are having their turn. Books, games, television shows,   and movies about zombies are proliferating... .<a href="http://lorian.org/davidspage.html#gpm1_2"><br /><u>Read more</u></a> </p>       </td>
                       
          <td width="300" align="top" valign="top" class="cellborder" ><strong><img src="blog-mandala2.jpg" alt="Lorian blog mandala" width="100" height="100" class="textwrap"/>Views from the Lorian Community</strong>    
                       
    <p align="center"><em><strong>#69 Zombie Apocalypse</strong></em><br />
      <strong>By David Spangler</strong></p>

              <p align="left">Having had several years when vampires were the cultural monster de jour,   it now seems that zombies are having their turn. Books, games, television shows,   and movies about zombies are proliferating... .<a href="http://lorianblog.wordpress.com/">
              <u> Read more</u></a> </p>       </td>
       </tr>        
             
      <tr align="center" valign="top">
              <td colspan="3"><hr /></td>
      </tr>
      </table>
    </div>

    </body>
    </html>

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 8, 2013 3:20 AM   in reply to cbm2008

    I have yet to identify the issue when using a table based layout but as you say if you remove the video the content in col 2 and 3 sits where it should do at the top of the table.

     

    For now get rid of the <div class="blogholder" ></div> AND table code betweeen it and repalce it with the 3 floating <divs> below: (Inline css styling shown)

     

     

    <div id="wrapper" style="width: 918px; overflow: hidden; padding: 20px 0; border-top: 1px solid #999; border-bottom: 1px solid #999;">

      <div id="col_1" style="float: left; width: 280px; text-align: center; padding: 0 15px 0 15px;"><iframe style="float: left;" src="http://player.vimeo.com/video/57555762" width="280" height="282" frameborder="0"></iframe></div>

      <!-- end col_1 -->

      <div id="col_2" style="float: left; width: 285px; margin-left: 7px;">

       <img src="http://lorian.org/Images/HomePage/dd-mandala.png" alt="David's Desk logo" width="108" height="101" />

       <p><strong> David's Desk </strong></p>

       <p align="left"><em><strong>#69 Zombie Apocalypse</strong></em><br />

      <strong>By David Spangler</strong></p>

      <p> Having had several years when vampires were the cultural monster de jour,   it now seems that zombies are having their turn. Books, games, television shows,   and movies about zombies are proliferating... .

      <a href="http://lorian.org/davidspage.html#gpm1_2">

      <br /><u>Read more</u></a> </p>

     

     

      </div>

      <!-- end col_2 -->

      <div id="col_3" style="float: left; width: 285px; margin-left: 20px;">

      <strong><img src="http://lorian.org/blog-mandala2.jpg" alt="Lorian blog mandala" width="100" height="100" class="textwrap"/>Views from the Lorian Community</strong>    

     

    <p align="center"><em><strong>#69 Zombie Apocalypse</strong></em><br />

      <strong>By David Spangler</strong></p>

     

                <p align="left">Having had several years when vampires were the cultural monster de jour,   it now seems that zombies are having their turn. Books, games, television shows,   and movies about zombies are proliferating... .<a href="http://lorianblog.wordpress.com/">

                  <u> Read more</u></a> </p>

     

      </div>

      <!-- end col_3 -->

     

      </div>

      <!--end wrapper -->

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 8, 2013 3:23 AM   in reply to osgood_

    Found the problem. You have the below css set in the head section of the page. It says align content to the baseline, which is what it is doing!

     

     

     

    td, th  {

        vertical-align: baseline;

    }

     
    |
    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