cell won't align to top vertically

Hi, I have some content that won't vertically align.
I want content (HOT DEALS, etc.) in the left column to align at the top when the page is stretched, say by adding more text on the right.
The left cell includes a graphic image, text, a form, and some PHP.

I have researched and tried everything I can think of.
Any idea why this content won't align at the top?
(replacing it with some plain text and using valign="top" works.)
Thanks for any help.

Here's a link: http://www.gobeyondmag.com/HomeLife/index.php
Here's the code:

<TD ROWSPAN=3 valign="top" class="noborderBox"> <img src="../images/spacer.gif" width="109" height="10">
<br> <font size="2" face="Verdana, Arial, Helvetica, sans-serif"><strong>HOT
DEALS</strong> from</font><br> <span class="stayGreen"><a href="../page.php"><font size="2"><strong>Text here</strong></font></a></span>
<?php
if ($_SERVER['REQUEST_METHOD'] != 'POST'){
$me = $_SERVER['PHP_SELF'];
?>
<form name="form1" method="post"
action="<?php echo $me;?>">
<table border="0" cellspacing="0" cellpadding="2">
<tr>
<td><input type="text" name="email" size=13></td>
</tr>
<tr>
<td><input type="submit" name="Submit"
value="Subscribe"></td>
</tr>
</table>
</form>
<?php
} else {
error_reporting(0);
//
$recipient = 'me@home.com';
$subject = 'subscriber';
$from = stripslashes($_POST['Name']);
$msg = "This person has subscribed";
$mailheaders = "From: $email\n";
$mailheaders .= "Reply-To: $email\n\n";
if (mail($recipient, $subject, $msg, $mailheaders))
echo nl2br("<font color=#339900 size=2 face='Verdana, Arial, Helvetica, sans-serif'></font>
<font color=#0033CC size=2 face='Verdana, Arial, Helvetica, sans-serif'>Thank-you for saving with RealSteals!<br>");
else
echo ("<font color=#FF0000 size=2 face='Verdana, Arial, Helvetica, sans-serif'>Message failed to send, please try again later.</font>");
}
?>
<strong><font color="#000000" size="2" face="Verdana, Arial, Helvetica, sans-serif" >BUSINESS</font></strong><font color="#009933"><br>
<span class="themeText"><a href="../getlisted.php">Get Listed</a><br>
<a href="../interview.php">interviews</a><br>
<a href="../design.php">design</a><br>
<a href="../advertise.php">advertise</a></span></font></TD>

Attached Images

alignment.jpg (68.5 KB, 41 views)

From your linked page, I'm not sure I see where your problem is at the moment.

Something I would say, and I know it's not what you asked, but you really should code your pages up properly.

You need a DOCTYPE at the very top of your page.

Mark-up your page according to that type.

Use proper css styling with the code in a separate file that is <link... ed into your pages.

DO NOT use proprietary styling or other attributes.

Your pages need to be cross-browser and accessibility compatible.

Of course, I don't have the error showing live at the moment, that is why the attached image. The error only appears when there's enough content to make the page longer (as in the blank returns in the screen-shot).

Can anyone help with this problem?
Thanks.

As the other poster stated, using the proper DOCTYPE will help you some. And instead of using the

Code: Select all

valign="top"

he is recommending using CSS and applying the

Code: Select all

style="vertical-align:top;"

to your <td> tag

Thank-you both. I have tried both and they do not help.
(and I will be addressing the other issues.)

When I remove the cells and replace them with one cell, it aligns to the top as desired. When I remove the cells and replace them with multiple cells, they stretch and center vertically as undesired. So it appears to be related to having more than one cell. (Which I need for the forms?).

This seems to be a function of the way cells interact, which I don't have that "feel" for yet.

What is in the class noborderBox ? It is sometimes difficult to tell with just a bit of the code. Do you have all the parsed code perhaps?

Here's the .css :
(Thanks for your continued interest

.mainBox {
border: thin solid #CCCCCC;
padding-left: 8px;
background-repeat: no-repeat;
padding-top: 8px;

}
.noborderBox {
border: thin none #CCCCCC;
padding-left: 8px;
vertical-align: top;
}
.bottomLine {
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #CCCCCC;
}
.topLine {
border-top-width: thin;
border-top-style: solid;
border-top-color: #CCCCCC;
}
a:link {
color: #009900;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10.5px;
}
a:hover {
color: #000000;
text-decoration: underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10.5px;
}
a:visited {
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10.5px;
text-decoration: none;
}
.themeText {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10.5px;
}
.otherLink A:link {text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10.5px; color: black;}
.otherLink A:visited {text-decoration: underline; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10.5px; color: black;}
.otherLink A:hover {text-decoration: underline; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10.5px; color: black;}
}
.stayGreen A:link {color: green;}
.stayGreen A:visited {color: green;}
.stayGreen A:active {color: green;}
.stayGreen A:hover {
color: green;
text-decoration: underline;
}
.blackBox {
border: thin solid #000000;
}
.copyright {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #999999;
}
.topic {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
color: #000000;
}
.noLink {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10.5px;
color: #999999;
}

Well you have it there in the code

Code: Select all

.noborderBox {
border: thin none #CCCCCC;
padding-left: 8px;
vertical-align: top;
}

is there a chance that we could see the parsed code so that we can take a look at what is being generated by the PHP and the other to see if we can come up with other ideas?

Hi Corey,

What do I have in the code? The code says to align to the top, but it does not.

All of the PHP code was posted above in my very first post. Not sure what you mean, so I will post all code again. Actually, I will post a simplified version that has the same problem.

This is the strangest thing. I carefully re-built the page from scratch, testing with each change, looking to find the "thing" that causes this... thought I had successfully re-built it (though still not knowing what was the difference) --when Bam! the problem surfaced again.

Now, it's personal! haha

I was just having a quick scan through your code above and noticed lots of 'font-size: 10.5px;'.

You can't have 0.5 pixel. A pixel is by definition a unitary thing. You can have 10.5em but not 10.5px. Quite what interpretation a browser might put on it is anyone's guess.

Ahhhh (can you tell I came from the print side of things and habits persist?).
Thanks! Doubt it will help with the problem--but with web design, anything is possible, I'm finding.

What I mean is the way it is see in the browser. If you go to any site - ASP, PHP, etc and go to View Source, you will see the parsed code (as a search engine sees it) and then that way we can see everything

No, you can't see the PHP when you view source in a browser...
That is why I provided the PHP separately.

UPDATE:
While I have not been able to find the reason for this problem, I did notice that it did not happen when there was only one cell <TD> in the left column, so I put the graphic image of the house in the same cell, and the problem is gone. I've ran into this before, and am sure I will again, so have made this work-around a mental note for now. If anyone comes-up with some understanding as to what's going-on, I'd love to hear from you.