Jonathan Lui wrote:
> hey all,
>
> This is something I'm working on,
>
> http://dev.r8dhex.net/stuff/sample1.htm
>
> Long story short, this is for a web-application, target browsers is FF/IE6+.
> My goal is to have a variety of form-controls that look good in different
> configurations, and different resolutions. I'd also like the inputs to
> expand when there is enough space. I'm trying to move away from table-based
> designs, since this will eventually be server-generated, and it will be
> easier if each label/input pair is sufficiently encapsulated.
>
> We used to have a 2-column table-based layout with fixed-size inputs
> depending on whether we need full-width or half-width, but if a user has a
> hi-res screen, the inputs spread out and leave big spaces in between. I
> tried using percentages, but then the inputs don't align properly along the
> right-side.
>
> Anyway, I'm pretty happy with this version, but there are still some bugs
> that I can't fix. I'd like half-width to be really 50%, and full should be
> 100%, but IE has different ideas on what 100% means. IE also has problems
> aligning the right side of the inputs, I'd like the right side of the
> full-width input to line-up with the right-side of the 2nd-column inputs.
> The select doesn't line up properly as well. Right now it can't handle
> longer labels. It would also be better if the form would switch to 1-column
> layout if the inputs go below a certain width.
>
> I'd appreciate any feedback good or bad, whether my idea is sound, or how I
> can improve this, or another approach to the problem. Maybe there's an
> obscure css property that magically does what I need, and works in my target
> browsers :).
>
> Thanks
> Jonathan
> ______________________________________________________________________
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
>
Try declaring
input {
width:100%;
overflow:visible;}
..as a start. It should help you figure out the rest rather quickly.
- JC
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
