Click to See Complete Forum and Search --> : Why can't I valign this text to top?


JSchwarz
06-21-2004, 10:32 AM
Can anyone figure out why I can't get the content of the rightmost cell (the one outlined in red, which starts "Welcome to EY Incident Management") to vertically align to the top (like I do the left cell)?

I have the valign to top, border width and cell padding/spacing all set to zero. Yet the space between the top border and the content remains.

The page is way to long to post here, but here's the link (user: guest, pwd: secret): http://tinyurl.com/397d7

Here is a code snippet:

<TABLE summary="Main content table" style="MARGIN:0px"
cellspacing=0 cellpadding=0 width=811 valign=top border=01>
<TR><td><img src="/icons/ecblank.gif" height=1 width=7></TD>
<TD nowrap width=150 valign=top name="Left pane">
<table style="MARGIN:0px" cellspacing=0 cellpadding=0 valign=top border=01><td>
<A href="https://tis-ny-domino5.tisny.com/ey/incident.nsf">Incident Report Home</A>
</TD></table></TD>
<P><TD><img src="/icons/ecblank.gif" height=1 width=7></TD>
<TD valign=top name="Content pane" cellpadding=0 cellspacing=0 bordercolor=red>
<TABLE summary="Button table top" style="MARGIN:0px"
cellSpacing=0 cellPadding=0 width=661 valign=top border=01>
<TD colspan=20 class=normal vAlign=top style="BORDER-BOTTOM: #4ac401 1px solid">&nbsp;
<B>Welcome to EY Incident Management</B></TD></TR><BR>
<FONT SIZE=2><TR style="align:right; valign:top;"></FONT>
<td align=right width=650></td>
<td style="align:right">
<INPUT TYPE=button VALUE="Edit Report" CLASS="button"
onClick="window.open(...);">
<FONT SIZE=2></td><td width=3></td></FONT>
<td style="align:right">
<INPUT TYPE=button onClick="
window.print();
" VALUE="Print" CLASS="button">
<FONT SIZE=2></td><td width=3></td></FONT>
<td style="align:right">
<INPUT TYPE=button VALUE="Close" CLASS="button"
onClick="return _doClick('2be55bf7fae4028c85256eb4004c5665/$Body/0.EFE', this, null)">
<FONT SIZE=2></td></FONT>
</tr></table summary="Button table">

LeeU
06-21-2004, 11:41 AM
The link doesn't seem to work after the password.

JSchwarz
06-21-2004, 11:56 AM
I fixed the link. Sorry about that. Please help me anyway :D

Webfreak
06-21-2004, 12:14 PM
No the link still don't work! I get 404 error pages!

Fang
06-21-2004, 12:17 PM
Incorrect use of tables: tables are for tabular data.
Incorrect use of nested tables.
Incorrect use of tr.
Incorrect use of td.
Illegal use of attributes.
Illegal attribute values.
Element nesting errors.
Incorrectly placed quotes.
Link "error 404"

JSchwarz
06-21-2004, 12:38 PM
OK, this time I fixed the link for real (sheesh, you'd think a professional programmer could do better than that! :D).

Fang, how would you create a multi-paned layout, without using tables or frames, and sticking to as basic (or lowest common) technology as possible -- that's the requirement from the customer.

Thanks again for everyone's help.
Jeff

Fang
06-21-2004, 12:55 PM
Look at some of these column layouts (http://www.bluerobot.com/web/layouts/), all css stuff. See if any of them are suitable.
Use the lowest common denominator (crappiest browser) that the customer wants to support to start your design implementation.

JSchwarz
06-21-2004, 12:57 PM
Woohoo! Thanks, Fang. This site looks like it'll be useful for me!

Well, I did what you said, and it's great -- except for one little detail: the button table in the main section is still not lining up flush with the top of the DIV section.

If anyone can help me (please), here's the link (user: guest, pwd: secret): http://tinyurl.com/397d7

And here are snippets of my source code (who knows why the web server translates it into so much gibberish): <DIV id="Header">
<IMG SRC="/EY/incident.nsf/ey_incident_report.gif?OpenImageResource" WIDTH=1004 HEIGHT=85>
</DIV id="Header">

<DIV id="Menu">
<A href="https://tis-ny-domino5.tisny.com/ey/incident.nsf">Incident Report Home</A>
</DIV id="Menu">

<DIV id="Content">
<TABLE summary="Button table top"
style="margin:0px; padding:0px;" cellSpacing=0 cellPadding=0
width=661 valign=top border=0>
<TR><TD colspan=20 class=normal vAlign=top style="BORDER-BOTTOM: #4ac401 1px solid">
<B>Welcome to EY Incident Management</B></TD></TR>
<TR style="align:right; valign:top;">
<td align=right width=650></td>
<td style="align:right">
<INPUT TYPE=button VALUE="Edit Report"
onClick="code goes here"></td><td width=3></td>
...varying buttons go here...
</TD></TABLE>
</DIV id="Content">


And my CSS definitions:
#Header {
position:absolute;
top:0px; left:0px;
width:1004;
height:85px;
margin:0px;
padding:0px;
border-style:solid;
border-width:01px;
border-color:red;
}

#Menu {
position:absolute;
top:86px;
left:0px; width:251px;
margin:0px;
padding:0px;
border-style:solid;
border-width:01px;
border-color:red;
}
#Content {
position:absolute; top:86px;
left:250px;
margin:0px;
padding:0px;
border-style:solid;
border-width:01px;
border-color:red;
}

Go easy on me because I'm still getting used to CSS.

Thank in advance,
Jeff