CSS confusing

folks,

i am still learning css.

<input type="text" size="70" value="http://" name="url" id="urlbox">
#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.:rolleyes:

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.

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;

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.

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.

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 :smiley:

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. :slight_smile:

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.


.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.

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!