v-aligned text in input box

[Css_Calav]

hi guys,

This might sound like a dumb question, but how do i align my text so that it is on the bottom of the text box.

if you look here http://www.deskjetmodels.co.nz/details.php and type in the text box it is v-aligned to the top. i tried changing a few properties but no luck.

css is here: http://www.deskjetmodels.co.nz/css/model.css

thanx guys

and on a validation note..

what does this mean


Please, validate your XML document first!
Line 104
Column 3
The element type "body" must be terminated by the matching end-tag "".


i put the css in through maually and got this returned


Errors
URI : http://www.deskjetmodels.co.nz/css/model.css
Line: 1 Context : body
Invalid number : overflow Parse Error - -moz-scrollbars-vertical

[Jona]

I don't understand your first question. The text boxes are very small on the page you linked to and they are not aligned to the top at all. If I resize the font enough, the bottom of the text will clip off and the stop will still be visible - is that the opposite of what you want?

As far as your validation errors - make sure you closed your BODY tag and that you didn't accidentally improperly nest any DIV's or other elements. The CSS error you're getting is because you used the -moz-scrollbar-vertical property which is, obviously, Mozilla-only and not part of the W3C CSS2.1 specification.

[Css_Calav]

thanx Jona,

i see whats happening now with the text box.

what is the best way to get the text to fit the text box?

if i change this line

font: 10px/11px Verdana, sans-serif;

to for example

font: 11px/12px Verdana, sans-serif;

it changes the text box's, makes them longer etc.



input{
font: 10px/11px Verdana, sans-serif;
background-color: #FBFBFB;
border: 1px solid #999999;
}

input.detailspage{
width: 14.10em;
height: 14px;
background-color: #FBFBFB;
border: 1px solid #999999;
margin-top: 2.5px;
}


thanx for the help

oh and about the mozzila "overflow:-moz-scrollbars-vertical;" is this wise to use this in my code? i mean now i cant get a correct validation. but i need to use that bit of code also. what do you suggest?

[Jona]

Try setting the height of your text box to 1em (100% of the default font size). I'm kind of having a little trouble understanding exactly what you're after, though. Also, I would suggest using any CSS you find necessary, whether it's standard or not. As long as you understand the consequences of invalid CSS, I don't see anything wrong with it.

[Css_Calav]

hi thanx Jona.

sorry im not explaning myself very well.

i just want the text to fix 100% of the input box. and the code for it.

ill try what you said.

thanx again.

[Css_Calav]

hi,

ok i have been playing around for a while now and am getting no where. looks like its the line height that is making things complicated for me.

i want my text box text to be alighned correctly and to fill up most of the text box.

when i get rid of the line height propety, it works great, but throws the button next to the search box out of align.

can anyone help me here?

i hope i have made my question as clear as possible

[ray326]

I think your problem is the input boxes don't resize with the fonts. Instead of "height: 14px;" try "height: 1.2em;".

[Css_Calav]

thanx ray,

if i make the text box height 1.2em; and the button the same height as the text box they both go out of align.

can you see this? and why does this happen and how to fix.

thanx for your help

[Jona]

Tables aren't for laying out forms, either... There are specific form tags for this: FIELDSET, LEGEND, and LABEL.

[Css_Calav]

what would be some good advice tovdo?

any links i can look at or examples?

and is this why things go out of place?

[Jona]

I don't know, personally I'd be rethinking the way you code your forms (http://cmmwebdesign.com/blog/chronicles/2004/12/12/displaying-your-forms) for starters. If you think about it in-depth, it's not just a matter of getting it to look right, but a matter of what HTML you should use to begin with. Displaying them afterwards is another story, though. (Unfortunately at this time I don't have any good articles on it, though I plan on writing on soon.)

[Css_Calav]

thanx jona will look into it today.

what shall i do about my seach box and button being in the list in the center nav?

thanx

[Jona]

Originally posted by Css_Calav
thanx jona will look into it today.

what shall i do about my seach box and button being in the list in the center nav?

thanx

Give the form an ID and style its sub-elements appropriately using floats and clearing properties.

Edit: Actually, that's probably not necessary, since INPUT elements are inline by default.

[Css_Calav]

hi Jona,

sorry not following with that one can you give me a example or something?

Thanx.

[Jona]

form#searchForm fieldset {
display: inline;
border: none;
font: normal small verdana, sans-serif;
}
form#searchForm label {
display: inline;
}
form#searchForm input {
font: normal small verdana, sans-serif;
}



<form id="searchForm" method="get" action="search.pl"><fieldset>
<label>Search <input type="text" name="q" value="Search term."></label>
<label><input type="submit" value="Search"></label>
</fieldset></form>

[Css_Calav]

hi Jona,

i uploaded your code to my site but am not sure if i am using it correctly. can you please take a look?

http://www.deskjetmodels.co.nz/index_jona.php

http://www.deskjetmodels.co.nz/css/model_jona.css

thanx

[Jona]

That's a very small bar to put your horizontal navigation on. I would really recommend making it larger. Anyway, you'll have to give the "form#searchForm" a "display:inline" property/value pair, since forms are block-level by default. Sorry I left that part out. If you want the inputs all to be the same size, specify a width/height for "form#searchForm input { ... }"