Row Heights

[yitzle]

I'm trying to convert a form from table to css
However, one column contains text and the other got input boxes.
The problem is that the vertical height of each is not the same so they don't line up (vertically).
How to I fix that?

[ray326]

Example of what you've got?

[yitzle]

http://jesa.skule.ca/test.html
http://jesa.skule.ca/eg.png

[img]http://jesa.skule.ca/eg.png

[ray326]

Ok, your structure isn't right. You need row by row divs to get the alignment better. I like this pattern.

<div><label for="field">labeltext</label><input type="text" id="field" name="field"></div>

Other folks prefer.

<label>labeltext<input type="text" name="field"></label>

[yitzle]

That defeats the whole point of the divs.
I switched over to get the inputs aligned...
With row divs I lose the alignment which I had with tables.

[ray326]

That defeats the whole point of the divs.That makes no sense to me.
With row divs I lose the alignment which I had with tables.Are you talking about columnar alignment now? That's simply label/element styling.

[yitzle]

I guess it is just a label/element.
But can I make the elements all align along the same edge?

[yitzle]

I'm not having much success
http://jesa.skule.ca/index.php?page=test
http://jesa.skule.ca/css/general.css

[ray326]

No no no. The markup is still very wrong. One label per input and just make the '*' part of the label string. Also, no font tags. Use a style to make the "*" (the first letter) red.

[yitzle]

Can't I label a label? I want to line up the first word regardless of whether it has a '*' before it.

And how do I apply a style to just the '*'? Span?

EDIT:
OK. We got ":first-letter" pseudo elements and color tags.
But not all lines start with a red '*'

[yitzle]

Got the first part, too. I can add a '*' to all labels and make so the same color as the background.

[ray326]

Bingo. And if IE wasn't crap you could actually add the "*" with a style. In fact, what I do is define a .required class and do the first letter red with that. This is one place where you can't really separate the presentation and content thanks to Microsoft.

[yitzle]

Still not going...
The first-letter isn't working.
And to align the inputs I need to use "left", right?
But left only works if I have a position tag set. relative doesn't have the right result and absolute messes up the vertical alignment.

[ray326]

The trouble you're having is exactly why I prefer the div/label/input pattern I use. Then this kind of styling starts putting things in the right place for you.

label { color: brown; margin-left: 1ex; display:block; width:15em; float:left }
label:first-letter { color: green; }

label.required:first-letter { color: red; }
label.notrequired { color: grey; }

[yitzle]

I'll rewrite in div/label/input
With the display:block I get the first-letter working and the inputs aligned. But it forces a newline between the label and input. With display:inline I do not get the firstletter color and the width is not uniform (ie the inputs don't line up)

[ray326]

Inlines cannot have width. If you float the label the input should follow it on the line as long as the screen is wide enough. Wrapping the line in a div allows you to set the width of the div such that wrapping never occurs.

[yitzle]

Yay. I used floats with set widths and it all now works. Thanks for all the help!
Now I got to kill those tables on my home page ;)

Thanks for all the help!!

[ray326]

As Yogi might say, "Nothing succeeds like success." :)