To align the contents of a field input with the associated label
When one gives a height to a field input, it happens that the typed text inside is not aligned correctly with the basis of the text present in the label. In this case, I decrease the height and I distribute a suspicion of in top and/or bottom according to desired alignment.
For a field input of 20px top, one will have the securities thus:
input {
: 13px;
: 3px 0 4px 0;
}
For a height identical to:
input {
: 20px;
}
tea ' S in tea !
Published on October 14th, 2008 by Bruno .
16 participations in the item
It is rather logical indeed since renderers Mozilla and add the securities of to the elements whose size is defined. But on shouldn't IE that be valid ton astuteness if?
!
input {: 20px; }
Hello,
It is also possible to align the elements into vertical. For that it is necessary to specify with the elements of the container vertical-align: ;
@La Fair: if, it goes well under IE, even under , knowing that the securities of can vary according to version of IE used.
@Nicolas F. and @Steven: Thank you with you two for these two very concise good ideas.
Edict: I have just tested the two solutions suggested higher, but none of both functioned in my case… Too bad: (
There is also another method, simpler, to align an element
inputcompared to an elementlabel: the use of the propertyvertical-align(which is not implemented only to the airframes of board, but also with the elements and online contents ones compared to the others). For aligning well, one will usevertical-align:. ;)It is not really a question of version it seems to me for IE, it is right which IE6 has returned two modes of. The Standard model (, Gecko, , etc), and the model “” ( in Microsoft). According to the first beacons which you put in top of your site, IE6 will be put either in standard mode or in mode. Example: : 200px + : 0 0 0 13px = width of 220px out of Standard and 200px in (cf: http://www.thinkxtreme.com/ or more precisely http://www.thinkxtreme.com/ and http://www.thinkxtreme.com/)
In any case, for the labels, I ever understood how to align “simply” (I insist on simply because I can do that in an intricate way in fact: p) a label of an input: radio: /
If Bruno, you could show an example in this item. ;)
@Victor :
The verticalone:is an good idea, but does that of it does not function at home. You give the reason besides by recalling that this property is also implemented .However, in my case, my beacon
labelis indisplay: blockand in : left Of the blow, the verticalone is without negotiable instrument.@Kud: The mode is not there for nothing in this case. They are the many small or computational errors on behalf of Internet Explorer in general;)
I end up more not seeking to understand why I must add a pixel per Ci or having there the same one returned on and … I am satisfied to feed my consequently, it is all ^^
To align the label of a radio operator input, you can use the verticalone about which one spoke higher, or use a beast padding-signal: . It should be noted that in certain cases, a will give better results.
Unfortunately, I do not keep under the elbow all the small tricks as that which pose problem. In certain cases, it is about a problem of HTML rather than of (to check well that one is not in an “exotic” configuration on this level).
I make integration the every day and there to tell the truth, since I pass IE6 in standard mode, I do not have really a problem on this side. On the other hand, new the that I discovered recently under IE6, it is the multiplication of the classes on an element. Such as for example , IE6 understands only “ ″. Damage, when one wants to make of the same structure but slightly different blocks if they are “small” or “large” like or (if there are several packs in the same page).
@Kud: Indeed, IE6 does not understand the sequence of the classes about which you speak. In addition, me either Is this to say that:
{…}is equal to:
, , {…}?
For information, script is supposed to correct this .
Not, precisely.
It is by wanting to make generic things' has a few weeks there that I wondered whether it were possible to make a sequence of classes.
I knew that one could make or on the same element, at this point in time I told myself “and if one made ”. And I concluded from there that yes.
What gives
<
" #53BB89 " >
via:
{: 200px; : 200px; to border-width: 1px; border-style: ; }{ to border-color: ; background: ; }knowing that I want that my class is assigned only to certain elements.
It is not inevitably the best example than I took, but concretely, I could during my integrations make , , , etc etc with the purpose of having really a common structure, i.e. , a style slightly different in term from presentation (, , and company), and different colors (, the background is black, and the #FFFFFF writing), etc etc Tout while knowing that I have several , and that these etc, is assigned really only to my main class, all alone, they do not have any interest such as for example , .
It should be noted that functioning too. Except all that for IE6, only the last class counts. Then imagines that I made …
And , , on the other hand, assign the properties to all these styles, contrary to my writing which assigns the properties only to one or more elements having ALL these joined together classes.
To as note that the as you put in attached file had not corrected me this problem but is necessary that I and read again your item. ;)
@Kud: , I see about with what that can be useful, even if for the moment, I do not find a case where this construction is necessary and could not be returned with a good management of the multiple classes and a good management of the cascade.
Yes, afterwards, it is only one experimentation, I did not finish polishing that. And in any event, since IE6 does not like that…
It there ace not really of astuteness , it is a standard use which go just as easily known IE6/7 and Firefox. The whole is that IE is in standard mode, if not any share in spin.
IE supports the properties and the in a standard way if it is in standard mode. If not it uses its own model of box. One should not seek further.
If I am not mistaken vertical-align: ; function only in one board. I doubt that this solution functions, except of course putting the form in a board in which case it is necessary to leave me time to go to seek a stick:)
@exotux:
Not false, at the same time, I did not say that it was a ^^
For information, it is a question of aligning the basis of the text contained in the field
inputwith the basis of the text of thelabel. (I specify, because I have the impression that one understands that I want to align theinputitself with thelabel).That functions very well in a form without boards. It is not necessary that an element is in on the other hand.