- From: Adam van den Hoven <list@adamvandenhoven.com>
- Date: Fri, 15 Mar 2002 16:30:49 -0800
- To: <www-html@w3.org>
------------------------------------------------------------------------
This mail message contains standard MIME attachments. If you see this
note, your e-mail program does not support MIME. You may need a MIME-
compliant mail reader to read any non-text attachments in this message.
------------------------------------------------------------------------
--==IMail_v5.0==
Content-Type: text/plain; charset=us-ascii
Hey all.
I'm building out a framework from photoshop comps that our designer just handed to me. I've managed to get everything pretty well where I want it. I've even used a mostly reasonable structure in my HTML (I'll probably revise it at least one more time before I'm done).
I've run into a problem with my tables. I have 3 tables that contain data (banking summaries in this case). Unfortunately my designer told me to line up the columns. I'm going to convince her that the way she want things to line up (the second column in the first table is to line up with the second column in the second table) won't work well because currency fields should be right aligned. Instead, I want to do the alignment from the right (the last and second last columns align in all tables).
The solution (or so I thought) was to use COL elements to set the width. I've tried two things.
The first was to use 3 COL elements for the first table and 5 for the others. The first COL is always width="*" and the others match up from the end. This didn't work very well at all.
The second was to use the same set of COL elements for all 3 tables and simply colspan="3" the first column of the first table. This works really well in IE5.5 (WinNT). However, if I try it on either NS6.2 or Mozilla 0.9.9 the result is very different, but only for the first table. The last two have no problems lining up.
It is my impression that either of the two solutions should have worked but neither has. I'm hoping someone can help me out. If I can't find a solution, I'm going to have to resort to one massive table.
I've attached my HTML file so you can see what I mean. There images refered to aren't included but they really don't matter.
There's two style blocks becuase I'm using two CSS files, one for unchanging CSS and one that changes from client to client. And the reason there are a bunch of images that get display:none is that I have two different layouts (one with heavy graphics) to run off of one set of HTML. In the end I'll probably be taking out the extra markup for those installations that don't use it, but that will be a bit of JSP code.
Thanks for your help!!!
Adam van den Hoven
--==IMail_v5.0==
Content-Type: text/plain; name="ShowDefect.htm"
Content-Transfer-Encoding: binary
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
Member Direct 5.0 Wireframe
</title>
<style type="text/css">
<!--
/*These two selectors disable the image based buttons.*/
.button img{
display:none;
}
.current img{
display:none;
}
body{
border:none;
font-family:tahoma,verdana,arial,sans-serif;
font-size:12px;
margin:0px;
padding:0px;
}
#Masthead{
border-bottom-style:solid;
border-bottom-width:1px;
height:100px;
left:0px;
overflow:hidden;
position:absolute;
top:0px;
width:770px;
}
#Masthead #MemberDirectLogo{
background-color:#000000;
left:480px;
position:absolute;
text-align:center;
top:0px;
width:290px;
}
#MainNavigation{
border-left-style:solid;
border-left-width:1px;
height:20px;
position:absolute;
top:80px;
}
#MainNavigation a{
font-weight:bold;
text-decoration:none;
}
#MainNavigation .current{
border-bottom-style:solid;
border-bottom-width:1px;
border-right-style:solid;
border-right-width:1px;
border-top-style:solid;
border-top-width:1px;
display:inline;
height:20px;
text-align:center;
vertical-align:middle;
width:90px;
}
#MainNavigation .button{
border-bottom-style:solid;
border-bottom-width:1px;
border-right-style:solid;
border-right-width:1px;
border-top-style:solid;
border-top-width:1px;
display:inline;
height:20px;
text-align:center;
vertical-align:middle;
width:90px;
}
#MainNavigation .currentcontext{
background-color:transparent;
border border-right-width:1px;
border-bottom-style:solid;
border-bottom-width:1px;
border-left-style:solid;
border-left-width:1px;
border-right-style:solid;
left:-1px;
padding:2px;
position:absolute;
top:20px;
width:770px;
}
#MainNavigation .currentcontext .button{
background-color:transparent;
border-style:none;
display:inline;
height:20px;
padding-left:1em;
padding-top:2px;
text-align:left;
vertical-align:middle;
width:auto;
}
#MainNavigation .currentcontext a{
text-decoration:underline;
}
#MainNavigation .currentcontext .current{
border-style:none;
display:inline;
height:20px;
padding-left:1em;
padding-top:2px;
text-align:left;
vertical-align:middle;
width:auto;
}
#GlobalNavigation{
left:680px;
overflow:hidden;
position:absolute;
text-align:right;
top:30px;
width:75px;
}
#GlobalNavigation a{
font-size:11px;
font-weight:bold;
text-decoration:none;
}
#GlobalNavigation .button{
border-top-style:solid;
border-top-width:1px;
padding:1px;
width:100%;
}
#GlobalNavigation #NavigateHome{
border-top-style:none;
}
#ContentNavigation{
background-color:transparent;
font-size:11px;
font-weight:bold;
left:0px;
position:absolute;
text-align:right;
top:140px;
width:750px;
z-index:2;
}
#ContentNavigation a{
text-decoration:none;
}
#ContentNavigation .button{
border-style:solid;
border-width:1px;
display:inline;
height:20px;
margin:5px;
margin-left:2px;
padding-top:2px;
text-align:center;
width:60px;
}
.offerpresentment{
height:200px;
left:9px;
overflow:hidden;
position:absolute;
top:152px;
width:96px;
}
.offerpresentment img{
margin:0px;
padding:0px;
}
.offerpresentment p{
margin:0px;
padding:2px;
padding-left:4px;
padding-right:4px;
}
.offerpresentment p.more{
padding-top:5px;
text-align:right;
}
.offerpresentment h1{
font-size:14px;
font-weight:bold;
margin:0px;
padding:2px;
text-align:center;
}
.content{
padding-bottom:50px;
padding-left:120px;
padding-top:150px;
width:770px;
z-index:1;
}
.content #PageTitle{
display:none;
}
.content #Welcome a{
font-weight:bold;
}
.content .summarygroup{
border-style:solid;
border-top-style:none;
border-width:1px;
width:650px;
margin : 0px;
padding : 0px;
}
.content #AccountsSummary{
border-top-style:solid;
}
.content .summarygroup h1{
font-size:16px;
font-weight:bold;
padding:4px;
padding-left:8px;
margin:0px;
}
.content .summarygroup .summarydata{
margin-left:20px;
padding-top:0px;
}
.content .summarygroup div.summarydata table.summarydata{
margin-left:0px;
}
.content .summarygroup table.summarydata{
padding-top:0px;
width:600px;
}
.content .summarygroup table.summarydata caption{
display:none;
}
.content .summarygroup table.summarydata td{
font-size:12px;
}
.content .summarygroup table.summarydata th{
vertical-align : top;
font-size:12px;
}
table .accountname{
text-align:left;
}
table .vendorname{
text-align:left;
}
table .date{
text-align:left;
}
table .currency{
text-align:right;
}
table td.currency{
font-family:"Courier New",Courier,monospace;
}
table .checkbox{
text-align : left;
}
table .text{
text-align:left;
}
-->
</style>
<style type="text/css">
<!--
body{
background-color:red;
}
#Masthead{
background-color: #dddddd;
border-bottom-color : #FFFFFF;
}
#MainNavigation {
border-left-color : #FFFFFF;
}
#MainNavigation a{
color:#FFFFFF;
}
#MainNavigation .current{
border-right-color : #FFFFFF;
border-top-color : #FFFFFF;
background-color : #999999;
border-bottom-color : #999999;
color:#FFFFFF;
}
#MainNavigation .button{
color:#FFFFFF;
border-right-color : #FFFFFF;
border-top-color : #FFFFFF;
border-bottom-color : #FFFFFF;
background-color : #555555;
}
#MainNavigation .currentcontext{
background-color : #999999;
border-right-color : #FFFFFF;
border-left-color : #FFFFFF;
border-bottom-color : #FFFFFF;
}
#GlobalNavigation a{
color:#555555;
}
#contentNavigation a{
color:#FFFFFF;
}
#contentNavigation .button{
background-color:#999999;
border-color : #333333;
}
.offerpresentment{
background-color : #282828;
}
.offerpresentment h1{
color:#FFFFFF;
}
.offerpresentment p{
color:#FFFFFF;
}
.offerpresentment a{
color:#FFFFFF;
}
.content{
background-color:#FFFFFF;
}
.content .summarygroup h1{
background-color:#cccccc;
}
-->
</style>
</head>
<body>
<!--
None of the alt attributes have been set. They ALL need to be set with relevant values.
-->
<div id="Masthead">
<a id="MastheadLogo" href="#" title="logo title"><img src="framework/images/Masthead/Logo.gif" width="230" height="100" alt="" border="0"></a><img id="MastheadPhoto" src="framework/images/Masthead/Photo.gif" width="540" height="100" alt="" border="0">
<div id="MemberDirectLogo"><img src="framework/images/Masthead/MemberDirect.gif" width="113" height="24" alt="" border="0"></div>
</div>
<div id="Navigation">
<div id="MainNavigation">
<div class="current" id="NavigateAccounts">
<a href="#" title="Go to Accounts"><img src="framework/images/MainNavigation/Accounts.gif" width="94" height="22" alt="" border="0"><span class="text">Accounts</span></a>
</div>
<div class="currentcontext" id="AccountsContext">
<div class="button" id="NavigateAccountStatements">
<a href="#" title="Go to Account Statements"><img src="framework/images/MainNavigation/Accounts/Statement.gif" width="131" height="19" alt="" border="0"><span class="text">Account Statements</span></a>
</div>
<div class="button" id="NavigateOpenAccounts">
<a href="#" title="Open New Account"><img src="framework/images/MainNavigation/Accounts/Open.gif" width="131" height="19" alt="" border="0"><span class="text">Open a New Account</span></a>
</div>
</div>
<div class="button" id="NavigatePayments">
<a href="#" title="Go to Payments"><img src="framework/images/MainNavigation/Payments.gif" width="94" height="22" alt="" border="0"><span class="text">Payments</span></a>
</div>
<div class="button" id="NavigateTransfers">
<a href="#" title="Go to Transfers"><img src="framework/images/MainNavigation/Transfers.gif" width="94" height="22" alt="" border="0"><span class="text">Transfers</span></a>
</div>
<div class="button" id="NavigateRates">
<a href="#" title="Go to Rates"><img src="framework/images/MainNavigation/Rates.gif" width="94" height="22" alt="" border="0"><span class="text">Rates</span></a>
</div>
<div class="button" id="NavigateMessages">
<a href="#" title="Go to Messages"><img src="framework/images/MainNavigation/Messages.gif" width="94" height="22" alt="" border="0"><span class="text">Messages</span></a>
</div>
<div class="button" id="NavigateProfile">
<a href="#" title="Edit your Profile"><img src="framework/images/MainNavigation/Profile.gif" width="94" height="22" alt="" border="0"><span class="text">My Profile</span></a>
</div>
</div>
<div id="GlobalNavigation">
<div class="button" id="NavigateHome">
<a href="#" title="Go Home"><img src="framework/images/GlobalNavigation/home.gif" width="41" height="16" alt="" border="0"><span class="text">Home</span></a>
</div>
<div class="button" id="NavigateLegal">
<a href="#" title="Go to Legal"><img src="framework/images/GlobalNavigation/legal.gif" width="65" height="16" alt="" border="0"><span class="text">Legal</span></a>
</div>
<div class="button" id="NavigateSecurity">
<a href="#" title="Go to Security"><img src="framework/images/GlobalNavigation/security.gif" width="65" height="16" alt="" border="0"><span class="text">Security</span></a>
</div>
<div class="button" id="NavigatePrivacy">
<a href="#" title="Go to Privacay"><img src="framework/images/GlobalNavigation/privacy.gif" width="65" height="16" alt="" border="0"><span class="text">Privacy</span></a>
</div>
</div>
<div id="ContentNavigation">
<div class="button" id="NavigateSignOut">
<a href="#" title="Sign Out"><img src="framework/images/GlobalNavigation/signout.gif" width="49" height="16" alt="" border="0"><span class="text">Sign out</span></a>
</div>
<div class="button" id="NavigateContact">
<a href="#" title="Contact Us"><img src="framework/images/GlobalNavigation/contact.gif" width="52" height="16" alt="" border="0"><span class="text">Contact</span></a>
</div>
<div class="button" id="NavigateHelp">
<a href="#" title="Get Help"><img src="framework/images/GlobalNavigation/help.gif" width="37" height="16" alt="" border="0"><span class="text">Help</span></a>
</div>
<div class="button" id="NavigatePrint">
<a href="#" title="Print Current Page"><img src="framework/images/GlobalNavigation/print.gif" width="34" height="16" alt="" border="0"><span class="text">Print</span></a>
</div>
</div>
</div>
<div class="offerpresentment">
<img src="framework/images/OfferPresentment/Photo.gif" width="96" height="36" alt="" border="0">
<h1>
Offer Present
</h1>
<p>
Fill this space with the text of your offer. Keep in mind that the box is a fixed size and your text will be truncated.
</p>
<p class="more">
<a href="#" title="Learn more about this offer">More...</a>
</p>
</div>
<div class="content" id="AccountSummary">
<h1 id="PageTitle">
Account Summary
</h1>
<div id="Welcome">
Welcome <span class="membername">Martha Stewart</span>. You have <a href="#" class="Messages Link" title="View your messages">3 new messages</a>.
</div>
<form action="#" method="post" name="ChangeSession" id="ChangeSession" title="Switch to different member session">
<div>
Switch to Member <select name="OpenSessions" id="OpenSessions">
<option selected>
Select a member to switch to
</option>
<option>
Member Number 348232
</option>
<option>
Open a new member session
</option>
</select><input type="submit" name="submit" id="submit" value="Switch">
</div>
</form>
<div class="summarygroup" id="AccountsSummary">
<h1>Accounts</h1>
<form action="#" method="post" name="DownloadAccount" id="DownloadAccount" title="Download selected accounts">
<div class="summarydata">
<table cellspacing="0" cellpadding="2" border="0" summary="Account Summary. Click the Account name to get details of the account" class="summarydata" >
<caption>
Account summary
</caption>
<colgroup>
<col width="*"/>
<col width="*"/>
<col width="90"/>
<col width="90"/>
<col width="80"/>
</colgroup>
<tr class="header">
<th class="accountname" colspan="3">
Account Name
</th>
<th class="currency">
Balance
</th>
<th class="checkbox">
Download <a href="javascript:void(1)" title="Click here to select all accounts for download" class="buton">[Select All]</a>
</th>
</tr>
<tr class="even">
<td class="accountname" colspan="3">
<a href="#" title="Click here to view the statement of this account">001 Investment Savings</a>
</td>
<td class="currency">
$200.00
</td>
<td class="checkbox">
<input type="checkbox" name="AccountID" value="001">
</td>
</tr>
<tr class="odd">
<td class="accountname" colspan="3">
<a href="#" title="Click here to view the statement of this account">002 Chequing Savings</a>
</td>
<td class="currency">
$200.00
</td>
<td class="checkbox">
<input type="checkbox" name="AccountID" value="002">
</td>
</tr>
<tr class="even">
<td class="accountname" colspan="3">
<a href="#" title="Click here to view the statement of this account">003 RRSP</a>
</td>
<td class="currency">
$200.00
</td>
<td class="checkbox">
<input type="checkbox" name="AccountID" value="003">
</td>
</tr>
</table>
<div class="submit">
<input type="submit" name="submit" id="submit" value="Download"> to <select name="format" id="format">
<option selected>
Select Download format
</option>
<option>
Quicken
</option>
<option>
MSN Money
</option>
<option>
Ascii
</option>
</select>
</div>
</div>
</form>
</div>
<div class="summarygroup" id="ScheduledBillPaymentsSummary">
<h1>
Scheduled Bill Payments
</h1>
<table cellspacing="0" cellpadding="2" border="0" summary="Summary of Scheduled Bill Payments" class="summarydata" >
<caption>
Scheduled Payment summary
</caption>
<colgroup>
<col width="*"/>
<col width="*"/>
<col width="90"/>
<col width="90"/>
<col width="80"/></colgroup>
<tr class="header">
<th class="accountname">
From Account Name
</th>
<th class="vendorname">
Vendor
</th>
<th class="date">
Date
</th>
<th class="currency">
Amount
</th>
<th class="text">
</th>
</tr>
<tr class="even">
<td class="accountname">
001 Investment Savings
</td>
<td class="vendorname">
Visa #4444444444444444
</td>
<td class="date">
10-Jan-2002
</td>
<td class="currency">
$100.00
</td>
<td class="text">
<a href="#" title="Delete this scheduled bill payment">Delete</a>
</td>
</tr>
<tr class="odd">
<td class="accountname">
001 Investment Savings
</td>
<td class="vendorname">
Telus #34343434
</td>
<td class="date">
10-Jan-2002
</td>
<td class="currency">
$100.00
</td>
<td class="text">
<a href="#" title="Delete this scheduled bill payment">Delete</a>
</td>
</tr>
<tr class="even">
<td class="accountname">
001 Investment Savings
</td>
<td class="vendorname">
Shaw Cable Systems
</td>
<td class="date">
10-Jan-2002
</td>
<td class="currency">
$100.00
</td>
<td class="text">
<a href="#" title="Delete this scheduled bill payment">Delete</a>
</td>
</tr>
</table>
</div>
<div class="summarygroup" id="ScheduledTransfersSummary">
<h1>
Scheduled Transfers
</h1>
<table cellspacing="0" cellpadding="2" border="0" summary="Summary of Scheduled Transfers" class="summarydata" >
<caption>
Scheduled Transfer Summary
</caption><colgroup>
<col width="*"/>
<col width="*"/>
<col width="90"/>
<col width="90"/>
<col width="80"/></colgroup>
<tr class="header">
<th class="accountname">
From Account Name
</th>
<th class="accountname">
To Account name
</th>
<th class="date">
Date
</th>
<th class="currency">
Amount
</th>
<th class="text">
</th>
</tr>
<tr class="even">
<td class="accountname">
001 Investment Savings
</td>
<td class="vendorname">
002 Chequing Savings
</td>
<td class="date">
10-Jan-2002
</td>
<td class="currency">
$3100.00
</td>
<td class="text">
<a href="#" title="Delete this scheduled transfer">Delete</a>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
--==IMail_v5.0==--
Received on Friday, 15 March 2002 19:32:12 UTC