Alignment-issues w Error beside Text-Area

[DoubleDee]

On one of my Forms, I have a field represented with a Text-Area control.

When there is a data-entry issue, I display an Error to the right of this field.

The problem is that it appears to be bottom-aligned, and so it looks awkward.

Here is a screen-shot of this issue…

And here is my code…

	<label class="recipients" for="pmTo">To:</label>
	<!-- Sticky Field -->
	<?php
		echo '<textarea id="pmTo" name="pmTo" cols="33" rows="2">';
		echo (isset($pmTo) ? str2htmlentities($pmTo) : '');
		echo "</textarea>";

		if (!empty($errors['pmTo'])){
			echo '<span class="error">' . $errors['pmTo'] . '</span>';
		}
	?>

/* Form Errors. */
.error{
	display: inline;
	font-size: 0.8em;
	font-weight: 500;
	color: #F00;
}

Ideally, I would like the Error-Message to be Top-Aligned and adjust to the size of the Text-Area control if the User resizes things.

Is that possible?

Sincerely,

Debbie

[ralphm]

Sigh. You’ve posted PHP in the CSS forum again. Would you like this thread moved to the PHP forum? CSS can’t apply to PHP code, as we’ve mentioned before.

[DoubleDee]

@ralph_m

Sigh. You’ve posted PHP in the CSS forum again. Would you like this thread moved to the PHP forum? CSS can’t apply to PHP code, as we’ve mentioned before.

Larger sigh.

I guess you didn’t look at my tiny code snippet, because if you did you’d see my PHP is simply echoing HTML…

And since the problem I described pertains to HTML and CSS, this sure seems like a good place to be!

Sincerely,

Debbie

[PaulOB]

Have you tried:

.error{vertical-align:top}

It’s hard to guess without the CSS for those existing elements but vertical-align controls the alignment of inline elements on the same line.

[DoubleDee]

@Paul_O_B

It’s hard to guess without the CSS for those existing elements but vertical-align controls the alignment of inline elements on the same line.

But I posted the CSS in my OP… :-/

Debbie

[ralphm]

@DoubleDee

I guess you didn’t look at my tiny code snippet

You aren’t very good at guessing. I guess your misconception is that we’ll just visually pick through the irrelevant PHP, see the HTML, mentally add some content to it, guess at the other CSS that might apply, and then just be able to write out the necessary CSS for this situation. No. In most cases, we’ll paste the HTML into a .html file, try some CSS, test it a few times until we’ve found the best solution, then post the solution.

By posting the preprocessed code, you force us either to guess at the output HTML, or at least reconstruct it by stripping out all the PHP. Don’t make it harder than necessary for people to help you out.

[DoubleDee]

@ralph_m

You aren’t very good at guessing. I guess your misconception is that we’ll just visually pick through the irrelevant PHP, see the HTML, mentally add some content to it, guess at the other CSS that might apply, and then just be able to write out the necessary CSS for this situation. No. In most cases, we’ll paste the HTML into a .html file, try some CSS, test it a few times until we’ve found the best solution, then post the solution.

Ralph,

Gee, sorry.

Since it was only a few lines of PHP, I figured it was obvious to others what the HTML output would be…

@ralph_m

By posting the preprocessed code, you force us either to guess at the output HTML, or at least reconstruct it by stripping out all the PHP. Don’t make it harder than necessary for people to help you out.

Sorry.

It’s easy for me to look at code much more complex than that and just see the HTML.

My bad!!

Here from the source…

<!-- PM To -->
<label class="recipients" for="pmTo">To:</label>
<!-- Sticky Field -->
<textarea id="pmTo" name="pmTo" cols="33" rows="2">a;b;c;d;e;f</textarea><span class="error">No more than 5 Recipients per Message.</span>

.error{
	display: inline;
	font-size: 0.8em;
	font-weight: 500;
	color: #F00;
}

Paul, I didn’t try top alignment, because when I go into FireBug I see this…

(screen-shot)

Based on looking at that, it seems like I need to do some magic to make the container of my <span> match the height of the TextArea which can be changed at any moment by the end user…

I was also wondering if maybe my choice of…

	display: inline;

…was a bad idea??

Sincerely,

Debbie

[ralphm]

@DoubleDee

I didn’t try top alignment

It seems to do what you want, though. Here’s what we have so far:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">

.error{
	display: inline;
	font-size: 0.8em;
	font-weight: 500;
	color: #F00;
}

.error{vertical-align:top}

</style>
</head>
<body>

<label class="recipients" for="pmTo">To:</label>
<!-- Sticky Field -->
<textarea id="pmTo" name="pmTo" cols="33" rows="2">a;b;c;d;e;f</textarea><span class="error">No more than 5 Recipients per Message.</span>

</body>
</html>

This is a more useful way to present a CSS issue. If you run that code, you see we don’t have the full picture, but you can see the effect of the vertical align.

[DoubleDee]

@ralph_m

It seems to do what you want, though.

As usual, you and Paul make difficult things look easy!! :tup:

I tried Paul’s suggestion after my last response, and it seems to work. (Although I’m still confused what I was seeing in FireBug and the screenshot that I posted above…)

Why did adding that one line changes this from this…

To this afterwards…

(I would expect to see the vertical alignment inside the blue containing box in FireBug to change, versus the entire blue containing box moving to the top of the TextArea to its left…)

Anyways, thanks to both of you!!

Sincerely,

Debbie

[PaulOB]

Hi Debbie,

@DoubleDee

But I posted the CSS in my OP… :-/
Debbie

You posted the CSS for .error but that doesn’t tell me what css has been applied to the label or the textarea.

If your textarea has been set to display:block or float then the code I gave you will not work because vertical-align only applies to inline segments on the same line and not to block or floated boxes. That’s why we usually like to see all the css applied to the elements in front of us. It’s just that whatever method you use depends on what behaviour the elements already have applied as you can never treat one element in isolation as it is affected by what comes before and indeed sometimes by what follows.

Default alignment for inline elements is usually baseline which is why the text sits at the bottom of the textarea. Changing the alignment to top will align the top edges of the line boxes as you wanted.

[DoubleDee]

@Paul_O_B

You posted the CSS for .error but that doesn’t tell me what css has been applied to the label or the textarea.

If your textarea has been set to display:block or float then the code I gave you will not work because vertical-align only applies to inline segments on the same line and not to block or floated boxes. That’s why we usually like to see all the css applied to the elements in front of us. It’s just that whatever method you use depends on what behaviour the elements already have applied as you can never treat one element in isolation as it is affected by what comes before and indeed sometimes by what follows.

Sorry about that.

@Paul_O_B

Default alignment for inline elements is usually baseline which is why the text sits at the bottom of the textarea. Changing the alignment to top will align the top edges of the line boxes as you wanted.

Okay.

Debbie

[Francky]

@DoubleDee

I was also wondering if maybe my choice of… display: inline; …was a bad idea??

A <span> is an inline element by default, then it’s not needed to give a span a {display: inline;}: superfluous but not harmful (unless somewhere else in the css the display of the span’s in general is set in another way, what is not such a good idea).