form elements -- css style -- amaya

The included file is a GUI prototype for a Java project!
It reveals some rendering faults that still exist in Amaya
after the spec for forms and css1 has been settled for
years ...
1] legend element width is not being calculated correctly
it fills its container rather than being determined by margin/padding
and width of the contents !!!
2] input checkboxes are not calculating width default correctly
3] input buttons use background color outside the border area
 instead of using the container background color

note the different view in other browsers which are consistent
in their interpretation .... --
john russell ve3ll@rac.ca [those are L's as in LLAMA]
http://home.cogeco.ca/~ve3ll
http://home.cogeco.ca/~trains
http://home.cogeco.ca/~cipher

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>KeyWord Extraction Utility</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {background:whitesmoke;margin:auto; margin-top:15px}
h4 {margin-bottom:5px}
table {margin:auto}
td {border:0px solid black; padding:5px; align-vertical:top}
form {margin-left:38px; margin-right:38px; padding:5px;background:skyblue}
input {width:140px; background:white; padding-left:5px; padding-right:5px}
input.c {width:20px; background:skyblue}
input.go {width:100px; background:silver; margin:1px}
textarea {background:white; width:590px; height:180px}
fieldset {margin:5px; border:black 1pt solid; padding:5px}
legend {background:silver; border:black 1pt solid;
        padding-left:5px; padding-right:5px}
legend.c {background:thistle; border:black 1pt solid;
          padding-left:15px; padding-right:15px}
</style>
</head>
<body>
<form name="utility" action="?" method="post">
<fieldset><legend class="c">KeyWord Extraction Utility</legend>
<table summary="*"><tr>
<td><fieldset><legend>Input Settings</legend>
	<input class="c" name="d" type="checkbox">Use description metatag<br>
    <input class="c" name="k" type="checkbox">Use keyword metatag<br>
    <input class="c" name="b" type="checkbox">
    Body using <select name="num" size="1">
    <option>25</option>
    <option>50</option>
    <option>75</option>
    <option>99</option></select> words<br>
    Local Folder: <input name="f" type="text">
	</fieldset></td>
<td><fieldset><legend>Output Settings</legend>
    Report file:&nbsp; <input name="f" type="text"><br>
    Report style: <select name="s" size="1">
    <option>Tipue Search</option>
    <option>Tab Delimited</option>
    <option>Comma Delimited&nbsp;</option></select><br>
    Site URL:&nbsp; <input name="u" type="text"></fieldset></td>
<td><fieldset><legend>RunTime</legend>
    <input class="go" name="r" type="button" value="Run The Utility"><br>
    <input class="go" name="x" type="button" value="Exit After Save"><br>
    <input class="go" name="h" type="button" value="Helpful Hints"><br>
    <input class="go" name="a" type="button" value="About...">
    </fieldset></td>
</tr><tr><td colspan="3"><h4>List of HTML pages</h4>
<textarea name="files"></textarea></td></tr></table>
</fieldset></form>
</body></html>

Received on Tuesday, 30 September 2003 02:43:00 UTC