fix raw_input CSS

[minrk]

I had to express padding in px, not em for consistent appearance. I'm not sure why.

closes #5324
before:

after:

[jdfreder]

Is this true for both FF and Chrome? I remember experiencing some really weird padding behavior because the two browsers sometimes disagree on when padding should be collapsed between two padded elements.

[ellisonbg]

The prompt in the input area is sticking outside the area itself:

[ellisonbg]

I don't see why this is needed. The div.output_subarea already has a top padding in em. This just overrides that.

[minrk]

It's needed because the value is wrong when computed in em. It only comes out right when using px explicitly.

[ellisonbg]

I see why we have vertically compressed the input area here. It allows the textual representation to have the same height as when the user is typing into the field. If we want to keep that effect, then I think we need to work on the styling of the input area a bit more:

• Need more than a 1px left padding.
• Top and bottom paddings should be symmetric.
• We might want to remove the border so it doesn't look so crammed vertically. But the border provides useful information to the user.

Other CSS related comments:

• We are reusing the input_prompt CSS class to mean two separate things (here in raw input and another in the actual input prompts). It works because one is a div and one is a span, but we shouldn't rely on that.
• We are also reusing the raw_input CSS class in two places here. Probably should use something different for one of these as well.

Here is an input area with more symmetric vertical paddings. The prompt would need fixing (along with a display of inline-block (so padding works).

[minrk]

We are also reusing the raw_input CSS class in two places here. Probably should use something different for one of these as well.

I switched the div to raw_input_area and the span to raw_input_prompt

Here is an input area with more symmetric vertical paddings.

And a good example of why I didn't do it that way. The CSS shenanigans here ensure the baseline of the prompt text aligns with the input text, both when. Your example does not align.

[minrk]

I just pushed some simplifications. For once, vertical-align: baseline is actually what I want, and that simplified things a lot. I backed off trying to tighten the layout. It moves more when you submit the input, but it's simpler and cleaner.

[minrk]

screenshot:

[ellisonbg]

This looks great, merging!