Results 1 to 1 of 1
Thread: Vertical spacing without tables
Sep 22, 2004, 12:29 #1
- Join Date
- Sep 2004
- 0 Post(s)
- 0 Thread(s)
Vertical spacing without tables
I'm having trouble getting elements to line up properly for a form with labels, fields, and a following icon. A sample page is located here:
There are a couple issues on this page that I'm trying to highlight and find solutions for.
* The first blue block with Artist ID in has the font-family style set to Trebuchet MS, Verdana, Helvetica, Arial, sans-serif. The rest of the blocks use the default font. The font-size is set to 12pt for the entire document in the body style. Notice that the label, the box for the form field, and the indicator icon after the input all line up fairly centered in all of the blue blocks except for the first one. By setting the custom font size, the indicator icon drops to the very bottom of the line and looks wrong. I'd prefer to use the custom font and I'm trying to figure out how to do vertical alignment of these three elements without resorting to table cells.
* The second issue also pertains to vertical alignment. The second field label is really long and wraps. I would like to be able to control where the input field and the following indicator icon are positioned in relation to the label. I am not sure where I'd like them yet, but I'd like to try to center the input field and icon with the label or try aligning the bottom of the input field with the bottom of the label. Again, I'd like to do this without resorting to using tables.
* The last issue is related to the indicator icon. When you roll over the icon, a message tool-tip is supposed to pop up next to it. This works, but the message is partially hidden by the blue block to the right. I've played with z-index settings, but it doesn't seem to do anything.
Thanks for any assistance or suggestions you might have!