www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 17

Thread: v-aligned text in input box

  1. #1
    Join Date
    Sep 2004
    Posts
    219

    v-aligned text in input box

    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
    Last edited by Css_Calav; 03-13-2005 at 07:19 PM.

  2. #2
    Join Date
    Jan 2003
    Location
    Texas
    Posts
    10,413
    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.
    Visit Slightly Remarkable to see my portfolio, resumé, and consulting rates.

  3. #3
    Join Date
    Sep 2004
    Posts
    219
    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.


    Code:
    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?

  4. #4
    Join Date
    Jan 2003
    Location
    Texas
    Posts
    10,413
    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.
    Visit Slightly Remarkable to see my portfolio, resumé, and consulting rates.

  5. #5
    Join Date
    Sep 2004
    Posts
    219
    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.

  6. #6
    Join Date
    Sep 2004
    Posts
    219
    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

  7. #7
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    I think your problem is the input boxes don't resize with the fonts. Instead of "height: 14px;" try "height: 1.2em;".
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  8. #8
    Join Date
    Sep 2004
    Posts
    219
    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

  9. #9
    Join Date
    Jan 2003
    Location
    Texas
    Posts
    10,413
    Tables aren't for laying out forms, either... There are specific form tags for this: FIELDSET, LEGEND, and LABEL.
    Visit Slightly Remarkable to see my portfolio, resumé, and consulting rates.

  10. #10
    Join Date
    Sep 2004
    Posts
    219
    what would be some good advice tovdo?

    any links i can look at or examples?

    and is this why things go out of place?

  11. #11
    Join Date
    Jan 2003
    Location
    Texas
    Posts
    10,413
    I don't know, personally I'd be rethinking the way you code 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.)
    Visit Slightly Remarkable to see my portfolio, resumé, and consulting rates.

  12. #12
    Join Date
    Sep 2004
    Posts
    219
    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

  13. #13
    Join Date
    Jan 2003
    Location
    Texas
    Posts
    10,413
    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.
    Last edited by Jona; 03-14-2005 at 02:25 PM.
    Visit Slightly Remarkable to see my portfolio, resumé, and consulting rates.

  14. #14
    Join Date
    Sep 2004
    Posts
    219
    hi Jona,

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

    Thanx.

  15. #15
    Join Date
    Jan 2003
    Location
    Texas
    Posts
    10,413
    Code:
    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;
    }
    Code:
    <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>
    Visit Slightly Remarkable to see my portfolio, resumé, and consulting rates.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles