SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: CSS confusing

  1. #1
    SitePoint Guru afridy's Avatar
    Join Date
    Mar 2007
    Posts
    966
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    CSS confusing

    folks,

    i am still learning css.



    Code:
    <input type="text" size="70" value="http://" name="url" id="urlbox">
    Code:
    #urlbox {
    background-color:#F6F6F6;
    font-size:30px;
    height:30px;
    }
    now if you noted, i have given the same text box height the font height (size). no padding no border nothing. i wonder why it does not fit 100% in to the text box? it sinked downwards.

  2. #2
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,580
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Virtually all HTML elements have innate CSS properties assigned by the browser -- <h1> tags have a large font-size and a font-weight of bold, <li> tags have a list-style to give them bullets, <i> tags have a font-style of italic, etc.

    Similarly, text inputs have default padding and borders that give them their normal appearance and behavior. If you don't want the defaults, you have to override them -- set the padding to 0 yourself.

  3. #3
    SitePoint Guru afridy's Avatar
    Join Date
    Mar 2007
    Posts
    966
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    thanks dan for the explanation.
    any way padding 0 had no effect here i tried.

    background-color:#F6F6F6;
    border:1px solid #CCCCCC;
    font-size:30px;
    height:30px;
    padding:0;

  4. #4
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi Afridy - I am also still learning CSS but maybe take the font size down. 30px is fairly large. Just an idea. The height does control the height of the textbox but if you have both at 30px that is where your problem is.

  5. #5
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,580
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It did have an effect, and if you measure both the inside of the text box without padding and 30px text, they'll have the same dimensions. I just checked that in a graphics program. However, the bottom of 30px text in a 30px box will be cut off because the baseline of the text (the imaginary line the bottom of letters sit on) will line up with the bottom of the box and parts of text that drop below the baseline (like the curve of a j) will appear below the line. You'd have to shift the text up to avoid that.

    Basically, you're not supposed to set the font size exactly equal to the height of the box you're typing in. I don't think CSS provides any mechanism to change the baseline height inside an input element.

  6. #6
    SitePoint Guru afridy's Avatar
    Join Date
    Mar 2007
    Posts
    966
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks dan and cga, Undestood!
    yes, actually no one really put text size exact size of text box height. just i thought to experiment it

  7. #7
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    afridy, I would also say that your text size should be measured in EM's rather than PX (for the benefit of users of Internet Explorer who cannot zoom). As for your issue I would not apply height to the input itself but give the text height and then add padding to space the content held within it (this will automatically adjust the height of the input to meet it's contents), what's happening is the text is overflowing as it's pushing past the input's inherent spacing.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,379
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The line height is the line that an element with a font-size will sit in. The line height is made up with half leading that is placed on top and bottom of the font size you define to allow for descenders and ascenders.

    Therefore text with a 30px font size will need to sit in a line of about 36px to display properly and depending on the line-height that has been set for the line.

    You could set the line-height to the same as the font-size:

    e.g.
    Code:
    .test{
        font-size:30px;
        line-height:1.0;
    }
    That will clip the size to 30px only resulting in the descenders being clipped as they now stick out of the line-height.

    As mentioned above you should avoid using the height on the input unless you have no choice in the matter. If you want a height of about 30px then reduce the font size down a bit and set the line-height to about 1.2 or use a normal font-size and apply some padding top and bottom to create the extra height. This will allow the element to expand as required.

  9. #9
    SitePoint Guru afridy's Avatar
    Join Date
    Mar 2007
    Posts
    966
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you alex and paul,
    really nice explanations. really appriciated.
    so ill remove the input box height and concentrate only on the height of the font i want.

    Thank you again!


Bookmarks

Posting Permissions

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