Prompt alignment with control

[gavinwebb]

On a form I have prompts and entry controls.  The height of the entry control (say text control) is bigger than the height of the prompt text.  Both prompt and control align vertically on the top, I would like them to align centrally.  This looks even worse if you then have radio buttons where the text for the radio button is not in line with the radio button itself.

I have tried but can't seem to figure out what css class to overwrite and with what css instruction - everything I do seems to get ignored.

[Stu]

Hi there Gavin.

FIRST thing to do (which you might already be doing) is to use Firebug (in firefox, or i think it's in chrome also). Helps you zero right into the css/html code you need.

SECOND thing to do is, when you are testing css, to make sure that gzipall.bat is being run each time (if you have combined / compressed ticked in the server settings (webserver procedure, template, advanced tab).

THIRD thing is to make sure you are running from a custom css file, so that you are not editing the actual Nettalk css files.

You might be doing all these things. In that case, maybe a bit more info would be good to try and help you out. Like how are you doing the changing of the css? And when after you make the changes and it "doesn't work" .. are you checking the css in the page to see if it has changed?

Hope that helps.

[gavinwebb]

Hi Stu

Thanks for the response.  I'm having no problem changing properties in CSS  - using my own custom CSS file.  For example I have the following in my custom CSS file:
.nt-prompt {
color: blue;
vertical-align: middle;
}
This works fine, changing my prompt colour on my forms to blue, however the align does nothing, it doesn't even get detected or picked up when I inspect the element using Chrome - I can see when I inspect that it shows my color override, but that's all.

[Bruce]

Hi Gavin,

unfortunately vertical-align is a complicated css beast. This page has some good info on the topic;
http://phrogz.net/css/vertical-align/index.html

After reading that, and inspecting your prompt with Firebug, you'll see that your nt-prompt class is being applied to the _div_ (which is not an inline element, but a block element), and vertical-align only works on block elements.

there are other positional options in css, and you can fiddle with individual prompts, but fundamentally vertical-alignment is not something easy to apply on a global basis.

cheers
Bruce