Tue, 2011-01-18 20:25
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);
Tue, 2011-01-18 22:07
#1
Please provide us HTML, not
Please provide us HTML, not PHP.
Wed, 2011-01-19 02:54
#2
Deuce wrote: Please provide
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?
Wed, 2011-01-19 03:58
#3
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
#4
VirgilMachine wrote: Sorry,
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.
Wed, 2011-01-19 16:55
#5
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
Wed, 2011-01-19 17:08
#6
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
#7
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?
Wed, 2011-01-19 18:13
#8
http://validator.w3.org/#vali
Thu, 2011-01-20 03:01
#9
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>
Thu, 2011-01-20 03:44
#10
VirgilMachine wrote: Thank
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
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
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.
Thu, 2011-01-20 15:05
#13
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
Verschwindende wrote: It
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.
Thu, 2011-01-20 17:07
#15
VirgilMachine wrote:... Are
... 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
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?
Thu, 2011-01-20 17:40
#17
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
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.
Thu, 2011-01-20 18:38
#19
De nada.VirgilMachine
De nada.
... 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
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.
Thu, 2011-01-20 21:06
#21
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
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>
Sat, 2011-01-22 22:22
#23
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>
Sat, 2011-01-22 23:32
#24
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
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>
Sat, 2011-01-22 23:46
#26
VirgilMachine wrote:That was
That was interesting. I changed the doctype to a transitional one and all my errors went away....
Different doctypes have different rules.
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>
Sun, 2011-01-23 06:06
#27
VirgilMachine][quote=Verschwi
and I've read that tables are evil
Ah, another victim of the internet's most pernicious lie.
(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.
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.
Sun, 2011-01-23 15:02
#28
Verschwindende
Different doctypes have different rules.
I figured that out all by myself.
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?
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?
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...
Sun, 2011-01-23 18:40
#29
VirgilMachine
Different doctypes have different rules.
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?
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.
Sun, 2011-01-23 22:36
#30
Ed Seedhouse wrote: Not
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.
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.
Mon, 2011-01-24 00:35
#31
It's fine. Go with it.
It's fine. Go with it.
Mon, 2011-01-24 00:44
#32
VirgilMachine wrote:... I
... 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:
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
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:
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)
Mon, 2011-01-24 13:38
#34
VirgilMachine wrote:... If I
... 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
Verschwindende wrote: It's
It's simply the rules of the doctype.
I realize that, but reasonable rules have a reason. Is there a reason for this rule?
Mon, 2011-01-24 15:07
#36
VirgilMachine wrote:I
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
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.
Thu, 2011-01-27 12:58
#38
Quote: I did that, went back
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?
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.