Search This Blog

Monday, January 30, 2012

How to Fix IE6 ie7 ie 8 ie 9 using css


Welcome to designers blog  Here i have posted how to use the css property to fix  browser  issue in IE 6 IE7 and  IE8 and  Mozilla Firefox

    /* safari */
    padding: 14px 10px 25px 10px;            

   /* ie 6 only  */
    _padding-top: 5px;

    /* ie7 only */
    *padding: 10px 10px 25px 10px;            


 /* ie 8 only  */
    padding-top: 5px\0/ !important;

/* ie 9 only  */

#element {
    color: green\0/IE8+9; /* IE8+9  */
}
:root #element { color:pink \0/IE9; }  /* IE9 */


post this Css in document of HTML Not in style.css

/* firefox  */

<style type="text/css">
@-moz-document url-prefix()
{
 
.signin_field_txtbox
{

    width:273px;
    height:20px;
    margin:6px 5px 4px 5px;
    *margin:7px 5px 4px 5px;
    margin:8px 5px 4px 5px\0/;
    padding:0px;
    border:none;
    outline:none;
    background:none;
    }
</style>

Sunday, January 29, 2012

menus

Welcome to designers dairy blog here i have post article  how to design the menus using background color.

coding and css below




Html Code :

<div id="menu_bg"><!--menu_bg div starts here-->
<div id="menu">
    <ul>
                                                                                      
        <li><a href="#" class="current">home</a></li>
        <li><a href="#">Pets </a></li>
        <li><a href="#">Emergency </a></li>
        <li><a href="#">NGO</a></li>
        <li><a href="#"> Services and Products </a></li>   
                <li><a href="#"> Ads </a></li>   
                        <li><a href="#"> News </a></li>   
                        <li><a href="#">  Contact Us </a></li>                                   
    </ul>

</div>
</div><!--menu_bg div starts here-->
Css:
#menu_bg
{
 width:100%;
 height:42px;
 background-color:#000;
 padding:0;
 margin:0;
}
#menu{
    position:relative;
    font-family:Arial, Helvetica, sans-serif;
    margin:0 auto;

     width:970px;
     height:42px;
    background-color:#000000;       
        }
        #menu ul{
            list-style:none;
            margin:0px;
            padding:0px;
        }
            #menu li{
                list-style:none;
                display:block;
                float:left;            
                                       
            }
                #menu li a{
                    display:block;
                    float:left;
                    color: #FFF;
                    font-size:13px;
                    font-weight:bolder;
                    line-height:42px;
                    border:solid #000;
                    border-width:0px 1px 0 1px;
                    text-decoration:none;
                    padding:0 32px;               
                }
                    #menu li a:hover{
                        color: #FFF;
                        background-color:#8fc400;
                    }
                #menu li a.current{
                    display:block;
                    float:left;
                    background-color:#92c52f;
                                   
                    color:#fff;
                    text-transform:uppercase;
                    font-size:13px;
                    font-weight:bold;
                    line-height:42px;
                   
                    text-decoration:none;
                    padding:0 35px;   
                }
                    #menu li a:hover.current{
                        color:#fff;
                    }

For more free css menus Download

how-to-use-custom-fonts-on-your-website-with-css

Welcome to designers dairy blog  here i have post the article  you can use custom fonts on your website.first

you have to download the fonts u need to integrated in your website in four types Eot ,Woff, Ttf  and Svg

Format.  if u cant get any one of the formats u can  use this tool  font face to create  these following

formats http://fontface.codeandmore.com/ . upload the font u have any one of the format

 it will generate the font face css style and fonts formats. The below style has been genarate by this tool

fontface and i have applied in the following  Website 


Convert Font (.ttf or .otf):


http://www.freefontconverter.com/


<style type="text/css">
@font-face {
    font-family: 'TwCenMT-CondensedBold';
    src: url('fonts/tccb.eot');
    src: url('fonts/tccb.eot?#iefix') format('embedded-opentype'),
         url('fonts/tccb.woff') format('woff'),
         url('fonts/tccb.ttf') format('truetype'),
         url('fonts/tccb.svg#tccb') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'HelveticaNeue-Roman';
    src: url('fonts/helveticaneue.eot');
    src: url('fonts/helveticaneue.eot?#iefix') format('embedded-opentype'),
         url('fonts/helveticaneue.woff') format('woff'),
         url('fonts/helveticaneue.ttf') format('truetype'),
         url('fonts/helveticaneue.svg#helveticaneue') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'TwCenMT-Condensed';
    src: url('fonts/tccm____.eot');
    src: url('fonts/tccm____.eot?#iefix') format('embedded-opentype'),
         url('fonts/tccm____.woff') format('woff'),
         url('fonts/tccm____.ttf') format('truetype'),
         url('fonts/tccm____.svg#tccm____') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Tunga-Bold';
    src: url('fonts/tungab.eot');
    src: url('fonts/tungab.eot?#iefix') format('embedded-opentype'),
         url('fonts/tungab.woff') format('woff'),
         url('fonts/tungab.ttf') format('truetype'),
         url('fonts/tungab.svg#tungab') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'TwCenMT-Regular';
    src: url('fonts/tcm.eot');
    src: url('fonts/tcm.eot?#iefix') format('embedded-opentype'),
         url('fonts/tcm.woff') format('woff'),
         url('fonts/tcm.ttf') format('truetype'),
         url('fonts/tcm.svg#tcm') format('svg');

}

</style>

Validating to select in sequencial order using angular

    < input type = "checkbox" (change) = "handleSelectTaskItem($event, taskItem)" [checked] = " taskItem . i...