CSS form elements
Curing CSS for some form elements, a case from real life.
.textbox{
padding:3px 0;/*to adjust equal heights for all elements under IE and FF*/
vertical-align:middle;/*to adjust elements (like textbox and button) vertically under IE*/
width:155px;/*in case equal widths are needed under IE and FF*/
}
.select{
height:22px;/*to adjust equal heights for all elements under IE and FF*/
width:105px;/*in case equal widths are needed under IE and FF*/
}
.button{
height:24px;/*makes the button as high as the textbox under Chrome*/
overflow:visible;/*takes off default side paddings of IE*/
vertical-align:middle;/*to adjust elements vertically under IE*/
width:55px;/*in width-critical locations sets the width equal for IE and FF*/
}
.checkbox{/*the idea here is to get rid of the space around checkbox under IE*/
height:13px;/*IE*/
margin-top:4px;
padding:0;/*IE*/
width:13px;/*IE*/
}
.radio{
height:13px;/*IE*/
padding:0;/*IE*/
vertical-align:top;/*sometimes equalizes the position for IE and FF*/
width:13px;/*IE*/
}
2009
Web Development - XHTML CSS JavaScript jQuery.