Forum Moderators: open
I've tried even using a rowspan of 3 althought that wouldn't make sense. Everything is valign=top so what's causing the weird alignment?
The solution has got to be simple but it's a puzzle to me!
Thanks!
Shelley
[edited by: tedster at 10:55 pm (utc) on May 21, 2003]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<table width="700" border="0" cellspacing="0" cellpadding="0"><tr>
<td rowspan="2" valign="top">Lots of copy goes here</td>
<td width="235" height="165" valign="top">
<img name="" src="" width="235" height="165" alt=""></td>
</tr><tr>
<td width="235" valign="top">
TEST - THIS SHOULD ALIGN TO THE TOP OF THIS COLUMN
JUST UNDER THE IMAGE</td>
</tr></table>
</body>
</html>
So why use two table rows at all? Wouldn't this work --
<table width="700" border="0" cellspacing="0" cellpadding="0"><tr>
<td valign="top">Lots of copy goes here</td><td width="235" valign="top">
<img name="" src="" width="235" height="165" alt="">
<br>THIS TEXT SHOULD ALIGN JUST UNDER THE IMAGE</td></tr>
</table>
I could just use one row but I was planning on using the lower right cell for a navigation area, with a little CSS style to separate it from the rest of the page. If I were to widen the column and give the image some room with vspace or hspace then the style such as border or background would apply to the image area which is what I want to avoid.
I stripped this page down to try and get at the core issue of why the wacky alignment given the code. Seems like a very simple table layout.
Any other ideas?
Thanks!
Shelley
But I keep coming back to this -- why not use one big cell and include a third element - a <div> for the navigation? It does not need to be in its own table cell. That way the div would also be rendered according to the valign="top" attribute. You can put a <div> inside a <td>.
You can use CSS to give separate styles to the table cell, the image tag, and the navigation div. There's no need to worry about unwanted inheritance because you can declare the styles separately for each element, as needed. But you cannot make all the browsers render a rowspan in the same fashion...they just won't do it.
<td width="235" height="165" valign="top">
I'd get rid of that, refresh. If no change, I'd add it back and then add it to the other td.
You also have an outer table width of 700. Those two cells only add up to 460. Where is the other 240 at?
Also, I tried dropping all the height attributes (browsers override them all the time anyway, as IE does in this case) but IE still takes the right hand column and splits the height in half, rather than limiting the top cell to just the height its content requires.
I also tried creating a left hand column using spacer gifs for content that were only 1px wide. I thought IE might act differently if the first table column didn't have a rowspan.
But even in that case, IE still split the columns in half. It is un-intuitive behavior, but I couldn't find exact recommendations at the W3C. Without an explicit standard, IE's rendering behavior here can't really be called a bug.
In fact, IE's interpretation is geared more toward tabular data display rather than "layout tables". And that may be a good call, even if it does mess with layouts.
<body>
<table width="700" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top">Lots of content here.</td>
<td width="235" valign="top">
<table border="1" cellspacing="0" width="100%">
<tr>
<td width="100%">
<img name="" src="" width="235" height="165" alt=""></td>
</tr>
<tr>
<td width="100%">TEST - THIS SHOULD ALIGN TO THE TOP OF THIS COLUMN JUST UNDER THE IMAGE</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
I'm guessing that overall, unless I'm concerned about older browsers, it's best to use as much CSS as possible. (If the design degrades gracefully for those with older browsers) Could this layout be achieved *solely* with CSS? I get the impression from others that "degrading gracefully" is rather tricky.
Just curious.
Thanks!
Shelley
