Addon misalignments and other rendering issues

[naasking]

On the example 3 page [1], the currency symbol addon to the input is slightly misaligned in Firefox. I can fix it by setting .addon style "padding: 8.5px 12px;" (or 9px), but this misaligns on Chrome. Same result from modifying the style "textarea,input,select", "padding: 7.5px".

I could only fix this by adding a Firefox-only css as such:

@-moz-document url-prefix() {
textarea,input,select {padding:7.5px;}
}

But, I'm not css guru, so perhaps there's a better way.

[1] http://mincss.com/example3.html

[naasking]

Addons to a select element are seriously misaligned, even in Chrome and IE 11, and don't work with the above fix in Firefox. Here's the amended version that works in all of the above:

select{ padding:7px; }
@-moz-document url-prefix() {
    textarea,input{padding:7.5px;}
    select{padding:6.5px;}
}

[naasking]

Addons for a textarea don't align at all either, although this is likely an impossible case to match the ideal, which is that the addon height matches the textarea height.

Surprisingly, IE 11 gets closest to expectations: an addon for a textarea with rows="1" looks perfect (exactly like a text input with an addon). Alignment in FF and Chrome is all over the place.

An acceptable outcome would be the top of the addon aligns with the top of the textarea.

[naasking]

Another weird rendering issue across all browsers:

<div class="container">
    <form class="row">
        <div>
            <span class="addon">$</span><input type="text" value="foo!" />
        </div>
    </form>
</div>

Addon renders with no left border. Adding class="col c10" to the wrapping div has no effect.

[Deleted user]

• can't use select/options element in "nav" class

[owenversteeg]

Comment 1 has been resolved by Firefox fixing their buggy rendering. As for comments 2 and 3, addons aren't intended to be used with selects or textareas, but if you want this behavior then you can open an issue for that. Comment 4, I'll create a new issue, and comment 5 - none of these are intended to be used in a nav.