CSS HACK http://visitingnepal.com/csshack CSS HACK TOOLS AND TECHNIC Tue, 08 Sep 2009 11:47:50 +0000 http://wordpress.org/?v=2.5.1 en Customize Scrollbar http://visitingnepal.com/csshack/archives/11 http://visitingnepal.com/csshack/archives/11#comments Tue, 18 Nov 2008 10:32:51 +0000 admin0 http://visitingnepal.com/csshack/?p=11

Cusomizable Scrollbar

My clients send indesing file of  customize scrollbar . I use to laugh at them about customize scrollbar, because it could not be done through css .  Customize scrollbar is more better than deafult browser’s scrollbar . I have search so many time to find out customize scrollbar . Suddenly I say a great and delecious website “http://tylenol.com/page.jhtml?id=tylenol/pain/main.inc” through my official friend Manoj - “Web desiger”. At that day I bookmark in my digg.com social network. Sorry, I am not going to say story. Now just download form this link : http://www.visitingnepal.com/csshack/zip/customScrollBar.zip

]]> http://visitingnepal.com/csshack/archives/11/feed Centering web site through table with valid html and css http://visitingnepal.com/csshack/archives/10 http://visitingnepal.com/csshack/archives/10#comments Mon, 17 Nov 2008 11:24:27 +0000 admin0 http://visitingnepal.com/csshack/?p=10 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<title>Centering site through html</title>

<style type=”text/css”>

body,html{
height:100%;
margin:0px;
padding:0px;
overflow:hidden;
}
.site{
height:100%;
background:#333;
}
.siteTd{
height:100%;
vertical-align:middle;
text-align:center;

}
.page{
margin:0 auto;
}
.pageTd{
height:400px;
}
</style>
</head>
<body>

<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″  class=”site”>
<tr>
<td   class=”siteTd”>
<table width=”1024″ border=”0″ cellspacing=”0″ cellpadding=”0″ bgcolor=”#999999″ class=”page”>
<tr>
<td  class=”pageTd”>&nbsp;</td>

</tr>
</table></td>
</tr>
</table>

</body>
</html>

Note : I have roughly include style in same page . Please make seperate css and link in this page.

]]> http://visitingnepal.com/csshack/archives/10/feed Hanging banner box in centering site http://visitingnepal.com/csshack/archives/9 http://visitingnepal.com/csshack/archives/9#comments Mon, 17 Nov 2008 07:39:32 +0000 admin0 http://visitingnepal.com/csshack/?p=9

Handin Banner in right side in centering site

Download : http://www.visitingnepal.com/csshack/zip/hangingBannerInCenterSite.zip

]]> http://visitingnepal.com/csshack/archives/9/feed Word Break in FF and IE http://visitingnepal.com/csshack/archives/8 http://visitingnepal.com/csshack/archives/8#comments Sun, 26 Oct 2008 11:24:43 +0000 admin0 http://visitingnepal.com/csshack/?p=8

Download Script : http://www.visitingnepal.com/csshack/zip/wordBreak.zip

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Word Break in All Browser</title>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Untitled Document</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<style>
/* Here you can increase width */
#url { border:1px solid black; width:200px; }
p {border:1px solid blue; }
</style>
<script>
function wordWrap(){
/******
* wordWrap to firefox for big words
* Creative Commons license * Version: 1.0 - 26/04/2006
* Autor: Micox - Náiron J.C.G - micoxjcg@yahoo.com.br - http://elmicoxcodes.blogspot.com
* Uso: call the function on onload of body element.
* put the class “word-wrap” on elements to wordwrap
*******/
var larg_total,larg_carac,quant_quebra,pos_quebra;
var elementos,quem, caracs, texto, display_orig;

elementos = document.getElementsByTagName(”p”)

for(var i=0; i<elementos.length;i++){
if(elementos[i].className==”word-wrap”){
quem = elementos[i];

quem.innerHTML = String(quem.innerHTML).replace(/ /g,”Ø”)
texto = String(quem.innerHTML)

quem.innerHTML = ” ”

display_orig = quem.style.display;
quem.style.display=”block”;
larg_oficial = quem.offsetWidth;
//alert(”oficial: ” + larg_oficial)
//alert(”display ” + quem.style.display)
if(!document.all) quem.style.display=”table”;
//alert(”display ” + quem.style.display)
quem.innerHTML = texto;
larg_total = quem.offsetWidth;
//alert(”total: ” + larg_total)

pos_quebra = 0;
caracs = texto.length;
texto = texto.replace(/Ø/g,” “)
larg_carac = larg_total / caracs
if(larg_total>larg_oficial){
quant_quebra = parseInt(larg_oficial/larg_carac)
quant_quebra = quant_quebra - (parseInt(quant_quebra/6)) //quanto menor o num, maior a garantia;
quem.innerHTML = “”
while(pos_quebra<=caracs){
quem.innerHTML = quem.innerHTML + texto.substring(pos_quebra,pos_quebra + quant_quebra) + ” ”
pos_quebra = pos_quebra + quant_quebra;
}
}else{
quem.innerHTML = texto;
}//end if do larg_total>larg_oficial
quem.style.display = display_orig;
}//end if do word wrap
}//end for loop dos elementos
}
</script>
</head>

<body onload=”wordWrap()”>
<div id=”url”>

<p class=”word-wrap”>EstaEUmaLinhaQueDeveraSerQuebradaPoisÉGrandeDemais</p>

</div>
</body>
</html>
</body>
</html>

]]> http://visitingnepal.com/csshack/archives/8/feed css hack in safari 3.0 http://visitingnepal.com/csshack/archives/7 http://visitingnepal.com/csshack/archives/7#comments Wed, 06 Aug 2008 04:45:32 +0000 admin0 http://visitingnepal.com/csshack/?p=7 @media screen and (-webkit-min-device-pixel-ratio:0){
   #uploaden{
      margin-top:-180px;
   }
}

]]> http://visitingnepal.com/csshack/archives/7/feed Css comment hack for all IE browser http://visitingnepal.com/csshack/archives/6 http://visitingnepal.com/csshack/archives/6#comments Wed, 06 Aug 2008 04:41:17 +0000 admin0 http://visitingnepal.com/csshack/?p=6 Through html comment we can do css comment hack in All ie brower as per needed. . Here we have code mania for css hack for IE. it is w3c validate code also.

<!--[if IE]>
conditional for Internet Explorer
<![endif]–>

<!—[if IE 5]>
Conditional comment this is Internet Explorer 5
<![endif]–>

<!–[if IE 5.0]>
Conditional comment this is Internet Explorer 5.0
<![endif]–>

<!–[if IE 5.5]>
Conditional comment this is Internet Explorer 5.5
<![endif]–>

<!–[if IE 6]>
Conditional comment this is Internet Explorer 6
<![endif]–>

<!–[if IE 7]>
Conditional comment this is Internet Explorer 7
<![endif]–>

<!–[if gte IE 5]>
Conditional comment this is Internet Explorer 5 and up
<![endif]–>

<!–[if lt IE 6]>
Conditional comment this is Internet Explorer lower than 6
<![endif]–>

<!–[if lte IE 5.5]>
Conditional comment this is Internet Explorer lower or equal to 5.5
<![endif]–>

<!–[if gt IE 6]>
Conditional comment this is Internet Explorer greater than 6
<![endif]–>
]]> http://visitingnepal.com/csshack/archives/6/feed Centering Site through div http://visitingnepal.com/csshack/archives/4 http://visitingnepal.com/csshack/archives/4#comments Wed, 23 Jul 2008 06:21:12 +0000 admin0 http://visitingnepal.com/csshack/?p=4 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
<head>
<title>Vertical align</title>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />

<style>

html, body {
height: 100%;
margin: 0;
padding: 0;
overflow:hidden;
background:#0000ff
}

* {
margin:0px auto;
padding:0;
}

div#shim {
visibility: hidden;
width: 100%;
height: 50%;
margin-top: -317px;
_margin-top:-318px;
float: left;
}

div#wrapper {

width: 1000px;
height: 635px;
clear: both;
background:red;

position: relative;
top: -317px;

/* IE4ever Hack: Hide from IE4 **/
position: static;
/** end hack */

}

/* Hide from IE5mac \*//*/
div#shim {
display: none;
}
html, body {
height: auto;
}
/* end hack */

/* ]]> */

</style>

</head>

<body>

<div id=”shim”></div>
<div id=”wrapper”>
content

</div>

</body>
</html>

]]> http://visitingnepal.com/csshack/archives/4/feed Minimum height block for multi browser ( IE6, IE7 and FF) http://visitingnepal.com/csshack/archives/3 http://visitingnepal.com/csshack/archives/3#comments Thu, 17 Jul 2008 09:34:09 +0000 admin0 http://visitingnepal.com/csshack/?p=3 CSS code
.block{
display:block;
height:100% !important;
height:100px;
min-height:100px;
max-height:100%;
border:solid 1px green;
width:200px;
}

]]> http://visitingnepal.com/csshack/archives/3/feed Hello world! http://visitingnepal.com/csshack/archives/1 http://visitingnepal.com/csshack/archives/1#comments Tue, 22 Apr 2008 13:36:26 +0000 admin0 http://visitingnepal.com/csshack/?p=1 Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!

]]> http://visitingnepal.com/csshack/archives/1/feed