I'm guessing this is due to the select elements not having any padding whereas the input.text and input.title elements have a 5px padding. I've tested adding padding to select elements and it appeared to fix the vertical alignment... but padding select elements kinda looks odd because the control arrow is no longer flush to the top/right/bottom of select field.
On May 29, 11:37 am, saquino <[email protected]> wrote: > The right side fieldset- 'Select, checkboxes, lists,' seems to be out > of vertical alignment on (I'm viewing it in FF3) but I think this was > true previously as well? > > On May 28, 4:29 pm, speedunk <[email protected]> wrote: > > > 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 -~----------~----~----~----~------~----~------~--~---
