Zymic Webmaster Forums > Valid Xhtml Valign?

Zymic Webmaster Forums > Web Design & Development > Client Side Scripting > HTML and CSS

prototism

Aug 5 2008, 05:24 AM

im pretty sure the valign attribute has been deprecated in xhtml. i was wondering if there was a valid solution? im sure it involves css, and after looking over the details of the vertical-align property, i doubt that works.

if anything, i was thinking something along the lines of:

CODE

CODE

<table id="foo">
   <tr>
      <td><div>Lorem</div></td>
      <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce at turpis ut est convallis lobortis. Suspendisse potenti. Nunc ut felis.</td></tr>
   <tr>
      <td><div>Lorem</div></td>
      <td>Fusce at turpis ut est convallis lobortis.</td></tr>
   <tr>
      <td><div>Lorem</div></td>
      <td>Fusce at turpis ut est convallis lobortis.</td></tr>
</table>

basically, when the text wraps in an adjacent <td>, i want the text in the smaller <td> to remain at the top, and not in the vertical center, as it is by default.

the problem is, the solution seems a little bloated. is there a more elegant way to do this, now that valign is deprecated?

prixat

Aug 5 2008, 11:35 AM

you could just replace valign with the style vertical-align:

CODE

<table border="1" >
   <tr>
      <td style='vertical-align:top'>Lorem</td>
      <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce at turpis ut est convallis lobortis. Suspendisse potenti. Nunc ut felis.</td></tr>
   <tr>
      <td style='vertical-align:top'>Lorem</td>
      <td>Fusce at turpis ut est convallis lobortis.</td></tr>
   <tr>
      <td style='vertical-align:top'>Lorem</td>
      <td>Fusce at turpis ut est convallis lobortis.</td></tr>
</table>

but if you are dealing with just text then you may not need a table.
How about padding in the div and 'outdenting' the paragraphs!

CODE

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

</style>
</head>

<body>

<div id="outdentp">
  <p>Lorem -Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce at turpis ut est convallis lobortis. Suspendisse potenti. Nunc ut felis.</p>
  <p>Lorem -Fusce at turpis ut est convallis lobortis.</p>
  <p>Lorem -Fusce at turpis ut est convallis lobortis.</p>
</div>

</body>
</html>

Bread

Aug 5 2008, 12:11 PM

Check out this technique : http://murphy.cz/victoria-s-vertical-centering/

MrTouz

Aug 6 2008, 09:37 AM

To answer you, i did not find any solutions for that matter myself... ive been using tables to code my layouts and never
found any CSS solution that does the trick so i kept adding the <td valign="top"> to all my td's on the page....

But, if you are about to code a layout, like Navigations and texts and you have 2 columns i suggest using CSS and DIVS and forget about tables... as said many times by many people, tables should be used to sort out data (from a database for example) and not to code a layout.

Good luck.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.