UI개발자로 살아가기... ::

IE6용 png 기법

CSS 2008/06/25 11:10

언제나 말썽인 IE6를 위한 png기법

-백그라운드가 png일경우

.test{background:url(bg.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.png', sizingMethod='crop');}

-png이미지를 사용 할 경우
js파일에 아래 소스 추가

function setPng24(obj) {
obj.width=obj.height=1;
obj.className=obj.className.replace(/\bpng24\b/i,'');
obj.style.filter =
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ obj.src +"',sizingMethod='image');"
obj.src='';
return '';
}

css파일엔 클래스를 정의

.png24 {tmp:expression(setPng24(this));}

img태그를 넣을때 class="png24" 를 넣어주면 된다.

이올린에 북마크하기(0)

이올린에 추천하기(0)

Posted by 튀밥

트랙백이 없고, 댓글이 없습니다.

IE6에서 플리커버그가 생길때 넣어주면 해결됨.
------------------------------------------------------------

<!--[if IE]>
<script type="text/javascript">
// IE Flicker Bug위한 Hack
(function(){
/*Use Object Detection to detect IE6*/
var m = document.uniqueID /*IE*/
&& document.compatMode /*>=IE6*/
&& !window.XMLHttpRequest /*<=IE6*/
&& document.execCommand ;

try{
if (!!m) {
m("BackgroundImageCache", false, true) /* = IE6 only */
}
} catch(oh) {};
})();
</script>
<![endif]-->

이올린에 북마크하기(0)

이올린에 추천하기(0)

Posted by 튀밥

트랙백이 없고, 댓글이 없습니다.

ASCII Entities with Entity Names

CSS 2008/04/25 10:01

"	quotation mark	"	"
'	apostrophe	' (does not work in IE)	'
&	ampersand	&	&
<	less-than	<	<
>	greater-than	>	>

이녀석들땜에 validation 을 통과 못할때가 꽤 많다.

이올린에 북마크하기(0)

이올린에 추천하기(0)

Posted by 튀밥

트랙백이 없고, 댓글이 없습니다.

float 자동 해제

CSS 2008/04/14 15:01

해당 블럭의 float를 자동으로 해제

.clfix:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
.clfix {display: inline-block;}
.clfix {display: block;}
/* Hides from IE-mac \*/
* html .clfix {height: 1%;}
/* End hide from IE-mac */
.clfix{ zoom:1; } /*for IE 5.5-7*/

이올린에 북마크하기(0)

이올린에 추천하기(0)

Posted by 튀밥

트랙백이 없고, 댓글이 없습니다.

컨텐츠 길이에 따라 늘어나는 iframe

JavaScript 2008/04/14 15:00

일단 이 방법은 같은 도메인일때만 사용가능하다.

<script type="text/javascript">
//document.domain = "paran.com";
function IframeResize(id)
{
   var ifrm = document.getElementById(id);
   var the_height = ifrm.contentWindow.document.body.parentNode.scrollHeight + 4 ;
   ifrm.height = the_height ;
}
</script>
<div>
<iframe id="frame" onload="IframeResize( this.id );" src="iframe_inner.html" frameborder="0" width="98%" scrolling="no"></iframe>
</div>