I have been working on a table-less form style for some time. The sample
I've included below comes close to what I'm looking for. But I can't get it
to stretch to full width.
What I am trying to do is create forms that allow me to have a liquid
presentation that scales well when the font size is changed or the browser
is resized. I also want to put multiple fields on the same row. Plus, of
course, I want it to be browser independant and degrade well. The sample
below almost achieves all of these goals.
The problem is that the side by side look is lost if the side by side
elements are sized larger than about 45%. (See width on the fieldset or the
label elements.) At 50% they always wrap. This is not suprising. At 49% it
rarely works, at 48% it works when the font size is small and screen is
large. By 47% they work for most situations but still get funny when the
screen size gets real small. This last is ok, but what's not ok is that when
I use 47% I get large right margins that don't look good.
I have two questions for the list:
1) Can anyone tell me why the styling I've used does not work when the width
is set to fill the whole width of the container?
2) Can anyone suggest a way to get liquid, stretchable, sizable side-by-side
form fields that actually fill the whole width of the container?
Thanks,
Will Merrell
CIO TeamTrack Communications
Sample Code Follows:
-------------------------------------------------------------------
<!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>Form Test</title>
<style type="text/css">
<!--
body {
background: #FFFFFF;
color: #000000;
font: 1em Arial, Helvetica, sans-serif;
margin: 0em;
padding: 1em;
}
form {
position:relative;
float: left;
width: 100%;
background-color: #ddddff;
}
fieldset {
position:relative;
float: left;
width: 47%;
margin : 0em;
padding: 0.1em;
}
legend {
background: #ffff99;
color: #660000;
margin : 0em;
padding: 0em 0.2em 0em 0.2em;
border:0.05em solid #9999ff;
}
label {
position:relative;
float: left;
background: #ffff99;
color: #660000;
width: 45%;
text-align: left;
margin : 0em;
padding: 0.125em 0.25em 0.125em 0.125em;
border:0.05em solid #f0e066;
}
input {
position:relative;
font-size: 1em;
text-align:left;
width:100%;
margin : 0em;
padding: 0em;
border: 0.05em inset #c0c0c0;
}
button {
margin: 0.5em;
}
.clearer {
display : block;
clear: both;
height: 0em;
}
.hidden {
display:none;
}
-->
</style>
</head>
<body bgcolor="#ffffff" >
<form method="post" action="index.html">
<input type="hidden" name="submit" value="" />
<fieldset><legend>Set 1</legend><br class="hidden" />
<label for="tf1a">Field A:
<input type="text" id="tf1a" value="One A" />
</label>
<label for="tf1b">Field B:
<input type="text" id="tf1b" value="One B" />
</label>
</fieldset><br class="hidden" />
<fieldset><legend>Set 2</legend><br class="hidden" />
<label for="tf2a">Field A:
<input type="text" id="tf2a" value="Two A" />
</label>
<label for="tf2b">Field B:
<input type="text" id="tf2b" value="Two B" />
</label>
</fieldset><br class="hidden" />
<div class="clearer"> </div>
<button type="submit" name="submit">Submit</button>
</form>
</body>
</html>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
