Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12
  1. #1
    Senior Member
    Join Date
    Mar 2004
    Posts
    1,518
    Member #
    5220
    Whenever I try to set the padding-top of one of my form fields in CSS, it increases the height! Why is this? How do I stop it from happening?

    Here is my CSS code for the class "form":

    Code:
    .form {
    height:18px;
    border:1px solid #cccccc;
    font-family:tahoma;
    font-size:10px;
    padding-left:0px;
    padding-top:0px;
    background-color:#ffffff;
    width:120px;
    }
    Any ideas?
    Rednerve
    Creative Freelance Design

  2.  

  3. #2
    Senior Member Trico's Avatar
    Join Date
    Feb 2004
    Location
    Nottingham, UK
    Posts
    894
    Member #
    5081
    padding + border + height/width = total dimensions.

    Code:
    .example {
    
    border-top: 1px solid #000;
    padding-top: 10px;
    height: 20px;
    
    }
    Will result in the same height as this:
    Code:
    .example {
    
    height: 31px;
    
    }
    If you can reserve padding for inline elements and try to make do with using margins instead.

  4. #3
    Senior Member
    Join Date
    Mar 2004
    Posts
    1,518
    Member #
    5220
    Putting
    Code:
    margin-top:4px;
    does not give me a space of 4 pixels from the top of the field though. How can I get it to do that?
    Rednerve
    Creative Freelance Design

  5. #4
    Senior Member justlivyalife's Avatar
    Join Date
    Jul 2003
    Location
    Birmingham, UK
    Posts
    2,871
    Member #
    2374
    I presume that you have to use, though not really used CSS for forms before.
    HTML Code:
    padding-top: 4px;
    justlivyalife - The future depends on what we do in the present. (Mahatma Gandhi)
    WDF Resources: WDF Rules
    Non-WDF: JavascriptSource | Dynamic Drive | phpBB | HTML-Kit | Winamp | Download Firefox | Morguefile

  6. #5
    Senior Member
    Join Date
    Mar 2004
    Posts
    1,518
    Member #
    5220
    Yeah, that's what I thought. But, as Trico explained, that increased the height. I had it so that it was spaced at the top without increasing the box height before, but I just cannot remember how!!
    Rednerve
    Creative Freelance Design

  7. #6
    Senior Member justlivyalife's Avatar
    Join Date
    Jul 2003
    Location
    Birmingham, UK
    Posts
    2,871
    Member #
    2374
    A suggestion: Can you not make the form field, say 20px tall, then have the text valigned in the centre at 12px - will that give you what you are looking for?
    justlivyalife - The future depends on what we do in the present. (Mahatma Gandhi)
    WDF Resources: WDF Rules
    Non-WDF: JavascriptSource | Dynamic Drive | phpBB | HTML-Kit | Winamp | Download Firefox | Morguefile

  8. #7
    Senior Member
    Join Date
    Mar 2004
    Posts
    1,518
    Member #
    5220
    Hmmm...good point. Why didn't I think of that? How do I set the valign of text in CSS?
    Rednerve
    Creative Freelance Design

  9. #8
    Senior Member justlivyalife's Avatar
    Join Date
    Jul 2003
    Location
    Birmingham, UK
    Posts
    2,871
    Member #
    2374
    justlivyalife - The future depends on what we do in the present. (Mahatma Gandhi)
    WDF Resources: WDF Rules
    Non-WDF: JavascriptSource | Dynamic Drive | phpBB | HTML-Kit | Winamp | Download Firefox | Morguefile

  10. #9
    Senior Member
    Join Date
    Mar 2004
    Posts
    1,518
    Member #
    5220
    That doesn't seem to set the vertical alignment of the text to the middle

    I used:

    Code:
    vertical-align:middle;
    Rednerve
    Creative Freelance Design

  11. #10
    Senior Member justlivyalife's Avatar
    Join Date
    Jul 2003
    Location
    Birmingham, UK
    Posts
    2,871
    Member #
    2374
    Hmm.

    I've never used it before, so can't really help much more, sorry!
    justlivyalife - The future depends on what we do in the present. (Mahatma Gandhi)
    WDF Resources: WDF Rules
    Non-WDF: JavascriptSource | Dynamic Drive | phpBB | HTML-Kit | Winamp | Download Firefox | Morguefile


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:44 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com