So I believe I've found a cross-browser solution for aligning form elements... and I'm looking forward to everyone's response.
I'm not hip with github just yet, so I've uploaded my code here: http://tinyurl.com/kk5rmm Basically what I've done is add three new classes to the blueprint framework (form-inline, checkbox, and button). The most important being form-inline. My style declarations are located the compressed screen.css and ie.css files to make it quick for me to change... but I'm hoping this can be added to the BP core (or maybe added as a plugin?) soon. To apply the styles, simply add class="form-inline" to the form element you wish to be inline (see page source). Also add class="checkbox" to inputs that are type checkbox and class="button" to inputs that are type button. The styles are as follows: for screen.css .form-inline {line-height:3em;} .form-inline p {margin-bottom:0;} input.checkbox {position:relative;top:.25em;} for ie.css .form-inline p {vertical-align:middle;} .form-inline p label {position:relative;top:-.25em;} input.checkbox, input.button {margin-top:0.5em;margin-bottom:0.5em;} Notice the .button and .checkbox classes are mainly for dealing with IE and it's weird positioning (in ie.css), but I've also added the .checkbox class in screen.css to align the form element with the text. I hoping this will be useful to someone. I've tested in IE6, IE7, FF, and Safari and things are looking good. Ciao Sean K. Stewart On May 28, 11:03 am, jsmorris <[email protected]> wrote: > Wonderful...thanks. Hopefully this helps to get the elements aligned > across all browsers. > > On Thu, May 28, 2009 at 11:42 AM, Josh Clayton <[email protected]> > wrote: > > > I've merged this in to Blueprint core > > > On May 27, 2:43 am, jsmorris <[email protected]> wrote: > >> I forked blueprint and added a section to the Forms test page as > >> suggested by Goulven. My fork is > >> athttp://github.com/jsmorris/blueprint-css/tree/master. I also sent a > >> pull request to joshuaclayton. > > >> Jason > > >> On Mon, May 25, 2009 at 5:23 AM, Goulven CHAMPENOIS <[email protected]> > >> wrote: > >> > Indeed, there seems to be a vertical alignment problem with form > >> > elements. > >> > It looks like "input.text, input.title, select { margin: 0.5em 0}" in > >> > screen.css breaks the vertical rhythm (see > >> >http://www.blueprintcss.org/tests/parts/forms.html). Fieldset and legend > >> > don't seem to look identical in IE6 and FF. > > >> > We should update the blueprint form demo with lines of text combining > >> > different sorts of input and selects and see if there are differences, to > >> > have a clear testcase for Jason's problem. > > >> > I'll try to look at what's been done on other frameworks too (YUI grids, > >> > 960, etc). > > >> > In the meantime, has anyone fixed their forms? If so, how? > > >> > On Wed, May 20, 2009 at 2:48 AM, jsmorris <[email protected]> wrote: > > >> >> I am getting various behavior across browsers with trying to align > >> >> labels, selects and input elements across a row. I was hoping that > >> >> blueprint would help me with this. I am using 0.8. > > >> > -- > >> > Goulven Champenois --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Blueprint CSS" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/blueprintcss?hl=en -~----------~----~----~----~------~----~------~--~---
