Hi David... Margin-top will not work in this implementation due to the fact that labels are inline elements by default. To apply margin-top you could add display:block but that would break the inline appearance (which is what we are trying to achieve). Also to apply margin-top, you could add display:inline-block, but that is not supported by IE6. Therefore position:relative was the best option.
The spare </p> tag is legacy code that should be removed from the code. Christian... check the code right after the input with id="dummy8" and you'll see the extra </p> tag. You can also review my version at http://tinyurl.com/kk5rmm which validates 100%. On May 29, 4:12 pm, David Merrick <[email protected]> wrote: > Hi all reecommend losing position:relative:top as IE usually hates > this.and use margin-top if you have to. There is also a spare </p> tag > that IE won't like on line 122. > > On Sat, May 30, 2009 at 7:07 AM, G. D. Speer <[email protected]> wrote: > > > > > > > I noticed it too. Haven't had a chance to do the match and figure out > > what's breaking rhythm - I suspect > > the form elements will be hard to tame without per-browser exceptions if not > > enclosed in a fixed height element. > > > ===== > > > Separate subject - has anyone attempted forking the project and expressing > > the grid in ems as an elastic layout? > > > Thanks for any feedback; especially any prior experience that suggests > > 'don't even think about it'. > > > ----- Original Message ----- > > From: "saquino" <[email protected]> > > To: "Blueprint CSS" <[email protected]> > > Sent: Friday, May 29, 2009 9:37 AM > > Subject: [BP #3035] Re: Help with alignment of label, select and > > inputelements > > > 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 > > > -------------------------------------------------------------------------------- > > > No virus found in this incoming message. > > Checked by AVG -www.avg.com > > Version: 8.5.339 / Virus Database: 270.12.45/2141 - Release Date: 05/29/09 > > 06:28:00 > > -- > David Merrick > > [email protected] > > Ph 03 3590 343 > Cell 027 3089 169 --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
