Friday, March 15, 2013

IE Bugs Fixing Hints for all browsers 

For all versions of ie:-
<!--[if IE]>
        <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

IE Bugs Fixing Hacks for all browsers :-

IE-6 ONLY
* html #div {
height: 300px;
}

IE-7 ONLY
*+html #div {
height: 300px;
}

IE-8 ONLY
#div {
height: 300px\0/;
}

IE-7 & IE-8
#div {
height: 300px\9;
}

NON IE-7 ONLY:
#div {
_height: 300px;
}

Hide from IE 6 and LOWER:
#div {
height/**/: 300px;
}
html > body #div {
height: 300px;
}
 

IE-9 ONLY
:root  #div {
height: 300px\0/;
}



IE-9 and IE-10 

@media all and (min-width:0)
 {
    .classname { right:15px\0/ ; }  /* IE9-IE10pp4 */
}

Hacks for chrome and safari :-

@media screen and (-webkit-min-device-pixel-ratio:0)
{ 
.classname  {margin: 0px 5px 0px 0px; }  /*  Web kit and Chrome */ 
}

Posted by at No comments:

Thursday, February 14, 2013

Dynamic Input type File Browse button Method

/****** Browse Button Method ******/

<style type="text/css">
.upload_block {
position:relative;
width:250px;
height:36px;
float:left;
}
.trueupload {
position:absolute;
top:20px;
right:0;

/* start of transparency styles */
opacity:0;
-moz-opacity:0;
filter:alpha(opacity:0);
/* end of transparency styles */

z-index:2; /* bring the real upload interactivity up front */
width:100px;
}
.dummyupload {
background: url(images/browse_btn.jpg) no-repeat 100% 50%;
height:36px;

}
.dummyupload input {
width:150px;
height:30px;
}
</style>

 <body>

<form>
<div class="upload_block">
<label for="upload">Upload Image: </label>
<div class="dummyupload">
<input type="text" name="dummyupload" /> <!-- browse button is here as background -->
</div>
<input type="file" name="upload" class="trueupload" onchange="this.form. dummyupload.value = this.value;" />
</div>
</form>
</body>

 /*----------------------------------------------------*/



<style type="text/css">
.upload_photo { position:relative; width:460px; height:34px; float:left }
.trueup { height: 34px; left: 0; opacity: 0; position: absolute; top: 0px; width: 460px; z-index: 9 }
.dummyup { background:#faf8f6; width:460px }
.dummyup .filebtn { background: url("../images/browse_btn.png") no-repeat scroll right top rgba(0, 0, 0, 0); border: medium none; height: 34px; position: absolute; right: -26px; top: -2px; width: 168px; }
.dummyup input[type='text'] { border: 1px solid #E3DCDC; color: #444444; font-size: 13px; height: 26px;    padding: 0 10px;    width:290px !important;  }
</style>
<body> 
<form>
<div class="upload_photo">
           <div class="dummyup">
            <input type="text" name="dummyup" value="" />
            <input type="submit" class="filebtn" value=""   />
            <!-- browse button is here as background -->
           </div>
           <input type="file" name="upload" class="trueup" onchange="dummyup.value = this.value;" />
          </div>
</form>
</body>
For more details click here
Posted by at 1 comment:
Subscribe to: Posts (Atom)