By armanschwarz on

Hi everyone, I'm sure this is simple for all you html/Css gurus out there so instead of torturing myself any longer I thought I might as well just ask. I'm trying to create a table with 2 columns, 1 row (ie. two sets of content next to each other), and want them both aligned to top, such that they start at the same point. The problem is that the table contents is a generated list of content, which varies in size for each of the columns. For some reason they always appear centered, so that the headings of each column are at different heights. Not very pretty.... Here is what I've done so far:

<table>
 <tr VALIGN="TOP">
  <td>
   <h2 class="title">Visit the Forums</h2>
   <?php
   $block = module_invoke('featured_content', 'block', 'view', 3);
   print $block['content'];
   ?>
  </td>
  <td>
   <h2 class="title">Global Warming Articles</h2><?php
   $block = module_invoke('featured_content', 'block', 'view', 2);
   print $block['content'];
   ?>
  </td>
 </tr>
</table>

the valign tag doesn't really seem to do anything... Any ideas?

⋅ Categories: Drupal 6.x

Comments

beckyjohnson’s picture

beckyjohnson commented

So, the valign tag is supposed to go on the td, not the tr. Try it again that way.
http://www.w3schools.com/tags/att_td_valign.asp

armanschwarz’s picture

armanschwarz commented

Right... So I got off to a bad start with my html attempt. Anyway, your solution fixed the problem for a simple table without the php script. However, I then tried this code (same as before with your suggestion):

<table>
<tr>
  <td VALIGN="TOP">
   <h2 class="title">Visit the Forums</h2>
   <?php
   $block = module_invoke('featured_content', 'block', 'view', 3);
   print $block['content'];
   ?>
  </td>
  <td VALIGN="TOP">
   <h2 class="title">Global Warming Articles</h2><?php
   $block = module_invoke('featured_content', 'block', 'view', 2);
   print $block['content'];
   ?>
  </td>
</tr>
</table>

and I ended up with the same problem (ie. the content just in the middle of the cell). Here is the page source for that section, in case this might help:

<table>
<tr>
  <td VALIGN="TOP">
   <h2 class="title">Visit the Forums</h2>

   <div class="featured-content-block featured-content-block-3 featured-content-block-filter">
      <div class="featured-content-block-header">
    <p></p>    </div>
              <ul class="featured-content-block-content">
            <li><a href="/forum/stand-take-action-2010">Stand Up Take Action 2010</a></li>
            <li><a href="/forum/massive-tree-planting">Massive Tree Planting</a></li>
            <li><a href="/forum/new-zealand-hole-ozone-layer">New Zealand : Hole In The Ozone Layer</a></li>

            <li><a href="/forum/storing-solar-energy">Storing Solar Energy</a></li>
            <li><a href="/forum/earth-day-video-if-tree-falls">Earth Day Video: If A Tree Falls</a></li>
            </ul>
            <div class="featured-content-block-footer">
    <p></p>    </div>
      </div>
  </td>

  <td VALIGN="TOP">
   <h2 class="title">Global Warming Articles</h2><div class="featured-content-block featured-content-block-2 featured-content-block-filter">
      <div class="featured-content-block-header">
    <p></p>    </div>
              <ul class="featured-content-block-content">
            <li><a href="/jason/renewable-energy-law-germany-erneuerbare-energien-gesetz-or-eeg">The Renewable Energy Law of Germany (Erneuerbare-Energien-Gesetz or EEG)</a></li>
            <li><a href="/jason/correlation-between-temperature-and-co2-statistical-view-drivers">Correlation between temperature and CO2: A statistical view of drivers</a></li>

            <li><a href="/jason/2010-hottest-year-debate">2010: The Hottest Year of Debate</a></li>
            <li><a href="/jason/european-project-ice-coring-antarctica-epica">The European Project for Ice Coring in Antarctica (EPICA)</a></li>
            <li><a href="/jason/short-history-global-warming-theory">The Short History of the Global Warming Theory</a></li>
            </ul>
            <div class="featured-content-block-footer">
    <p></p>    </div>
      </div>

  </td>
</tr>
</table>

Could this have something to do with the featured content blocks/module? If so, is there a workaround?

Codeblind’s picture

Codeblind commented 
/* All td's aligned top site-wide unless some other style has greater specificity. */
td {
  vertical-align: top; 
}

/* All td's in a named table aligned top. */
table#table-id td {
   vertical-align: top; 
}

/* All td's in tables of the class "table-class" aligned top. */
table.table-class td {
  vertical-align: top; 
}

/* Only td's with the class "align-top" aligned top. */
td.align-top  {
  vertical-align: top; 
}

/* Only the td with the id "td-id" aligned top. */
td#td-id  {
  vertical-align: top; 
}
armanschwarz’s picture

armanschwarz commented

Great, thanks for the help. I added the following to my stylesheet:

/* All td's in tables of the class "table-class" aligned top. */
table.table-class td {
  vertical-align: top;
}

And then tagged the table with class="table-class" and it worked. Can you explain why this worked but adding the VALIGN to the td's didn't? Would be good to know in future..

Codeblind’s picture

Codeblind commented

VALIGN is deprecated in most DOCTYPES and unsupported in XHTML 1.0 Strict.

trentharlem’s picture

trentharlem commented

Contributed modules like Panels and WYSIWYG are helpful tools in escaping the torture chamber when struggling with layout issues.
http://drupal.org/project/panels
http://drupal.org/project/wysiwyg