Keeping row height constant when individual columns expand

38 replies [Last post]

Tue, 2011-01-18 20:25

VirgilMachine

Offline

Regular

Last seen: 11 years 6 weeks ago

Timezone: GMT-4

Joined: 2011-01-18

Posts: 19

Points: 21

I'm trying to replicate what I had in html tables with css div. The final (I hope) problem is that as I populate cells with data retrieved from a MySQL data base there are columns that want to expand beyond the default height. When that happens, that cell overlaps the next row. If I use min-height, the cell alignment goes haywire because other cells are below the minimum. The workaround is to increase the default height, but that doesn't make me love divs. Is there a solution to this?

Here's my code (stripped down--there's a lot more to the application--and sanitized for anonymity).

Thank you.

body,
html {
margin:0;
padding:0;
color:#000;
background:LightBlue;
}
#wrap {
width:99.5%;
margin:0 auto;
background:LightBlue;
padding:0px 0px 0px 0px;
border: none;
}
#p {
float:left;
width:72.5%;
padding: 0px 0px 0px 0px;
border: 3px solid navy;
}
# li {
border-bottom: 1px solid navy;
height: 36px;
font-size:small;
}
#p li.header {
border-bottom: 1px solid navy;
font-weight:bold;
font-size:medium;
height: 24px;
padding:0px 0px 0px 0px;
}
#p ul {
margin:0;
padding:0px;
list-style:none;
}
#p p {
font-weight:bold;
font-size: medium:
padding: 0px 0px 0px 0px;
}
#title {
border-bottom: 1px solid navy;
width:100%;
}
#button {
float:left;
border-bottom: 1px solid navy;
border-right: 1px solid navy;
width:10%;
}
#pt {
float:left;
border-bottom: 1px solid navy;
border-right: 1px solid navy;
width:20%;
}
#c {
float:left;
border-bottom: 1px solid navy;
border-right: 1px solid navy;
width:30%;
}
#ex {
float:left;
border-bottom: 1px solid navy;
border-right: 1px solid navy;
width:19%;
}
#az {
float:left;
border-bottom: 1px solid navy;
border-right: 1px solid navy;
width:9%;
}
#ep {
float:left;
border-bottom: 1px solid navy;

width:11%;
}

// code to connect to mysql and do do some other stuff goes here
$cl=field_already_retrieved_from db;
echo "<div id=wrap>"; //wrapper for entire page (the real application does a lot more than this section
$result = mysql_query
//sql select statment goes here
$num_rows = mysql_num_rows($result);
echo "<div id='p'>"; //wrapper for p's
echo "<div id='title'>";
echo "<ul><li class=header>Lines</li></ul>";
echo "</div>"; //end title
while($row = mysql_fetch_array($result))
{
$p=$row['p'];
$v=$row['V'];
echo "<form action='detail.php' method='post'> ";
echo "<div id='button'>"; //button to display line detail
echo "<ul><li>";
echo "<input type='submit' class='btn' name='line' value ='Detail'><input type='hidden' name='p' value ='$p'><input type='hidden' name='v' value ='$v'><input type='hidden' name='cl' value ='$cl'>";
echo "</li></ul>";
echo "</div>"; //end button
echo "</form>";
echo "<div id='pt'>";
echo "<ul><li>";
echo $row['pt'];
echo "</li></ul>";
echo "</div>"; //end pt
echo "<div id='c'>";
echo "<ul><li>";
echo $row['c'] . "/" . $row['PN'];
echo "</li></ul>";
echo "</div>";//end c
echo "<div id='ex'>";
echo "<ul><li>";
echo $row['Ex'];
echo "</li></ul>";
echo "</div>"; //end ex
echo "<div id='az'>";
echo "<ul><li>";
echo $row['az'];
echo "</li></ul>";
echo "</div>"; //end az
echo "<div id='ep'>";
echo "<ul><li>";
echo $row['ep'];
echo "</li></ul>";
echo "</div>"; //end ep
echo "</form>";
} // end while (select lines from database)
echo "</div>"; //end p--wrap for lines
echo "</div>"; //end wrap--entire page
mysql_close($con);

Virgil Machine

Tags:

Tue, 2011-01-18 22:07

Deuce

Offline

Guru

Somewhere, USA

Last seen: 4 years 45 weeks ago

Somewhere, USA

Timezone: GMT-5

Joined: 2005-11-20

Posts: 4424

Points: 1843

Please provide us HTML, not

Please provide us HTML, not PHP.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Wed, 2011-01-19 02:54

VirgilMachine

Offline

Regular

Last seen: 11 years 6 weeks ago

Timezone: GMT-4

Joined: 2011-01-18

Posts: 19

Points: 21

Deuce wrote: Please provide

Deuce wrote:

Please provide us HTML, not PHP.

Sorry, but that's my code, and that's the CSS problem I'm having.

How should I get help wiht this?

Virgil Machine

Wed, 2011-01-19 03:58

Verschwindende

Offline

Guru

Last seen: 5 days 5 hours ago

Timezone: GMT-4

Joined: 2009-10-09

Posts: 2050

Points: 2282

Thepineapplehead would say

Thepineapplehead would say something like "here's my car's gas cap can you tell me why it won't start?"

Show what the browser sees or no one can help.

Wed, 2011-01-19 04:49

Deuce

Offline

Guru

Somewhere, USA

Last seen: 4 years 45 weeks ago

Somewhere, USA

Timezone: GMT-5

Joined: 2005-11-20

Posts: 4424

Points: 1843

VirgilMachine wrote: Sorry,

VirgilMachine wrote:

Sorry, but that's my code, and that's the CSS problem I'm having.

How should I get help wiht this?

At some point you open this up in a browser and the server outputs HTMl to the browser to see.
Please View Source, select all, copy & paste.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Wed, 2011-01-19 16:55

VirgilMachine

Offline

Regular

Last seen: 11 years 6 weeks ago

Timezone: GMT-4

Joined: 2011-01-18

Posts: 19

Points: 21

Thank you. I modified text

Thank you. I modified text that could identify people. The format problem is still there. The workaround is to change the height of #policy li to 36px, but I don't want a fixed height. I tried a div for the row, but that didn't change anything. Note that this the data is retrieved from a database, so I have to deal with what I get.

My browser is Firefox 3.6.13 on an ubuntu lucid machine.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<html>
<head>
<title> Policies for Client </title>
<meta http-equiv="content-type" 
		content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
 
 
<link type="text/css" rel="stylesheet" href="/style/xxstyle.css" >
<style type="text/css">
</style>
<style type="text/css" media="screen, print, projection">
	body,
	html {
		margin:0;
		padding:0;
		color:#000;
		background:LightBlue;
	}
	#wrap {
		width:99.5%;
		margin:0 auto;
		background:LightBlue;
   		padding:0px 0px 0px 0px;
		border: none;
	}
	#header {
		width 98%;
 		background:LightBlue;
   		padding:0px 0px 0px 0px;
		border-bottom: 3px solid navy;
	}
	#header p {
		font-size:small;
	}
	#header li {
		border-bottom: 1px solid navy;
		height: 24px;
	}
	#header li.caption {
		border-bottom: 1px solid navy;
		font-size:small;
		height: 24px;
		padding:0px 0px 0px 5px;
	}
	#header	ul {
		margin:0;
		padding:0px;
		list-style:none;
	}
	#header input {
		width:100%;
		padding: 5px 0 0 0;
	}
	#header TEXTAREA {
		width:98%;
		font-family: "Times New Roman", Times, serif;
		font-weight: normal;
		font-size: medium;
		background-color:AliceBlue;
		color:navy;
	}
	#headcol1 {
		float:left;
		width:25%;
		border-left: 3px solid navy;
		border-right: 1px solid navy;
 
		border-top: 3px solid navy;
   		padding:3px 0px 0px 0px;
	}
	#headcol2 {
		float:left;
		width:25%;
		border-right: 1px solid navy;
 
		border-top: 3px solid navy;
  		padding:3px 0px 0px 0px;
	}
	#headcol3 {
		float:left;
		width:15%;
		border-right: 1px solid navy;
 
		border-top: 3px solid navy;
   		padding:3px 0px 0px 0px;
	}
	#headcol4 {
		float:left;
		width:11%;
		border-right: 1px solid navy;
 
		border-top: 3px solid navy;
   		padding:3px 0px 0px 0px;
	}
	#headcol5 {
		float:left;
		width:23%;
   		padding:3px 0px 8px 0px;
 
		border-top: 3px solid navy;
		border-right: 3px solid navy;
	}
	#headcol5 li {
		border: none;
		height: 24px;
	}
	h1 {
	    margin:0;
	    text-align: center;
   	}
	#nav {
		padding:5px 10px;
		background:#c99;
	}
	#nav ul {
		margin:0;
		padding:0;
		list-style:none;
	}
	#nav li {
		display:inline;
		margin:0;
		padding:0;
	}
	#policy{
		float:left;
		width:72.5%;
		padding: 0px 0px 0px 0px;
		border: 3px solid navy;
	}
	#policy li {
		border-bottom: 1px solid navy;
		height: 24px;
		font-size:small;
	}
	#policy li.header {
		border-bottom: 1px solid navy;
		font-weight:bold;
		font-size:medium;
		height: 24px;
		padding:0px 0px 0px 0px;
	}
	#policy	ul {
		margin:0;
		padding:0px;
		list-style:none;
	}
	#policy p {
		font-weight:bold;
		font-size: medium:
		padding: 0px 0px 0px 0px;	
	}
	#title {
		border-bottom: 1px solid navy;
		width:100%;
	}
	#button {
		float:left;
		border-bottom: 1px solid navy;
		border-right: 1px solid navy;
		width:10%;
	}
	#poltype {
		float:left;
		border-bottom: 1px solid navy;
		border-right: 1px solid navy;
		width:20%;
	}
	#company {
		float:left;
		border-bottom: 1px solid navy;
		border-right: 1px solid navy;
		width:30%;
	}
	#exposure {
		float:left;
		border-bottom: 1px solid navy;
		border-right: 1px solid navy;
		width:19%;
	}
	#azp {
		float:left;
		border-bottom: 1px solid navy;
		border-right: 1px solid navy;
		width:9%;
	}
	#expiration {
		float:left;
		border-bottom: 1px solid navy;
 
		width:11%;
	}
	#related {
		float:left;
		width:72.5%;
		padding: 0px 0px 0px 0px;
		border: 3px solid navy;
	}
	#related li {
		border-bottom: 1px solid navy;
		height: 24px;
		font-size:small;
	}
	#related li.header {
		border-bottom: 1px solid navy;
		font-weight:bold;
		font-size:medium;
		min-height: 24px;
		padding:0px 0px 0px 0px;
	}
	#related ul {
		margin:0;
		padding:0px;
		list-style:none;
	}
	#related p {
		font-weight:bold;
		font-size: medium:
		padding: 0px 0px 0px 0px;	
	}
	#reltitle {
		border-bottom: 1px solid navy;
		font-weight:bold;
		font-size: medium:
		width:100%;
		min-height: 24px;
	}
	#clibutton {
		float:left;
		border-bottom: 1px solid navy;
		border-right: 1px solid navy;
		width:13.5%;
	}
	#relclient {
		float:left;
		font-weight:bold;
		font-size: medium:
		border-bottom: 1px solid navy;
		border-right: 1px solid navy;
		width:86%;
	}
	h2 {
		margin:0 0 1em;
                background:LightBlue;
	}
	h4 {
		font-family:"sans-serif", Arial, Helvetica, Verdana;
		color:cyan;
		background-color:LightBlue; 
		padding:.5em; 
		text-align:right; 
		font-size:.5em;
		caption-side:bottom;
		padding-bottom:2em;
		padding-right:5px;
 	}
 
	#trans {
		float:right;
		width:30%;
		padding:5px 10px 0px;
		font-family: "Times New Roman", Times, serif;
		font-weight: normal;
		font-size: small;
		border-collapse: collapse;
		border:3px solid navy;
		white-space: wrap;
		background-color:LightBlue;
 
	}	
	#transwrapper {
		float:right;
		width:25%;
		font-family: "Times New Roman", Times, serif;
		font-weight: normal;
		font-size: small;
		border-collapse: collapse;
		border-top:3px solid navy;
		border-bottom:3px solid navy;
		border-left:3px solid navy;
		border-right:3px solid navy;
		white-space: wrap;
		background-color:LightBlue;
		padding: 0px 5px 0px 0px;
 
	}
	#transitem {
		float:none;
		width:100%;
		font-family: "Times New Roman", Times, serif;
		font-weight: normal;
		font-size: small;
		border-collapse: collapse;
		border-top: 1px solid navy;
		white-space: wrap;
		background-color:LightBlue;
		padding: 0px 0px 0px 5px;
	}
	#transitem	ul {
		margin:0;
		padding:0px;
		list-style:none;
	}
	#transitem li {
		margin:0;
		padding:0px;
	}
	#transitem p {
		padding: 0px 5px 0px 0px;
		margin:0;
 	}
	hr {
		width: 100%;
		border-bottom: 1px solid navy:
		padding:0px;	
 	}
	#footer {
		clear:both;
		padding:5px 10px;
		background:LightBlue;
		width:25%;
	}
	#footer p {
		margin:0;
    }
	#footer ul {
		margin:0;
		padding:0;
		list-style:none;
	}
	#footer li {
		display:inline;
		margin:0;
		padding:0;
	}
 
	#footer input {
		color: navy;
		font-family: "Times New Roman", Times, serif;
		font-weight: normal;
		font-size: medium;
		border: none;
		background-color: AliceBlue;
 
	#footer input.btn { 
	  	border:1px solid; 
		color:navy;
	}
	* html #footer {
		height:1px;
	}
	</style>
</head>
 
<body>
<div id='wrap'><div id='header'><h1>Policies For Client</h1><form action='policiesforclient.php' method='post'> <div id='headcol1'><ul><li><textarea class=apos name='name1' rows=1>Last, First</textarea></li><li><textarea class=apos name='name2' rows=1></textarea></li><li><input type='text' name='mail1' value='999 Street'</li><li><input type='text' name='mail2' value=''. ></li><li><input type='text' name='mailtown' value='City'.></li><li><input type='text' name='home' value='999-999-9999'. ></li><li class=caption>home phone</li><li class=caption>salutation:</li><li style='padding-left:5%;'><input class='btn' style='width:95%; ' type='submit' value='Update Client'><input type='hidden' name='you' value='u'></li></ul></div><div id='headcol2'><ul><li class=caption>Clientindex</li><li class=caption>Spouseindex<li class=caption>Jointindex</li><li class=caption>Active</li><li><input type='text' name='mailst' value='ST'></li></li><li><input type='text' name='work' value=''></li><li class=caption>work phone</li><li><textarea class=apos name='sal' rows=1>Ms. Last</textarea></li><li></li></ul></div><div id='headcol3'><ul><li><input type='text' name='clientidx' value='99999'> </li><li><input type='text' name='spouseidx' value=''> </li><li><input type='text' name='jointidx' value='99999'> </li><li><input name=active type='checkbox' checked></li><li><input type='text' name='mailzip' value='99999'> </li><li><input type='text' name='fax' value=''> </li><li class=caption>fax</li><li class=caption>email</li><li></li></ul></div><div id='headcol4'><ul><li class=caption></li><li class=caption></li><li class=caption></li><li class=caption>Office</li><li><input type='text' name='agency' value='C'></li><li><input type='text' name='cell' value=''></li><li class=caption>cell</li><li><input type='text' name='email' value=''></li><li></li></ul></div><div id='headcol5'><ul><li class=caption>Notes</li><li><textarea name='xref' rows='9' cols=1>Also see other human </textarea></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div></form><div id='policy'><div id='title'><ul><li class=header>Policies</li></ul></div><form action='policydetaila.php' method='post'> <div id='button'><ul><li><input type='submit' class='btn' name='policy' value ='Detail'><input type='hidden' name='policy' value ='13553'><input type='hidden' name='vehicle' value ='1767'><input type='hidden' name='clientidx' value ='30015'></li></ul></div></form><div id='poltype'><ul><li>Personal Auto</li></ul></div><div id='company'><ul><li>Company/Policy</li></ul></div><div id='exposure'><ul><li>Car 1</li></ul></div><div id='azp'><ul><li>$999.00</li></ul></div><div id='expiration'><ul><li>12/31/2011</li></ul></div></form><form action='policydetaila.php' method='post'> <div id='button'><ul><li><input type='submit' class='btn' name='policy' value ='Detail'><input type='hidden' name='policy' value ='99999'><input type='hidden' name='vehicle' value ='9999'><input type='hidden' name='clientidx' value ='99999'></li></ul></div></form><div id='poltype'><ul><li>Policy Type</li></ul></div><div id='company'><ul><li>Company/Policy</li></ul></div><div id='exposure'><ul><li>Car 2</li></ul></div><div id='azp'><ul><li></li></ul></div><div id='expiration'><ul><li>12/31/2011</li></ul></div></form></div><div id='transwrapper'><div id='transitem'><p>MM-DD-YYYY hh:mm:ss AM Txn99999 ii we gather together.</p></div><div id='transitem'><p>MM-DD-YYYY hh:mm:ss AM Txn99999 ii we gather together.</p></div><div id='transitem'><p>MM-DD-YYYY hh:mm:ss AM Txn99999 ii we gather together.</p></div><div id='transitem'><p>MM-DD-YYYY hh:mm:ss AM Txn99999 ii we gather together.</p></div><div id='transitem'><p>MM-DD-YYYY hh:mm:ss AM Txn99999 ii we gather together.</p></div><div id='transitem'><p>MM-DD-YYYY hh:mm:ss AM Txn99999 ii we gather together.</p></div><div id='transitem'><p>MM-DD-YYYY hh:mm:ss AM Txn99999 ii we gather together.</p></div><div id='transitem'><p>MM-DD-YYYY hh:mm:ss AM Txn99999 ii we gather together.</p></div></div></div><div id='related'><div id='reltitle'><ul><li class=header>Related Policies</li></ul></div><div id='clibutton'<form action='policiesforclient.php' method='post'> <ul><li><input type='submit' class='btn' value ='View Client'><input type='hidden' name='clientidx' value ='99999'></li></ul></form></div><div id=relclient><ul><li>Client1 Client2 Street City, ST zip</li></ul></div></div><div id='policy'><form action='policydetailota.php' method='post'> <div id='button'><ul><li><input type='submit' class='btn' name='policy' value ='Detail'><input type='hidden' name='policy' value ='99999'><input type='hidden' name='clientidx' value =''></li></ul></div></form><div id='poltype'><ul><li>Policy Type</li></ul></div><div id='company'><ul><li>Company/Policy Number</li></ul></div><div id='exposure'><ul><li>Street City</li></ul></div><div id='azp'><ul><li>$9,999.00</li></ul></div><div id='expiration'><ul><li>1/1/2012</li></ul></div></form><form action='policydetailota.php' method='post'> <div id='button'><ul><li><input type='submit' class='btn' name='policy' value ='Detail'><input type='hidden' name='policy' value ='99999'><input type='hidden' name='clientidx' value =''></li></ul></div></form><div id='poltype'><ul><li>Policy Type</li></ul></div><div id='company'><ul><li>XXXXXX XXXXXX/XXXX XXXXXX/999999999999</li></ul></div><div id='exposure'><ul><li>1066 XXXXXX XXXXXXXXXXXX XXXXXXXX</li></ul></div><div id='azp'><ul><li>$999.99</li></ul></div><div id='expiration'><ul><li>1/1/2011</li></ul></div></form><form action='policydetailota.php' method='post'> <div id='button'><ul><li><input type='submit' class='btn' name='policy' value ='Detail'><input type='hidden' name='policy' value ='99999'><input type='hidden' name='clientidx' value =''></li></ul></div></form><div id='poltype'><ul><li>Policy Type</li></ul></div><div id='company'><ul><li>xxxxxxxx/xxxxxxxx xxx/9XXX99999</li></ul></div><div id='exposure'><ul><li>xxx xxxxxxxx xxxxxxxx</li></ul></div><div id='azp'><ul><li>$0.00</li></ul></div><div id='expiration'><ul><li>1/1/2011</li></ul></div></form></div><table><tr><td colspan=6><hr style='height:1em; background-color:navy'</hr></td></tr><tr><td></td><td></td><td style=font-size:small;>clientuntil?</td><td colspan=3 rowspan=7>First Last<br/>999 Street<br>City, St zip<br/><br/>Dear M. Last Name:</td></tr><tr><td style=font-size:small;>refby:</td><td style=font-size:small;>client since:</td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td style=font-size:small;>link1</td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td style=font-size:small;>link2</td></tr><tr><td></td><td></td><td></td></tr><form name='input' action='clientlist.php' method='get'><tr><td colspan=6><input class='btn' type='submit' value='Back to Client List' /td></form></table></div><br/>
 
</body></html

Virgil Machine

Wed, 2011-01-19 17:08

Verschwindende

Offline

Guru

Last seen: 5 days 5 hours ago

Timezone: GMT-4

Joined: 2009-10-09

Posts: 2050

Points: 2282

Hmm. You're going to have to

Hmm. You're going to have to validate your code. My IDE won't even recognize it to format the markup to make it readable.

Wed, 2011-01-19 18:20

VirgilMachine

Offline

Regular

Last seen: 11 years 6 weeks ago

Timezone: GMT-4

Joined: 2011-01-18

Posts: 19

Points: 21

I copied what I pasted, saved

I copied what I posted, saved it as an html and executed it (which is what I did before I posted, also). My browser shows what I expect. What other validation do I need?

Virgil Machine

Wed, 2011-01-19 18:13

Verschwindende

Offline

Guru

Last seen: 5 days 5 hours ago

Timezone: GMT-4

Joined: 2009-10-09

Posts: 2050

Points: 2282

http://validator.w3.org/#vali

http://validator.w3.org/#validate_by_input

http://csscreator.com/beforepost

Thu, 2011-01-20 03:01

VirgilMachine

Offline

Regular

Last seen: 11 years 6 weeks ago

Timezone: GMT-4

Joined: 2011-01-18

Posts: 19

Points: 21

Thank you. I learned

Thank you. I learned something, but the problem is still there.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title> Policies for Client </title>
<meta http-equiv="content-type" 
		content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
 
 
<link type="text/css" rel="stylesheet" href="/style/xxstyle.css" />
<style type="text/css">
</style>
<style type="text/css" media="screen, print, projection">
	body,
	html {
		margin:0;
		padding:0;
		color:#000;
		background:LightBlue;
	}
	#wrap {
		width:99.5%;
		margin:0 auto;
		background:LightBlue;
   		padding:0px 0px 0px 0px;
		border: none;
	}
	#header {
		width 98%;
 		background:LightBlue;
   		padding:0px 0px 0px 0px;
		border-bottom: 3px solid navy;
	}
	#header p {
		font-size:small;
	}
	#header li {
		border-bottom: 1px solid navy;
		height: 24px;
	}
	#header li.caption {
		border-bottom: 1px solid navy;
		font-size:small;
		height: 24px;
		padding:0px 0px 0px 5px;
	}
	#header	ul {
		margin:0;
		padding:0px;
		list-style:none;
	}
	#header input {
		width:100%;
		padding: 5px 0 0 0;
	}
	#header TEXTAREA {
		width:98%;
		font-family: "Times New Roman", Times, serif;
		font-weight: normal;
		font-size: medium;
		background-color:AliceBlue;
		color:navy;
	}
	#headcol1 {
		float:left;
		width:25%;
		border-left: 3px solid navy;
		border-right: 1px solid navy;
 
		border-top: 3px solid navy;
   		padding:3px 0px 0px 0px;
	}
	#headcol2 {
		float:left;
		width:25%;
		border-right: 1px solid navy;
 
		border-top: 3px solid navy;
  		padding:3px 0px 0px 0px;
	}
	#headcol3 {
		float:left;
		width:15%;
		border-right: 1px solid navy;
 
		border-top: 3px solid navy;
   		padding:3px 0px 0px 0px;
	}
	#headcol4 {
		float:left;
		width:11%;
		border-right: 1px solid navy;
 
		border-top: 3px solid navy;
   		padding:3px 0px 0px 0px;
	}
	#headcol5 {
		float:left;
		width:23%;
   		padding:3px 0px 8px 0px;
 
		border-top: 3px solid navy;
		border-right: 3px solid navy;
	}
	#headcol5 li {
		border: none;
		height: 24px;
	}
	h1 {
	    margin:0;
	    text-align: center;
   	}
	#nav {
		padding:5px 10px;
		background:#c99;
	}
	#nav ul {
		margin:0;
		padding:0;
		list-style:none;
	}
	#nav li {
		display:inline;
		margin:0;
		padding:0;
	}
	div.policy{
		float:left;
		width:72.5%;
		padding: 0px 0px 0px 0px;
		border: 3px solid navy;
	}
	div.policy li {
		border-bottom: 1px solid navy;
		height: 24px;
		font-size:small;
	}
	div.policy li.header {
		border-bottom: 1px solid navy;
		font-weight:bold;
		font-size:medium;
		height: 24px;
		padding:0px 0px 0px 0px;
	}
	div.policy	ul {
		margin:0;
		padding:0px;
		list-style:none;
	}
	div.policy p {
		font-weight:bold;
		font-size: medium:
		padding: 0px 0px 0px 0px;	
	}
	#title {
		border-bottom: 1px solid navy;
		width:100%;
	}
	div.button {
		float:left;
		border-bottom: 1px solid navy;
		border-right: 1px solid navy;
		width:10%;
	}
	div.poltype {
		float:left;
		border-bottom: 1px solid navy;
		border-right: 1px solid navy;
		width:20%;
	}
	div.company {
		float:left;
		border-bottom: 1px solid navy;
		border-right: 1px solid navy;
		width:30%;
	}
	div.exposure {
		float:left;
		border-bottom: 1px solid navy;
		border-right: 1px solid navy;
		width:19%;
	}
	div.azp {
		float:left;
		border-bottom: 1px solid navy;
		border-right: 1px solid navy;
		width:9%;
	}
	div.expiration {
		float:left;
		border-bottom: 1px solid navy;
 
		width:11%;
	}
	#related {
		float:left;
		width:72.5%;
		padding: 0px 0px 0px 0px;
		border: 3px solid navy;
	}
	#related li {
		border-bottom: 1px solid navy;
		height: 24px;
		font-size:small;
	}
	#related li.header {
		border-bottom: 1px solid navy;
		font-weight:bold;
		font-size:medium;
		min-height: 24px;
		padding:0px 0px 0px 0px;
	}
	#related ul {
		margin:0;
		padding:0px;
		list-style:none;
	}
	#related p {
		font-weight:bold;
		font-size: medium:
		padding: 0px 0px 0px 0px;	
	}
	#reltitle {
		border-bottom: 1px solid navy;
		font-weight:bold;
		font-size: medium:
		width:100%;
		min-height: 24px;
	}
	#clibutton {
		float:left;
		border-bottom: 1px solid navy;
		border-right: 1px solid navy;
		width:13.5%;
	}
	#relclient {
		float:left;
		font-weight:bold;
		font-size: medium:
		border-bottom: 1px solid navy;
		border-right: 1px solid navy;
		width:86%;
	}
	h2 {
		margin:0 0 1em;
                background:LightBlue;
	}
	h4 {
		font-family:"sans-serif", Arial, Helvetica, Verdana;
		color:cyan;
		background-color:LightBlue; 
		padding:.5em; 
		text-align:right; 
		font-size:.5em;
		caption-side:bottom;
		padding-bottom:2em;
		padding-right:5px;
 	}
 
	#trans {
		float:right;
		width:30%;
		padding:5px 10px 0px;
		font-family: "Times New Roman", Times, serif;
		font-weight: normal;
		font-size: small;
		border-collapse: collapse;
		border:3px solid navy;
		white-space: wrap;
		background-color:LightBlue;
 
	}	
	#transwrapper {
		float:right;
		width:25%;
		font-family: "Times New Roman", Times, serif;
		font-weight: normal;
		font-size: small;
		border-collapse: collapse;
		border-top:3px solid navy;
		border-bottom:3px solid navy;
		border-left:3px solid navy;
		border-right:3px solid navy;
		white-space: wrap;
		background-color:LightBlue;
		padding: 0px 5px 0px 0px;
 
	}
	div.transitem {
		float:none;
		width:100%;
		font-family: "Times New Roman", Times, serif;
		font-weight: normal;
		font-size: small;
		border-collapse: collapse;
		border-top: 1px solid navy;
		white-space: wrap;
		background-color:LightBlue;
		padding: 0px 0px 0px 5px;
	}
	div.transitem	ul {
		margin:0;
		padding:0px;
		list-style:none;
	}
	div.transitem li {
		margin:0;
		padding:0px;
	}
	div.transitem p {
		padding: 0px 5px 0px 0px;
		margin:0;
		height:36px;
 	}
	hr {
		width: 100%;
		border-bottom: 1px solid navy:
		padding:0px;	
 	}
	#footer {
		clear:both;
		padding:5px 10px;
		background:LightBlue;
		width:25%;
	}
	#footer p {
		margin:0;
    }
	#footer ul {
		margin:0;
		padding:0;
		list-style:none;
	}
	#footer li {
		display:inline;
		margin:0;
		padding:0;
	}
 
	#footer input {
		color: navy;
		font-family: "Times New Roman", Times, serif;
		font-weight: normal;
		font-size: medium;
		border: none;
		background-color: AliceBlue;
 
	#footer input.btn { 
	  	border:1px solid; 
		color:navy;
	}
	* html #footer {
		height:1px;
	}
	</style>
</head>
 
<body>
<div id='wrap'>
<div id='header'>
<h1>Policies For Client</h1><form action='policiesforclient.php' method='post'> <div id='headcol1'>
<ul>
<li><textarea class='apos' name='name1' rows='1' cols='1'>Last, First</textarea></li><li><textarea class='apos' name='name2' rows='1' cols='1'></textarea></li>
<li><input type='text' name='mail1' value='999 Street'/></li>
<li><input type='text' name='mail2' value=''/></li>
<li><input type='text' name='mailtown' value='City'/></li>
<li><input type='text' name='home' value='999-999-9999'/></li>
<li class='caption'>home phone</li>
<li class='caption'>salutation:</li>
<li style='padding-left:5%;'>
<input class='btn' style='width:95%; ' type='submit' value='Update Client'/>
<input type='hidden' name='you' value='u'/></li>
</ul>
</div>
<div id='headcol2'>
<ul>
<li class='caption'>Clientindex</li>
<li class='caption'>Spouseindex</li>
<li class='caption'>Jointindex</li>
<li class='caption'>Active</li>
<li><input type='text' name='mailst' value='ST'/></li>
<li><input type='text' name='work' value=''/></li>
<li class='caption'>work phone</li>
<li><textarea class='apos' name='sal' rows='1' cols='1'>Ms. Last</textarea></li>
<li></li>
</ul>
</div>
<div id='headcol3'>
<ul>
<li><input type='text' name='clientidx' value='99999'/></li>
<li><input type='text' name='spouseidx' value=''/></li>
<li><input type='text' name='jointidx' value='99999'/></li>
<li><input name='active' type='checkbox' checked='checked'/></li>
<li><input type='text' name='mailzip' value='99999'/></li>
<li><input type='text' name='fax' value=''/></li>
<li class='caption'>fax</li>
<li class='caption'>email</li>
<li></li>
</ul>
</div>
<div id='headcol4'>
<ul>
<li class='caption'></li>
<li class='caption'></li>
<li class='caption'></li>
<li class='caption'>Office</li>
<li><input type='text' name='agency' value='C'/></li>
<li><input type='text' name='cell' value=''/></li>
<li class='caption'>cell</li>
<li><input type='text' name='email' value=''/></li>
<li></li>
</ul>
</div>
<div id='headcol5'>
<ul>
<li class='caption'>Notes</li>
<li><textarea name='xref' rows='9' cols='1'>Also see other human </textarea></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</form>
<div class='policy'>
<div id='title'><ul><li class='header'>Policies</li></ul></div>
<form action='policydetaila.php' method='post'>
<div class='button'>
<ul>
<li><input type='submit' class='btn' name='policy' value ='Detail'/>
<input type='hidden' name='policy' value ='99999'/>
<input type='hidden' name='vehicle' value ='9999'/>
<input type='hidden' name='clientidx' value ='30015'/></li>
</ul>
</div>
</form>
<div class='poltype'><ul><li>Policy Type</li></ul></div>
<div class='company'><ul><li>Company/Policy</li></ul></div>
<div class='exposure'><ul><li>Car 1</li></ul></div>
<div class='azp'><ul><li>$999.00</li></ul></div>
<div class='expiration'><ul><li>12/31/2011</li></ul></div>
<form action='policydetaila.php' method='post'>
<div class='button'>
<ul>
<li>
<input type='submit' class='btn' name='policy' value ='Detail'/>
<input type='hidden' name='policy' value ='99999'/>
<input type='hidden' name='vehicle' value ='9999'/>
<input type='hidden' name='clientidx' value ='99999'/>
</li>
</ul>
</div>
</form>
<div class='poltype'><ul><li>Policy Type</li></ul></div>
<div class='company'><ul><li>Company/Policy</li></ul></div>
<div class='exposure'><ul><li>Car 2</li></ul></div>
<div class='azp'><ul><li></li></ul></div>
<div class='expiration'><ul><li>12/31/2011</li></ul></div>
</div>
<div id='transwrapper'>
<div class='transitem'><p>MM-DD-YYYY hh:mm:ss AM Txn99999 ii we gather together.</p></div><div class='transitem'><p>MM-DD-YYYY hh:mm:ss AM Txn99999 ii we gather together.</p></div><div class='transitem'><p>MM-DD-YYYY hh:mm:ss AM Txn99999 ii we gather together.</p></div><div class='transitem'><p>MM-DD-YYYY hh:mm:ss AM Txn99999 ii we gather together.</p></div><div class='transitem'><p>MM-DD-YYYY hh:mm:ss AM Txn99999 ii we gather together.</p></div><div class='transitem'><p>MM-DD-YYYY hh:mm:ss AM Txn99999 ii we gather together.</p></div><div class='transitem'><p>MM-DD-YYYY hh:mm:ss AM Txn99999 ii we gather together.</p></div><div class='transitem'><p>MM-DD-YYYY hh:mm:ss AM Txn99999 ii we gather together.</p></div>
</div>
</div>
<div id='related'>
<div id='reltitle'><ul><li class='header'>Related Policies</li></ul></div>
<div id='clibutton'>
<form action='policiesforclient.php' method='post'>
<ul><li><input type='submit' class='btn' value ='View Client'/>
<input type='hidden' name='clientidx' value ='99999'/>
</li></ul></form></div>
<div id='relclient'><ul><li>Client1 Client2 Street City, ST zip</li></ul></div>
</div>
<div class='policy'>
<form action='policydetailota.php' method='post'>
<div class='button'>
<ul><li><input type='submit' class='btn' name='policy' value ='Detail'/>
<input type='hidden' name='policy' value ='99999'/>
<input type='hidden' name='clientidx' value =''/>
</li></ul></div></form>
<div class='poltype'><ul><li>Policy Type</li></ul></div>
<div class='company'><ul><li>XXXXXX XXXXXX/XXXX XXXXXX/999999999999</li></ul></div>
<div class='exposure'><ul><li>1066 XXXXXX XXXXXXXXXXXX XXXXXXXX</li></ul></div>
<div class='azp'><ul><li>$999.99</li></ul></div>
<div class='expiration'><ul><li>1/1/2011</li></ul></div>
<form action='policydetailota.php' method='post'>
<div class='button'>
<ul><li><input type='submit' class='btn' name='policy' value ='Detail'/>
<input type='hidden' name='policy' value ='99999'/>
<input type='hidden' name='clientidx' value =''/>
</li></ul></div></form>
<div class='poltype'><ul><li>Policy Type</li></ul></div>
<div class='company'><ul><li>XXXXXX XXXXXX/XXXX XXXXXX/999999999999</li></ul></div>
<div class='exposure'><ul><li>1066 XXXXXX XXXXXXXXXXXX XXXXXXXX</li></ul></div>
<div class='azp'><ul><li>$999.99</li></ul></div>
<div class='expiration'><ul><li>1/1/2011</li></ul></div>
<form action='policydetailota.php' method='post'>
<div class='button'><ul><li><input type='submit' class='btn' name='policy' value ='Detail'/>
<input type='hidden' name='policy' value ='99999'/>
<input type='hidden' name='clientidx' value =''/>
</li></ul></div></form>
<div class='poltype'><ul><li>Policy Type</li></ul></div>
<div class='company'><ul><li>xxxxxxxx/xxxxxxxx xxx/9XXX99999</li></ul></div>
<div class='exposure'><ul><li>xxx xxxxxxxx xxxxxxxx</li></ul></div>
<div class='azp'><ul><li>$0.00</li></ul></div>
<div class='expiration'><ul><li>1/1/2011</li></ul></div>
</div>
<table>
<tr><td colspan='6'><hr style='height:1em; background-color:navy'/></td></tr>
<tr><td></td><td></td>
<td style='font-size:small;'>clientuntil?</td>
<td colspan='3' rowspan='7'>First Last<br/>999 Street<br/>City, St zip<br/><br/>Dear M. Last Name:</td></tr>
<tr><td style='font-size:small;'>refby:</td>
<td style='font-size:small;'>client since:</td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td>
<td style='font-size:small;'>link1</td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td>
<td style='font-size:small;'>link2</td></tr><tr><td></td><td></td><td></td></tr>
 
</table>
</div>
</body></html>

Virgil Machine

Thu, 2011-01-20 03:44

#10

Verschwindende

Offline

Guru

Last seen: 5 days 5 hours ago

Timezone: GMT-4

Joined: 2009-10-09

Posts: 2050

Points: 2282

VirgilMachine wrote: Thank

VirgilMachine wrote:

Thank you. I learned something, but the problem is still there. ...

That's fine. It's just that invalid code is hard to sift through.

Thu, 2011-01-20 03:54

#11

Verschwindende

Offline

Guru

Last seen: 5 days 5 hours ago

Timezone: GMT-4

Joined: 2009-10-09

Posts: 2050

Points: 2282

Hmm. Is the problem what

Hmm. Is the problem what occurs when you take the height: 24px; out of div.policy li ?

Why are these marked up as lists? I'm not sure that makes semantic sense to me.

Thu, 2011-01-20 13:30

#12

VirgilMachine

Offline

Regular

Last seen: 11 years 6 weeks ago

Timezone: GMT-4

Joined: 2011-01-18

Posts: 19

Points: 21

The problem is that, with

The problem is that, with height:24px, some lines overlap the ones below. Without height, the columns are all different widths (same as with min-height).

Semantic sense or not, with or without lists, is there a way to get each cell in a row to have the height of the largest cell without fixing the height (i.e., some rows will be have greater heights than others, depending on the single highest column)?

Thank you for your help.

Virgil Machine

Thu, 2011-01-20 15:05

#13

Verschwindende

Offline

Guru

Last seen: 5 days 5 hours ago

Timezone: GMT-4

Joined: 2009-10-09

Posts: 2050

Points: 2282

VirgilMachine wrote:...

VirgilMachine wrote:

... Semantic sense or not, with or without lists ...

Well, that may hold your answer. If it semantically could be a table then using table data cells would give you the behavior you require. That's why I asked why you used lists. It probably needs to be rewritten into a table. If not the whole thing, at least the parts that should be a table.

gary.turner and hugo seem to be the experts on semantic markup that answer my questions on the subject. Hopefully one of them will show up here.

Thu, 2011-01-20 15:55

#14

VirgilMachine

Offline

Regular

Last seen: 11 years 6 weeks ago

Timezone: GMT-4

Joined: 2011-01-18

Posts: 19

Points: 21

Verschwindende wrote: It

Verschwindende wrote:

It probably needs to be rewritten into a table. If not the whole thing, at least the parts that should be a table.

I originally wrote this using tables. I've been learning more about CSS, and I've read that tables are evil (although I cannot figure out why), so I decided to see if I could write it with CSS divs.

Are you telling me that tables are superior to css divs, at least for some applications? That makes sense to me, I'd just like to know what others think.

Thank you.

Virgil Machine

Thu, 2011-01-20 17:07

#15

Verschwindende

Offline

Guru

Last seen: 5 days 5 hours ago

Timezone: GMT-4

Joined: 2009-10-09

Posts: 2050

Points: 2282

VirgilMachine wrote:... Are

VirgilMachine wrote:

... Are you telling me that tables are superior ...

No. I'm telling you they have a semantic purpose, to lay out tabular data. If you have tabular data use a table. Some of what you have looks like tabular data to me but I'm not sure about the rest. However, I am pretty certain it's not a list.

Thu, 2011-01-20 17:29

#16

Hugo

Offline

Moderator

London

Last seen: 7 years 20 weeks ago

London

Joined: 2004-06-06

Posts: 15668

Points: 2806

Table or not a list of one

Table or not a list of one item never makes semantic sense to me <ul><li></li></ul> that's not a list!

As things stand there is little semantic expression or meaning to this data

<div class='poltype'><ul><li>Policy Type</li></ul></div>

followed by pieces of data.

This definitely feels like tabulated data, anything that is of this nature, a form with data even if only in pairs but that might be stuffed into and dragged back from a DB is nearly always best maintained and presented in a table th header 'scope="colgroup" colspan="2"' for 'policy' spanning two columns with your left hand column the tag/title/description the right the data. left hand column ought to be 'th scope="row"' to maintain the horizontal relationship.

Table are most definitely NOT evil they are in fact wonderful, cute and cuddly er maybe not but they are the best conceived of the markup elements and do work well FOR the correct purpose!

Iwould add one final note that perhaps one might consider using a DL list dt (definition term) and DD (definition description) it's a possibility?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Thu, 2011-01-20 17:40

#17

Verschwindende

Offline

Guru

Last seen: 5 days 5 hours ago

Timezone: GMT-4

Joined: 2009-10-09

Posts: 2050

Points: 2282

That's pretty much what I was

That's pretty much what I was thinking. If you make the whole thing a table you'll have to scope parts of it scope="row" and parts of it will have to have a head-row (<tr> containing <th>) even if it's display: none;. Actually, I'd like to see the original table as I'm thinking, and I am going to make an assumption here, that you were using the table as more of a layout device and that's where the line is drawn on the subject. It seems I just repeated what Hugo said as I wasn't paying as much attention as I should.

I'm sure, once again, that I'm being too pedantic on the subject.

Thu, 2011-01-20 18:19

#18

VirgilMachine

Offline

Regular

Last seen: 11 years 6 weeks ago

Timezone: GMT-4

Joined: 2011-01-18

Posts: 19

Points: 21

Thanks to both of you. I'll

Thanks to both of you. I'll post the code with tables tomorrow if I have time, over the weekend if not (I don't have access to the code today).

I posted this same issue on devshed css help forum a week ago and still have no response...so I'm impressed and thankful for your willingness to bear with me.

Honestly, I wasn't thinking about semantics, I was experimenting with getting the job done. What I'm doing is converting an MS Access application to MySQL/php for use on an intranet. I got it to work with tables...but went on to learn more about css and thought I'd try to add some more css stuff by converting the tables to divs as a learning exercise. So, I thank you for your help. I am meeting my objectives of learning and producing a better work product.

Virgil Machine

Thu, 2011-01-20 18:38

#19

Verschwindende

Offline

Guru

Last seen: 5 days 5 hours ago

Timezone: GMT-4

Joined: 2009-10-09

Posts: 2050

Points: 2282

De nada.VirgilMachine

De nada.

VirgilMachine wrote:

... I am meeting my objectives of learning and producing a better work product.

You can't ask for more than that.

Does the format have to remain like that or do you have some wiggle room for restructuring the layout? Just wondering.

Thu, 2011-01-20 19:56

#20

VirgilMachine

Offline

Regular

Last seen: 11 years 6 weeks ago

Timezone: GMT-4

Joined: 2011-01-18

Posts: 19

Points: 21

I have limited flexibility

I have limited flexibility with format.I can make changes that make sense. However, people have been using the Access application (some for years) so I'm not going to change stuff just for grins. Also, the design makes sense from a presentation standpoint.

Virgil Machine

Thu, 2011-01-20 21:06

#21

Verschwindende

Offline

Guru

Last seen: 5 days 5 hours ago

Timezone: GMT-4

Joined: 2009-10-09

Posts: 2050

Points: 2282

That's fine. I was just

That's fine. I was just wondering because laying it out may be easier if you could move a few items to a more logical position. Breaking a public facing interface is always a bad idea unless you like getting 300 calls per day wondering if it's ok to put a first name in the address column because it's where the old first name column used to be.

Sat, 2011-01-22 13:28

#22

VirgilMachine

Offline

Regular

Last seen: 11 years 6 weeks ago

Timezone: GMT-4

Joined: 2011-01-18

Posts: 19

Points: 21

OK. Here's the code: It will

OK.

Here's the code using tables: It will not validate because I have form tags inside the tables. I need them because I have a button on each row, and the actions are not all the same (display a client page or one of two pages for different policy types).

UPDATE 2011-1-21 20:40 GMT-5 (fixed some non form in table validation errors)

I open open to suggestions on how to design something that validates (as it did when I used divs instead of tables).

I could probably do something like have a div to wrap the whole page, create a table for the top section (main client data) within a 100% width div, then have 70% and 30% divs as in the original solution, with the 70% div including one or more tables. The problem would be to get the buttons their surrounding borders to line up with the tabular data in each row. I'd really appreciate some help with this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Policies for Client </title>
<meta http-equiv="content-type" 
		content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
 
 
<link type="text/css" rel="stylesheet" href="/style/dcstyle.css" />
<script type="text/javascript" src="/script/loadxmldoc.js"></script>
<style type="text/css">
</style>
</head>
<body>
<form action='policiesforclient.php' method='post'> <table style='width:100%;'><tr style='font-family:Times New Roman; font-size:1em;'><td style='width:25%;'><textarea class='apos' name='name1' rows='1' cols='1'>Last, First</textarea></td><td style='width:25%;'>ClientIndex</td><td style='width:15%;'><input type='text' name='clientidx' value='99999' /><input type='hidden' name='you' value='u'/></td><td style='width:10%;'></td><td style='width:20%;'>Notes</td></tr><tr><td style='width:25%;'><textarea class='apos' name='name2' rows='1' cols='1'>Last, First M.</textarea></td><td style='width:25%;'>SpouseIndex</td><td style='width:15%;'><input type='text' name='spouseidx' value='99999'/></td><td style='width:10%;'></td><td rowspan='7' style='vertical-align:top; width:20%'><textarea name='xref' rows='7' cols='1'>Cell phone# 555-555-1212</textarea></td></tr><tr><td style='width:25%;'><input type='text' name='mail1' value='nnn sreet'/></td><td style='width:25%;'>JointIndex</td><td style='width:15%;'><input type='text' name='jointidx' value='99999'/></td><td style='width:10%;'></td></tr><tr><td style='width:25%;'><input type='text' name='mail2' value=''/></td><td style='width:25%;'>Active</td><td style='width:15%;'><input name='active' type='checkbox' checked='checked'/></td><td style='width:10%;'>Office</td></tr><tr><td style='width:25%;'><input type='text' name='mailtown' value='Brewster'/></td><td style='width:25%;'><input type='text' name='mailst' value='MA'/></td><td style='width:15%;'><input type='text' name='mailzip' value='99999'/></td><td style='width:10%;'><input type='text' name='agency' value='X'/></td></tr><tr><td style='width:25%;'><input type='text' name='home' value='555-555-1212'/></td><td style='width:25%;'><input type='text' name='work' value='555-555-1212'/></td><td style='width:15%;'><input type='text' name='fax' value=''/></td><td style='width:10%;'><input type='text' name='cell' value=''/></td></tr><tr><td style='width:25%;'>home phone</td><td style='width:25%;'>work phone</td><td style='width:15%;'>fax</td><td style='width:10%;'>cell</td></tr><tr><td style='width:25%;'>salutation:</td><td style='width:25%;'><textarea class='apos' name='sal' rows='1' cols='1'>Mr. X and Ms. Y</textarea></td><td style='width:15%;'>email</td><td style='width:10%;'><input type='text' name='email' value=''/></td></tr><tr><td colspan='5'><input class='btn' type='submit' value='Update Client'/></td></tr></table></form><table class='trans'><tr><td>mm-dd-yyyy hh:mm:ss AM Txn99999 ii Some transaction</td></tr></table>
<table style='width:70%; font-size:medium'><tr><td colspan='6' style='font-weight:bold;'>Policies</td></tr>
<tr><td><form action='policydetailota.php' method='post'><input type='submit'  class='btn' name='policy' value ='Detail'/><input type='hidden' name='policy' value ='99999'/><input type='hidden' name='clientidx' value ='30970'/></form></td>
<td>Policy</td><td>Company/policy</td><td>nnn street, city</td><td align='right'>$9,999.99</td><td>mm/dd/yyyy</td></tr>
<tr><td><form action='policydetailota.php' method='post'><input type='submit'  class='btn' name='policy' value ='Detail'/><input type='hidden' name='policy' value ='99999'/><input type='hidden' name='clientidx' value ='30970'/></form></td>
<td> Policy</td><td>company/policy</td><td>exposure</td><td align='right'>$999.00</td><td>mm/dd/yyyy</td></tr>
<tr><td><form action='policydetailota.php' method='post'><input type='submit'  class='btn' name='policy' value ='Detail'/><input type='hidden' name='policy' value ='99999'/><input type='hidden' name='clientidx' value ='99999'/></form></td>
<td>exposure</td><td>XXXXXXXXXXXXXXXXXXXXXXXXX/nnnnnnnn</td><td>exposure</td><td align='right'>$0.00</td><td>mm/dd/yyyy</td></tr></table><table style='width:70%; font-size:medium'><tr><td colspan='6' style='font-weight:bold;'>Related Policies</td></tr>
<tr><td><form action='policiesforclient.php' method='post'> <input type='submit' class='btn' value ='ViewClient'/><input type='hidden' name='clientidx' value ='99999'/></form></td>
<td colspan='5' style='font-weight:bold;'>Last, First 999 Street City, St, 99999</td></tr>
<tr><td><form action='policydetaila.php' method='post'><input type='submit' class='btn' name='policy' value ='Detail'/><input type='hidden' name='policy' value ='13553'/><input type='hidden' name='vehicle' value ='1767'/><input type='hidden' name='clientidx' value ='30015'/></form></td>
<td>Policy Type</td><td>xxxxxxxxxxxxxxx/99999999999999</td><td>exposure</td><td align='right'>$999.00</td><td>mm/dd/yy</td></tr>
<tr><td><form action='policydetaila.php' method='post'><input type='submit' class='btn' name='policy' value ='Detail'/><input type='hidden' name='policy' value ='99999'/><input type='hidden' name='vehicle' value ='9999'/><input type='hidden' name='clientidx' value ='99999'/></form></td>
<td>Policy</td><td>xxxxxxxxxxxxxx/9999999999</td><td>exposure</td><td align='right'></td><td>mm/dd/yyyy</td></tr>
<tr><td><form action='policiesforclient.php' method='post'> <input type='submit' class='btn' value ='ViewClient'/><input type='hidden' name='clientidx' value ='99999'/></form></td>
<td colspan='5' style='font-weight:bold;'>Last, First 999 Street City, St 99999</td></tr>
<tr><td><form action='policydetailota.php' method='post'><input type='submit' class='btn' name='policy' value ='Detail'/><input type='hidden' name='policy' value ='12044'/><input type='hidden' name='clientidx' value ='99999'/></form></td>
<td>Policy</td><td>xxxxxxxxxxx/99999999999</td><td>999 Street City</td><td align='right'>$9,999.00</td><td>mm/dd/yyyy</td></tr>
<tr><td><form action='policydetaila.php' method='post'><input type='submit' class='btn' name='policy' value ='Detail'/><input type='hidden' name='policy' value ='9999'/><input type='hidden' name='vehicle' value ='9999'/><input type='hidden' name='clientidx' value ='9999'/></form></td>
<td>Policy</td><td>xxxxxxxxxxx/99999999999</td><td>exposure</td><td align='right'></td><td>mm/dd/yyyy</td></tr>
<tr><td><form action='policydetaila.php' method='post'><input type='submit' class='btn' name='policy' value ='Detail'/><input type='hidden' name='policy' value ='99999'/><input type='hidden' name='vehicle' value ='9999'/><input type='hidden' name='clientidx' value ='99999'/></form></td>
<td>exposure</td><td>xxxxxxxxxx/9999999999</td><td>exposure</td><td align='right'>$999.00</td><td>mm/dd/yyyy</td></tr>
<tr><td><form action='policydetaila.php' method='post'><input type='submit' class='btn' name='policy' value ='Detail'/><input type='hidden' name='policy' value ='99999'/><input type='hidden' name='vehicle' value ='9999'/><input type='hidden' name='clientidx' value ='99999'/></form></td>
<td>Policy</td><td>xxxxxxxxxxxxxxx/99999999999</td><td>exposure</td><td align='right'></td><td>mm/dd/yyyy</td></tr>
<tr><td><form action='policydetaila.php' method='post'><input type='submit' class='btn' name='policy' value ='Detail'/><input type='hidden' name='policy' value ='99999'/><input type='hidden' name='vehicle' value ='9999'/><input type='hidden' name='clientidx' value ='99999'/></form></td>
<td>Policy</td><td>xxxxxxxxxx/9999999999</td><td>exposure</td><td align='right'>$999.00</td><td>mm/dd/yyyy</td></tr><tr><td colspan='6'><hr style='height:1em; background-color:navy'/></td></tr><tr><td></td><td></td><td style='font-size:small;'>clientuntil?</td><td colspan='3' rowspan='7'>First I. Last<br/>First I. Last<br/>999 Street<br/>City, St 99999<br/><br/>Dear Mr. X and Ms. Y:</td></tr><tr><td style='font-size:small;'>refby:</td><td style='font-size:small;'>client since:</td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td style='font-size:small;'>link1</td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td style='font-size:small;'>link2</td></tr><tr><td></td><td></td><td></td></tr></table><form name='input' action='clientlist.php' method='get'/><tr><td colspan='6'><input class='btn' type='submit' value='Back to Client List'/> </form>
</body></html>

Virgil Machine

Sat, 2011-01-22 22:22

#23

VirgilMachine

Offline

Regular

Last seen: 11 years 6 weeks ago

Timezone: GMT-4

Joined: 2011-01-18

Posts: 19

Points: 21

There may be something else

There may be something else going on. I rewrote this to take all the and and tags out of tables. I have problems with alignment, as I anticipated, but the real issue is that I'm getting the same validation errors on the same lines:

# Line 143, character 64:
... name='policy' value='Detail'/> ^
Error: element input not allowed here; possible cause is an inline element containing a block-level element
# Line 144, character 50:
... name='policy' value='99999'/>
^
Error: element input not allowed here; possible cause is an inline element containing a block-level element
# Line 145, character 53:
... me='clientidx' value='30970'/> ^
Error: element input not allowed here; possible cause is an inline element containing a block-level element
# Line 146, character 7:
^
Error: missing a required sub-element of form

This is probably something very basic that I'm not seeing. Could someone please look at this code and give me some guidance? It's essentially the same as above, but I cleaned it up a little--this is the version just before I took the form tags out of the tables.

Thanks again.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Policies for Client </title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link type="text/css" rel="stylesheet" href="/style/dcstyle.css" />
<script type="text/javascript" src="/script/loadxmldoc.js"></script>
<style type="text/css">
#wrap	{
	width:99%;
	border: 3px solid navy;
	padding: 0px 0px 0px 0px;
	}
#header	{
	width:100%;
	border-bottom:3px solid navy;
	}
#policy	{
	width:70%;
	border:3px solid navy;
	float: left
	}
#trans	{
	width:29%;
	border:3px solid navy;
	float:right
	}
body	{
	background-color: LightBlue;
	}
#top, #bottom, #left, #right {
        background: navy;
        position: fixed;
        }
        #left, #right {
                top: 0; bottom: 0;
                width: 3px;
                }
                #left { left: 0; }
                #right { right: 0; }
 
        #top, #bottom {
                left: 0; right: 0;
                height: 3px;
                }
                #top { top: 0; }
                #bottom { bottom: 0; }
h1	{
	text-align:center;
	}
table	{
	font-weight:normal;
	}
td	{
	border-bottom: 1px solid navy;
	border-right: 1px solid navy;
	padding:0;
	}
table.trans	{
	width:100%;
	border:3px solid navy
	float: right;
	}
</style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>
<div id='wrap'>
<h1>Policies for Client</h1>
<div id='header'>
<form action='policiesforclient.php' method='post'>
<table style='width:100%; border-top:3px solid navy'>
<tr style='solid navy; font-family:Times New Roman; font-size:1em;'>
<td style='width:25%;'><textarea class='apos' name='name1' rows='1' cols='50'>Last, First</textarea></td>
<td style='width:25%;'>ClientIndex</td>
<td style='width:15%;'><input type='text' name='clientidx' value='99999' /><input type='hidden' name='you' value='u'/></td>
<td style='width:10%;'></td>
<td style='width:20%;'>Notes</td>
</tr><tr><td style='width:25%;'><textarea class='apos' name='name2' rows='1' cols='50'>Last, First M.</textarea></td>
<td style='width:25%;'>SpouseIndex</td>
<td style='width:15%;'><input type='text' name='spouseidx' value='99999'/></td>
<td style='width:10%;'></td>
<td rowspan='7' style='vertical-align:top; width:20%'><textarea name='xref' rows='12' cols='60'>Cell phone# 555-555-1212</textarea></td>
</tr><tr><td style='width:25%;'><input type='text' name='mail1' value='nnn sreet'/></td>
<td style='width:25%;'>JointIndex</td>
<td style='width:15%;'><input type='text' name='jointidx' value='99999'/></td>
<td style='width:10%;'></td>
</tr><tr><td style='width:25%;'><input type='text' name='mail2' value=''/></td>
<td style='width:25%;'>Active</td>
<td style='width:15%;'><input name='active' type='checkbox' checked='checked'/></td>
<td style='width:10%;'>Office</td>
</tr><tr><td style='width:25%;'><input type='text' name='mailtown' value='Brewster'/></td>
<td style='width:25%;'><input type='text' name='mailst' value='MA'/></td>
<td style='width:15%;'><input type='text' name='mailzip' value='99999'/></td>
<td style='width:10%;'><input type='text' name='agency' value='X'/></td>
</tr><tr><td style='width:25%;'><input type='text' name='home' value='555-555-1212'/></td>
<td style='width:25%;'><input type='text' name='work' value='555-555-1212'/></td>
<td style='width:15%;'><input type='text' name='fax' value=''/></td>
<td style='width:10%;'><input type='text' name='cell' value=''/></td>
</tr><tr><td style='width:25%;'>home phone</td>
<td style='width:25%;'>work phone</td>
<td style='width:15%;'>fax</td>
<td style='width:10%;'>cell</td>
</tr><tr><td style='width:25%;'>salutation:</td>
<td style='width:25%;'><textarea class='apos' name='sal' rows='1' cols='30'>Mr. X and Ms. Y</textarea></td>
<td style='width:15%;'>email</td>
<td style='width:10%;'><input type='text' name='email' value=''/></td>
</tr><tr><td colspan='5'><input class='btn' type='submit' value='Update Client'/></td>
</tr></table></form>
</div>
<div id='policy'>
<table style='width:100%; font-size:medium float:left'><tr><td colspan='6' style='font-weight:bold;'>Policies</td></tr>
<tr><td><form action='policydetailota.php' method='post'><input type='submit'  class='btn' name='policy' value ='Detail'/><input type='hidden' name='policy' value ='99999'/><input type='hidden' name='clientidx' value ='30970'/></form></td>
<td>Policy</td><td>Company/policy</td><td>nnn street, city</td><td align='right'>$9,999.99</td><td>mm/dd/yyyy</td></tr>
<tr><td><form action='policydetailota.php' method='post'><input type='submit'  class='btn' name='policy' value ='Detail'/><input type='hidden' name='policy' value ='99999'/><input type='hidden' name='clientidx' value ='30970'/></form></td>
<td> Policy</td><td>company/policy</td><td>exposure</td><td align='right'>$999.00</td><td>mm/dd/yyyy</td></tr>
<tr><td><form action='policydetailota.php' method='post'><input type='submit'  class='btn' name='policy' value ='Detail'/><input type='hidden' name='policy' value ='99999'/><input type='hidden' name='clientidx' value ='99999'/></form></td>
<td>exposure</td><td>XXXXXXXXXXXXXXXXXXXXXXXXX/nnnnnnnn</td><td>exposure</td><td align='right'>$0.00</td><td>mm/dd/yyyy</td></tr></table>
<table style='width:100%; font-size:medium'><tr><td colspan='6' style='font-weight:bold;'>Related Policies</td></tr>
<tr><td><form action='policiesforclient.php' method='post'> <input type='submit' class='btn' value ='ViewClient'/><input type='hidden' name='clientidx' value ='99999'/></form></td>
<td colspan='5' style='font-weight:bold;'>Last, First 999 Street City, St, 99999</td></tr>
<tr><td><form action='policydetaila.php' method='post'><input type='submit' class='btn' name='policy' value ='Detail'/><input type='hidden' name='policy' value ='13553'/><input type='hidden' name='vehicle' value ='1767'/><input type='hidden' name='clientidx' value ='30015'/></form></td>
<td>Policy Type</td><td>xxxxxxxxxxxxxxx/99999999999999</td><td>exposure</td><td align='right'>$999.00</td><td>mm/dd/yy</td></tr>
<tr><td><form action='policydetaila.php' method='post'><input type='submit' class='btn' name='policy' value ='Detail'/><input type='hidden' name='policy' value ='99999'/><input type='hidden' name='vehicle' value ='9999'/><input type='hidden' name='clientidx' value ='99999'/></form></td>
<td>Policy</td><td>xxxxxxxxxxxxxx/9999999999</td><td>exposure</td><td align='right'></td><td>mm/dd/yyyy</td></tr>
<tr><td><form action='policiesforclient.php' method='post'> <input type='submit' class='btn' value ='ViewClient'/><input type='hidden' name='clientidx' value ='99999'/></form></td>
<td colspan='5' style='font-weight:bold;'>Last, First 999 Street City, St 99999</td></tr>
<tr><td><form action='policydetailota.php' method='post'><input type='submit' class='btn' name='policy' value ='Detail'/><input type='hidden' name='policy' value ='12044'/><input type='hidden' name='clientidx' value ='99999'/></form></td>
<td>Policy</td><td>xxxxxxxxxxx/99999999999</td><td>999 Street City</td><td align='right'>$9,999.00</td><td>mm/dd/yyyy</td></tr>
<tr><td><form action='policydetaila.php' method='post'><input type='submit' class='btn' name='policy' value ='Detail'/><input type='hidden' name='policy' value ='9999'/><input type='hidden' name='vehicle' value ='9999'/><input type='hidden' name='clientidx' value ='9999'/></form></td>
<td>Policy</td><td>xxxxxxxxxxx/99999999999</td><td>exposure</td><td align='right'></td><td>mm/dd/yyyy</td></tr>
<tr><td><form action='policydetaila.php' method='post'><input type='submit' class='btn' name='policy' value ='Detail'/><input type='hidden' name='policy' value ='99999'/><input type='hidden' name='vehicle' value ='9999'/><input type='hidden' name='clientidx' value ='99999'/></form></td>
<td>exposure</td><td>xxxxxxxxxx/9999999999</td><td>exposure</td><td align='right'>$999.00</td><td>mm/dd/yyyy</td></tr>
<tr><td><form action='policydetaila.php' method='post'><input type='submit' class='btn' name='policy' value ='Detail'/><input type='hidden' name='policy' value ='99999'/><input type='hidden' name='vehicle' value ='9999'/><input type='hidden' name='clientidx' value ='99999'/></form></td>
<td>Policy</td><td>xxxxxxxxxxxxxxx/99999999999</td><td>exposure</td><td align='right'></td><td>mm/dd/yyyy</td></tr>
<tr><td><form action='policydetaila.php' method='post'><input type='submit' class='btn' name='policy' value ='Detail'/><input type='hidden' name='policy' value ='99999'/><input type='hidden' name='vehicle' value ='9999'/><input type='hidden' name='clientidx' value ='99999'/></form></td>
<td>Policy</td><td>xxxxxxxxxx/9999999999</td><td>exposure</td><td align='right'>$999.00</td><td>mm/dd/yyyy</td></tr><tr><td colspan='6'><hr style='height:1em; background-color:navy'/></td></tr><tr><td></td><td></td><td style='font-size:small;'>clientuntil?</td><td colspan='3' rowspan='7'>First I. Last<br/>First I. Last<br/>999 Street<br/>City, St 99999<br/><br/>Dear Mr. X and Ms. Y:</td></tr><tr><td style='font-size:small;'>refby:</td><td style='font-size:small;'>client since:</td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td style='font-size:small;'>link1</td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td style='font-size:small;'>link2</td></tr><tr><td></td><td></td><td></td></tr></table>
<form name='input' action='clientlist.php' method='get'/><tr><td colspan='6'><input class='btn' type='submit' value='Back to Client List'/> </form>
</div>
<div id='trans'>
<table class='trans'>
<tr><td>mm-dd-yyyy hh:mm:ss AM Txn99999 ii Some transaction</td></tr>
<tr><td>mm-dd-yyyy hh:mm:ss AM Txn99999 ii Some other transaction</td></tr>
<tr><td>mm-dd-yyyy hh:mm:ss AM Txn99999 ii Still another transaction</td></tr>
<tr><td>mm-dd-yyyy hh:mm:ss AM Txn99999 ii And another transaction</td></tr>
</table>
</div>
</div>
</body></html>

Virgil Machine

Sat, 2011-01-22 23:32

#24

Verschwindende

Offline

Guru

Last seen: 5 days 5 hours ago

Timezone: GMT-4

Joined: 2009-10-09

Posts: 2050

Points: 2282

Consider this small change to

Consider this small change to line 176: <div><input type='submit' class='btn' name='policy' value='Detail' /><input type='hidden' name='policy' value='99999' /><input type='hidden' name='clientidx' value='30970' /></div></form>

Sat, 2011-01-22 23:40

#25

VirgilMachine

Offline

Regular

Last seen: 11 years 6 weeks ago

Timezone: GMT-4

Joined: 2011-01-18

Posts: 19

Points: 21

That was interesting. I

That was interesting. I changed the doctype to a transitional one and all my errors went away.

Can someone tell me what there is an issue with with form tags when I use the strict doctype?

Now, back to my original problem, the answer is to use tables. I learned a lot, although I wound up with essentially what I had before I went nuts with divs.

Thanks everyone--and please let me know about the strict vs. transitional and form tags.

<!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" xml:lang="en">
<head>
<title>Policies for Client </title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link type="text/css" rel="stylesheet" href="/style/dcstyle.css" />
<script type="text/javascript" src="/script/loadxmldoc.js"></script>
<style type="text/css">
#wrap	{
	width:99%;
	border: 3px solid navy;
	padding: 0px 0px 0px 0px;
	}
#header	{
	width:100%;
	border-bottom:3px solid navy;
	}
#policy	{
	width:70%;
	border:3px solid navy;
	float: left
	}
#trans	{
	width:29%;
	border:3px solid navy;
	float:right
	}
body	{
	background-color: LightBlue;
	}
#top, #bottom, #left, #right {
        background: navy;
        position: fixed;
        }
        #left, #right {
                top: 0; bottom: 0;
                width: 3px;
                }
                #left { left: 0; }
                #right { right: 0; }
 
        #top, #bottom {
                left: 0; right: 0;
                height: 3px;
                }
                #top { top: 0; }
                #bottom { bottom: 0; }
h1	{
	text-align:center;
	}
table	{
	font-weight:normal;
	}
td	{
	border-bottom: 1px solid navy;
	border-right: 1px solid navy;
	padding:0;
	}
table.trans	{
	width:100%;
	border:3px solid navy
	float: right;
	}
 
</style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>
<div id='wrap'>
<h1>Policies for Client</h1>
<div id='header'>
<form action='policiesforclient.php' method='post'>
<table style='width:100%; border-top:3px solid navy'>
<tr style='solid navy; font-family:Times New Roman; font-size:1em;'>
<td style='width:25%;'><textarea class='apos' name='name1' rows='1' cols='50'>Last, First</textarea></td>
<td style='width:25%;'>ClientIndex</td>
<td style='width:15%;'><input type='text' name='clientidx' value='99999' /><input type='hidden' name='you' value='u'/></td>
<td style='width:10%;'></td>
<td style='width:20%;'>Notes</td>
</tr><tr><td style='width:25%;'><textarea class='apos' name='name2' rows='1' cols='50'>Last, First M.</textarea></td>
<td style='width:25%;'>SpouseIndex</td>
<td style='width:15%;'><input type='text' name='spouseidx' value='99999'/></td>
<td style='width:10%;'></td>
<td rowspan='7' style='vertical-align:top; width:20%'><textarea name='xref' rows='12' cols='60'>Cell phone# 555-555-1212</textarea></td>
</tr><tr><td style='width:25%;'><input type='text' name='mail1' value='nnn sreet'/></td>
<td style='width:25%;'>JointIndex</td>
<td style='width:15%;'><input type='text' name='jointidx' value='99999'/></td>
<td style='width:10%;'></td>
</tr><tr><td style='width:25%;'><input type='text' name='mail2' value=''/></td>
<td style='width:25%;'>Active</td>
<td style='width:15%;'><input name='active' type='checkbox' checked='checked'/></td>
<td style='width:10%;'>Office</td>
</tr><tr><td style='width:25%;'><input type='text' name='mailtown' value='City'/></td>
<td style='width:25%;'><input type='text' name='mailst' value='St'/></td>
<td style='width:15%;'><input type='text' name='mailzip' value='99999'/></td>
<td style='width:10%;'><input type='text' name='agency' value='X'/></td>
</tr><tr><td style='width:25%;'><input type='text' name='home' value='555-555-1212'/></td>
<td style='width:25%;'><input type='text' name='work' value='555-555-1212'/></td>
<td style='width:15%;'><input type='text' name='fax' value=''/></td>
<td style='width:10%;'><input type='text' name='cell' value=''/></td>
</tr><tr><td style='width:25%;'>home phone</td>
<td style='width:25%;'>work phone</td>
<td style='width:15%;'>fax</td>
<td style='width:10%;'>cell</td>
</tr><tr><td style='width:25%;'>salutation:</td>
<td style='width:25%;'><textarea class='apos' name='sal' rows='1' cols='30'>Mr. X and Ms. Y</textarea></td>
<td style='width:15%;'>email</td>
<td style='width:10%;'><input type='text' name='email' value=''/></td>
</tr><tr><td colspan='5'><input class='btn' type='submit' value='Update Client'/></td>
</tr></table></form>
</div>
<div id='policy'>
<table style='width:100%; font-size:medium float:left'><tr><td colspan='6' style='font-weight:bold;'>Policies</td></tr>
<tr><td><form action='policydetailota.php' method='post'><input type='submit'  class='btn' name='policy' value ='Detail'/><input type='hidden' name='policy' value ='99999'/><input type='hidden' name='clientidx' value ='30970'/></form></td>
<td>Policy</td><td>Company/policy</td><td>nnn street, city</td><td align='right'>$9,999.99</td><td>mm/dd/yyyy</td></tr>
<tr><td><form action='policydetailota.php' method='post'><input type='submit'  class='btn' name='policy' value ='Detail'/><input type='hidden' name='policy' value ='99999'/><input type='hidden' name='clientidx' value ='30970'/></form></td>
<td> Policy</td><td>company/policy</td><td>exposure</td><td align='right'>$999.00</td><td>mm/dd/yyyy</td></tr>
<tr><td><form action='policydetailota.php' method='post'><input type='submit'  class='btn' name='policy' value ='Detail'/><input type='hidden' name='policy' value ='99999'/><input type='hidden' name='clientidx' value ='99999'/></form></td>
<td>exposure</td><td>XXXXXXXXXXXXXXXXXXXXXXXXX/nnnnnnnn</td><td>exposure</td><td align='right'>$0.00</td><td>mm/dd/yyyy</td></tr></table>
<table style='width:100%; font-size:medium'><tr><td colspan='6' style='font-weight:bold;'>Related Policies</td></tr>
<tr><td><form action='policiesforclient.php' method='post'> <input type='submit' class='btn' value ='ViewClient'/><input type='hidden' name='clientidx' value ='99999'/></form></td>
<td colspan='5' style='font-weight:bold;'>Last, First 999 Street City, St, 99999</td></tr>
<tr><td><form action='policydetaila.php' method='post'><input type='submit' class='btn' name='policy' value ='Detail'/><input type='hidden' name='policy' value ='13553'/><input type='hidden' name='vehicle' value ='1767'/><input type='hidden' name='clientidx' value ='30015'/></form></td>
<td>Policy Type</td><td>xxxxxxxxxxxxxxx/99999999999999</td><td>exposure</td><td align='right'>$999.00</td><td>mm/dd/yy</td></tr>
<tr><td><form action='policydetaila.php' method='post'><input type='submit' class='btn' name='policy' value ='Detail'/><input type='hidden' name='policy' value ='99999'/><input type='hidden' name='vehicle' value ='9999'/><input type='hidden' name='clientidx' value ='99999'/></form></td>
<td>Policy</td><td>xxxxxxxxxxxxxx/9999999999</td><td>exposure</td><td align='right'></td><td>mm/dd/yyyy</td></tr>
<tr><td><form action='policiesforclient.php' method='post'> <input type='submit' class='btn' value ='ViewClient'/><input type='hidden' name='clientidx' value ='99999'/></form></td>
<td colspan='5' style='font-weight:bold;'>Last, First 999 Street City, St 99999</td></tr>
<tr><td><form action='policydetailota.php' method='post'><input type='submit' class='btn' name='policy' value ='Detail'/><input type='hidden' name='policy' value ='12044'/><input type='hidden' name='clientidx' value ='99999'/></form></td>
<td>Policy</td><td>xxxxxxxxxxx/99999999999</td><td>999 Street City</td><td align='right'>$9,999.00</td><td>mm/dd/yyyy</td></tr>
<tr><td><form action='policydetaila.php' method='post'><input type='submit' class='btn' name='policy' value ='Detail'/><input type='hidden' name='policy' value ='9999'/><input type='hidden' name='vehicle' value ='9999'/><input type='hidden' name='clientidx' value ='9999'/></form></td>
<td>Policy</td><td>xxxxxxxxxxx/99999999999</td><td>exposure</td><td align='right'></td><td>mm/dd/yyyy</td></tr>
<tr><td><form action='policydetaila.php' method='post'><input type='submit' class='btn' name='policy' value ='Detail'/><input type='hidden' name='policy' value ='99999'/><input type='hidden' name='vehicle' value ='9999'/><input type='hidden' name='clientidx' value ='99999'/></form></td>
<td>exposure</td><td>xxxxxxxxxx/9999999999</td><td>exposure</td><td align='right'>$999.00</td><td>mm/dd/yyyy</td></tr>
<tr><td><form action='policydetaila.php' method='post'><input type='submit' class='btn' name='policy' value ='Detail'/><input type='hidden' name='policy' value ='99999'/><input type='hidden' name='vehicle' value ='9999'/><input type='hidden' name='clientidx' value ='99999'/></form></td>
<td>Policy</td><td>xxxxxxxxxxxxxxx/99999999999</td><td>exposure</td><td align='right'></td><td>mm/dd/yyyy</td></tr>
<tr><td><form action='policydetaila.php' method='post'><input type='submit' class='btn' name='policy' value ='Detail'/><input type='hidden' name='policy' value ='99999'/><input type='hidden' name='vehicle' value ='9999'/><input type='hidden' name='clientidx' value ='99999'/></form></td>
<td>Policy</td><td>xxxxxxxxxx/9999999999</td><td>exposure</td><td align='right'>$999.00</td><td>mm/dd/yyyy</td></tr><tr><td colspan='6'><hr style='height:1em; background-color:navy'/></td></tr><tr><td></td><td></td><td style='font-size:small;'>clientuntil?</td><td colspan='3' rowspan='7'>First I. Last<br/>First I. Last<br/>999 Street<br/>City, St 99999<br/><br/>Dear Mr. X and Ms. Y:</td></tr><tr><td style='font-size:small;'>refby:</td><td style='font-size:small;'>client since:</td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td style='font-size:small;'>link1</td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td style='font-size:small;'>link2</td></tr><tr><td></td><td></td><td></td></tr></table>
<form action='clientlist.php' method='post'><input type='submit' value='Back to Client List'/></form>
</div>
<div id='trans'>
<table class='trans'>
<tr><td>mm-dd-yyyy hh:mm:ss AM Txn99999 ii Some transaction</td></tr>
<tr><td>mm-dd-yyyy hh:mm:ss AM Txn99999 ii Some other transaction</td></tr>
<tr><td>mm-dd-yyyy hh:mm:ss AM Txn99999 ii Still another transaction</td></tr>
<tr><td>mm-dd-yyyy hh:mm:ss AM Txn99999 ii And another transaction</td></tr>
</table>
</div>
</div>
</body></html>

Virgil Machine

Sat, 2011-01-22 23:46

#26

Verschwindende

Offline

Guru

Last seen: 5 days 5 hours ago

Timezone: GMT-4

Joined: 2009-10-09

Posts: 2050

Points: 2282

VirgilMachine wrote:That was

VirgilMachine wrote:

That was interesting. I changed the doctype to a transitional one and all my errors went away....

Different doctypes have different rules.

VirgilMachine wrote:

Can someone tell me what there is an issue with with form tags when I use the strict doctype? ...

See my post above.

Can you explain this snippet:

	<div id="left">
	</div>
	<div id="right">
	</div>
	<div id="top">
	</div>
	<div id="bottom">
	</div>

what is that supposed to accomplish?

Sun, 2011-01-23 06:06

#27

Ed Seedhouse

Offline

Guru

Victoria British Columbia

Last seen: 1 year 14 weeks ago

Victoria British Columbia

Timezone: GMT-8

Joined: 2005-12-14

Posts: 3570

Points: 675

VirgilMachine][quote=Verschwi

VirgilMachine][quote=Verschwindende wrote:

and I've read that tables are evil

Ah, another victim of the internet's most pernicious lie.

Quote:

(although I cannot figure out why)

That would be because it isn't true.

It IS bad to misuse tables for purposes they were not designed for, like doing page layout. It is EQUALLy BAD not to use them when they are appropriate. The were created as a method of marking up tabular information, that is information that belongs in a table, like a monthy calendar or ourput from a database query to be displayed in rows and columns. Or any of a number of other perfectly valid reasons.

Quote:

Are you telling me that tables are superior to css divs, at least for some applications? That makes sense to me, I'd just like to know what others think.

We have been telling people that for years and years. Tables are the semantic element collection meant to mark up tabular content. NOT to use them to do that with tabular content is just totally wrong.

Likewise, to use table tags to layout major elements of a page is an abuse of tables and should never be done.

Tables good, tables bad? Both!

Always use the semantic element designed to markup the meaning of the content.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Sun, 2011-01-23 15:02

#28

VirgilMachine

Offline

Regular

Last seen: 11 years 6 weeks ago

Timezone: GMT-4

Joined: 2011-01-18

Posts: 19

Points: 21

Verschwindende

Verschwindende wrote:

Different doctypes have different rules.

I figured that out all by myself.

Verschwindende wrote:

Consider this small change to line 176:

I did that, went back to the strict doctype, and it validates. So, with respect to this issue, is the difference between transitional and strict DTDs that the strict version requires input tags within form tags to be enclosed in div tags?

Ed Seedhouse wrote:

It IS bad to misuse tables for purposes they were not designed for, like doing page layout

Could I have your opinion as to whether I have misused tables in the code posted above?

Verschwindende wrote:

Can you explain this snippet:

what is that supposed to accomplish?

It puts a border around the page. I was surprised that the css for the wrap div

#wrap	{
	width:99%;
	border: 3px solid navy;
	padding: 0px 0px 0px 0px;
	}

didn't put a border around, so I went to this. It's not exactly what I want, but better than nothing. What I really want is what I would have for a table. I thought the border for the dive would do it...

Virgil Machine

Sun, 2011-01-23 18:40

#29

Ed Seedhouse

Offline

Guru

Victoria British Columbia

Last seen: 1 year 14 weeks ago

Victoria British Columbia

Timezone: GMT-8

Joined: 2005-12-14

Posts: 3570

Points: 675

VirgilMachine

VirgilMachine][quote=Verschwindende wrote:

Different doctypes have different rules.

Ed Seedhouse wrote:

It IS bad to misuse tables for purposes they were not designed for, like doing page layout

Quote:

Could I have your opinion as to whether I have misused tables in the code posted above?

Not without seeing the actual page, and I don't mean the php code or the html code either. It is the nature of the content that determines this. Give me a link to the page, otherise I can give no reasonable opinion.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Sun, 2011-01-23 22:36

#30

VirgilMachine

Offline

Regular

Last seen: 11 years 6 weeks ago

Timezone: GMT-4

Joined: 2011-01-18

Posts: 19

Points: 21

Ed Seedhouse wrote: Not

Ed Seedhouse wrote:

The application is on an intranet, and I can't share real data for privacy reasons. Is there nothing you can tell by seeing the page layout from the html file? I included dummy data, which is as meaningful as real data would be.

Thanks for your help.

Virgil Machine

Mon, 2011-01-24 00:35

#31

Verschwindende

Offline

Guru

Last seen: 5 days 5 hours ago

Timezone: GMT-4

Joined: 2009-10-09

Posts: 2050

Points: 2282

It's fine. Go with it.

Mon, 2011-01-24 00:44

#32

Verschwindende

Offline

Guru

Last seen: 5 days 5 hours ago

Timezone: GMT-4

Joined: 2009-10-09

Posts: 2050

Points: 2282

VirgilMachine wrote:... I

VirgilMachine wrote:

... I did that, went back to the strict doctype, and it validates. So, with respect to this issue, is the difference between transitional and strict DTDs that the strict version requires input tags within form tags to be enclosed in div tags? ...

The error explanation is pretty clear:

Quote:

document type does not allow element "input" here; missing one of "ins", "del", "h1", "h2", "h3", "h4", "h5", "h6", "p", "div", "address", "fieldset" start-tag

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

input just requires a container. I prefer fieldset under normal circumstances but this doesn't seem to be your normal run-of-the-mill form.

Mon, 2011-01-24 12:23

#33

VirgilMachine

Offline

Regular

Last seen: 11 years 6 weeks ago

Timezone: GMT-4

Joined: 2011-01-18

Posts: 19

Points: 21

Thank you for all your help

Thank you for all your help on this. I have a better understanding and a better product.

With respect to this:

Verschwindende][quote=VirgilMachine wrote:

I prefer fieldset under normal circumstances but this doesn't seem to be your normal run-of-the-mill form.

I see that the rule is there (although I did not get the error message you quote--that would have been helpful--I used htmlhelp) to validate, but it doesn't make a lot of sense to me. If I have a form, I'm going to have input. Why purpose does a container serve other than to satisfy the validation? (in this case, adding divs for the sake of validation seems like a waste of time and effort...but I'll do it)

Virgil Machine

Mon, 2011-01-24 13:38

#34

Verschwindende

Offline

Guru

Last seen: 5 days 5 hours ago

Timezone: GMT-4

Joined: 2009-10-09

Posts: 2050

Points: 2282

VirgilMachine wrote:... If I

VirgilMachine wrote:

... If I have a form, I'm going to have input. Why purpose does a container serve other than to satisfy the validation? (in this case, adding divs for the sake of validation seems like a waste of time and effort...but I'll do it)

It's simply the rules of the doctype.

Mon, 2011-01-24 14:42

#35

VirgilMachine

Offline

Regular

Last seen: 11 years 6 weeks ago

Timezone: GMT-4

Joined: 2011-01-18

Posts: 19

Points: 21

Verschwindende wrote: It's

Verschwindende wrote:

It's simply the rules of the doctype.

I realize that, but reasonable rules have a reason. Is there a reason for this rule?

Virgil Machine

Mon, 2011-01-24 15:07

#36

Verschwindende

Offline

Guru

Last seen: 5 days 5 hours ago

Timezone: GMT-4

Joined: 2009-10-09

Posts: 2050

Points: 2282

VirgilMachine wrote:I

VirgilMachine wrote:

I realize that, but reasonable rules have a reason. Is there a reason for this rule?

Reason? I can't pretend to understand the w3's decisions. I guess it's considered well formed that way.

Thu, 2011-01-27 12:23

#37

VirgilMachine

Offline

Regular

Last seen: 11 years 6 weeks ago

Timezone: GMT-4

Joined: 2011-01-18

Posts: 19

Points: 21

Thanks. I guess I'll have to

Thanks. I guess I'll have to dig into the standard to find the reason for this rule (after I have spent time adding tags that serve no functional purpose into my code).

This thread has been very useful and instructive for me.

Virgil Machine

Thu, 2011-01-27 12:58

#38

Stomme poes

Offline

Elder

Netherlands

Last seen: 10 years 30 weeks ago

Netherlands

Timezone: GMT+2

Joined: 2008-02-04

Posts: 1854

Points: 378

Quote: I did that, went back

Quote:

There are some tags which require block elements as their direct children: the body tag, blockquotes, and forms are the three I know of right off the top of my head.

As to WHY, I don't know that I've ever read WHY anywhere... except you may be interested to hear that the HTML5 authors didn't seem to know why either (or they knew and disagreed with the reason) and have allowed inlines such as inputs to be direct children of forms.

Though for all but the smallest forms I've used fieldsets (which in HTML4 requires a legend but strangely XHTML1 does not... I always assumed they forgot) and otherwise, divs.

For "remove item" type tabled forms, I've always managed to have the form outside the table. The table both served as a table (for items) and as the required block child of the form. This way, inputs inside the table could work as normal... mostly, I've done this with shopping-cart-style forms. At the bottom of the table was a submit button. If the boss didn't want that there but wanted immediate updating, then Javascript would remove the submit and add onclick or onchange events to talk to the server directly. This way, users without scripts still have the submit button, and the boss never sees it since he's not in that minority.

To find the reason WHY of blocks in forms, there's probably still a mailing list archive sitting around on teh web somewhere... but it would be old, since HTML4 was "finished" in 1998. I have seen discussions of other elements though, so it may be out there.

I'm no expert, but I fake one on teh Internets

Keeping row height constant when individual columns expand

Please provide us HTML, not

Deuce wrote: Please provide

Thepineapplehead would say

VirgilMachine wrote: Sorry,

Thank you. I modified text

Hmm. You're going to have to

I copied what I pasted, saved

http://validator.w3.org/#vali

Thank you. I learned

VirgilMachine wrote: Thank

Hmm. Is the problem what

The problem is that, with

VirgilMachine wrote:...

Verschwindende wrote: It

VirgilMachine wrote:... Are

Table or not a list of one

That's pretty much what I was

Thanks to both of you. I'll

De nada.VirgilMachine

I have limited flexibility

That's fine. I was just

OK. Here's the code: It will

There may be something else

Consider this small change to

That was interesting. I

VirgilMachine wrote:That was

VirgilMachine][quote=Verschwi

Verschwindende

VirgilMachine

Ed Seedhouse wrote: Not

It's fine. Go with it.

VirgilMachine wrote:... I

Thank you for all your help

VirgilMachine wrote:... If I

Verschwindende wrote: It's

VirgilMachine wrote:I

Thanks. I guess I'll have to

Quote: I did that, went back

User login

Navigation