Hey Sean,
thanks for your answer and time!
I'm not the one who's interested in a 100% pixel perfect sollution, but in
my tested cases ".form-content .text-right + span { vertical-align: .4em; }"
works fine and your sollution is 1px above the text in the input box... I'm
not really sure how this behaves in other browsers that IE7/8 and FF 3.x.
And on the other hand i'm not too sure if there isn't any other library
confilicting with bp. I use 2 other frameworks plus my own little
base-stylesheet (jQuery UI plus filament group add-ons and priss for print).
I tested this through and the behavior was in all cases the same. I hope you
got some time to drop this in your test-environment and discuss this
further. I think that a) your sollution is more global and therefore better
and b) that this should/could be an update for the ie.css file.
@Christian: i just took a look at at the ie.css file and noticed two (minor)
things:
1. you got an empty line at the end of the file and
2. input.checkbox, input.radio (line 30) and button, input.button (line 34)
share the same definition.
Thanks for your time.
K.
-----Ursprüngliche Nachricht-----
Von: [email protected] [mailto:[email protected]] Im
Auftrag von Sean K. Stewart
Gesendet: Montag, 14. Juni 2010 17:45
An: Blueprint CSS
Betreff: [BP #3946] Re: forms .large class and vertical align
Hi kaiser...
In order to get elements to align elements horizontal to input
elements, you have to add IE specific styles because (I think) of the
way IE renders input elements. Try creating a form without any styles
and add the span after a input; you'll notice IE's alignment is out of
whack by default.
Blueprint keeps a vertical flow of 18px and therefore adding a % value
rather than baseline may render different results cross browser.
I played around a bit and found a solution that does not require a %
or em value for vertical-align. Simply add a style declaration in your
conditional comment for [IE lt 8] that reads as follows:
.horz-align {vertical-align:super;}
Gotta love it!! :^)
On Jun 14, 9:22 am, kaiser <[email protected]> wrote:
> Hi list-members,
>
> i got an ie-issue. Maybe someone can help me around this. It's present
> in IE >= version 7
>
> <style>
> input.text { font-size: 1.2em; } /* same size as the suffixed "Test"
> */
> </style>
>
> <label for="test_input_field">Test Label</label>
> <br />
> <input class="text span-XY" id="test_input_field" />
> <span class="large>Test</span>
>
> Now the span has "vertical-align: baseline;" which will render as
> expected in FF 3.x: The suffixed explanation/.large span will vertical
> align with the text in the input field. But i have to set a special
> rule of "vertical-align: .4em;" for IE >= v7. I'm pretty sure that
> this has something todo with IE hasLayout / Box Model. Can someone
> lend me a helping hand? I know that i can get around an IE-Hack.
>
> Or maybe the blueprint-core should switch from baseline to a %-value
> for different scenarios. As far as i read on ex. css4you baseline
> should be even more cross-browser safe than %-values, but it seems
> that in this case %-values are safer.
>
> Expected output:
>
> TEST LABEL
> +-------+
> | input | Test
> +-------+
--
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.
--
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.
