Skip navigation
cbm2008
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;

}

616 Views   13 Replies   Latest reply: cbm2008, Feb 8, 2013 3:33 AM
 
Replies
  • Ken Binney
    Currently Being Moderated
    1. Ken Binney,
    Feb 7, 2013 5:13 AM   in reply to cbm2008
    Report

    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:
  • cbm2008
    Currently Being Moderated
    2. cbm2008,
    Feb 7, 2013 1:41 PM   in reply to Ken Binney
    Report

    I tried it, and it made no difference. Thanks for the suggestion. Are there any others?

     

    If tables are no longer used, is the better approach just to use CSS to position them? I switched to tables because I was having difficulty getting things to position correctly. But is that the better approach now? Is there something else I need to try?

     

    Thanks.

     
    |
    Mark as:
  • Jon Fritz II
    Currently Being Moderated
    3. Jon Fritz II,
    Feb 7, 2013 2:31 PM   in reply to cbm2008
    Report

    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:
  • cbm2008
    Currently Being Moderated
    4. cbm2008,
    Feb 7, 2013 2:40 PM   in reply to Jon Fritz II
    Report

    Thanks. Let me give that a try and I'll get back to you. Appreciate the suggestion.

     
    |
    Mark as:
  • cbm2008
    Currently Being Moderated
    5. cbm2008,
    Feb 7, 2013 8:58 PM   in reply to cbm2008
    Report

    This has not worked. I have been trying to manage the floating divs but first they are stacked on top of each other and then one is out to the right but in the middle o the page. Really strange. This is why I went to using tables in the first place, because I couldn't get the floating parts to work without a lot of fuss.

     

    What is not working with the first effort? The table version seems like it should work. It does work if all three cells are filled with text, but the vimio video seems to be where the problem is. Do any of you have any ideas on what the problem is there? Why the video might be causing it to be misaligned?

     

    Thanks, this seems like such a simple problem, but it's driving me nuts!

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

    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:
  • Salonboot
    Currently Being Moderated
    7. Salonboot,
    Feb 8, 2013 2:05 AM   in reply to Jon Fritz II
    Report

    Thanks, good info. Gone try this immediately!

     

    http://www.salonbootdenhaag.nl/

     

    Syb

     
    |
    Mark as:
  • cbm2008
    Currently Being Moderated
    8. cbm2008,
    Feb 8, 2013 2:19 AM   in reply to osgood_
    Report

    My link is http://lorian.org/index2.html (table version) and index3.html.(CSS floated version). With 3 I subsequently tried to use a different CSS style rather than .forcellhome for each cell to float them to the right. Just made more of mess and seems so much more complicated. I'd really like to get the table version working.

     
    |
    Mark as:
  • santhosh kumar mallepaddy
    Currently Being Moderated
    9. santhosh kumar mallepaddy,
    Feb 8, 2013 2:35 AM   in reply to cbm2008
    Report

    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:
  • cbm2008
    Currently Being Moderated
    10. cbm2008,
    Feb 8, 2013 3:05 AM   in reply to santhosh kumar mallepaddy
    Report

    This works. Both you and osgood have said that the code I displayed here is ok, and this proves that something else is the problem. Thanks for this.

     

    However, what is it? I still don't know what the problem is.

     

    Thanks for working with it. It's good to know.

    Any ideas on what else might cause the problem?

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

    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:
  • osgood_
    Currently Being Moderated
    12. osgood_,
    Feb 8, 2013 3:23 AM   in reply to osgood_
    Report

    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:
  • cbm2008
    Currently Being Moderated
    13. cbm2008,
    Feb 8, 2013 3:33 AM   in reply to osgood_
    Report

    It works. It really works. I am SO relieved! I have no idea how that "td, th" entry was made--a mysterious appearance. But I am happy to have it gone. Excellent detective work, osgood!

     

    Thank you so very much. I am very grateful to you.

     

    3:30am--I can actually go to bed and sleep now.

     
    |
    Mark as:
Actions

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