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.
