HTML/CSS tips

Input box with rounded corners

using this image as background


/* Rounded Corner */
/*Method 1 set the bg of the imput as the image itself.Drawback is that you should explicitly set the wiidth and height of the input box to match the size og the backgorund*/
.tb5 {
    background:url(../images/bgd_input.gif) no-repeat ;
    height: 25px;
    width: 265px;
    color:#FFF;
    padding-top:5px;
    padding-left:5px;
}



HTML to use
< input type="text" name="email" id="email"  class="tb5"/ >



/*Method 2 put the input inside 3 nested divs.containerleft,container right,container as below.set bg of the input box to none.Using this method variable size inputs can have rounded corners*/

#inputContainerLeft{
    background:url(../images/bgd_input.gif) no-repeat ;
    display:inline-block;
    background-position:top left;
    padding:0px 0px 0px 5px;
    margin:0px;
}
#inputContainerRight{
    background:url(../images/bgd_input.gif) no-repeat ;
    background-position:right top;
    display:inline-block;
    padding:0px 5px 0px 0px;
    margin:0px;
    height:30px;
    border:0px solid #FF0;

}

.halfInputContainer{
    background:none;
    color:#FFFFFF;
    margin-bottom:0px ;
    padding:5px 0px 5px 0px;
   
    border:0px solid #F00;
   
   
   
   
}

.halfInput{
    background:none;
    color:#FFFFFF;

    padding:0px;
}


HTML to use

< div id="inputContainerLeft"   >
       
        < div id="inputContainerRight" >
         
       
          < div class="halfInputContainer" >
                  < input type="text" name="mobile_no" size="10"  class="halfInput" / >
            < / div >
         
         
          < / div >
        < / div >


for IE6  you shoukld add this addtional block in the html page

< !--[if IE 6] >   
< style tpe="text/css" >
.inputContainerRight{
     width=10px;   
   
}
< /style >
< ![endif]-- >