끄적대기

list 태그를 사용할 때 a에 배경효과를 주기 위해서 아래와 같은 코드를 많이 사용하지요. <!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> new document </title>   <meta name="generator" content="editplus" />   <meta name="author" content="" />   <meta name="keywords" content="" />   <meta name="description" content="" />   <style type="text/css"> *{margin:0;padding:0;} ul li a{display:block;border:1px solid red;}   </style>  </head>  <body>   <ul> <li><a href="#">Sub 1</a></li> <li><a href="#">Sub 1</a></li> <li><a href="#">Sub 1</a></li>   ...

http://www.virtuosimedia.com/dev/css/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs#PNG-Alpha-Transparency 여기 괜찮네 

{         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); /* IE 7 and olders */        opacity: .5;  } -ms- <--이부분이 ie8버전때문에 새로 추가됨. 원문 -  CDK http://forum.standardmag.org/viewtopic.php?id=2749

* 해당위치에 behavior: url('iepngfix.htc');  * class로 .iepngfix{behavior:url('iepngfix.htc')}; 자세항 사용법이나 설명은  정찬명님 블로그인 나라디자인으로 http://naradesign.net/wp/2006/12/15/100/

쉬운 방법으로 많은 사용되어지고 있는 png용 스크립트가 바로 png24이다. <style type="text/css">  .png24 {tmp:expression(setPng24(this));}  </style>  <script type="text/javascript">  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 '';  }  </script> <img src="이미지.png" class="png24" alt="" /> 사용법은 간단하나 가끔 (아직 정확한 이유는 모르겠음) png이미지가 영역은 있으나 보이지 않을 경우가 있다. (혹은 주로 X박스가 뜬다.) OTL... 해결책으로는 1. 로컬에서는 확인지 되지 않으나 서버에 올려놓고 보면 나오는 경우가 있다. 2. png의 경로를 절대경로를 사용하면 나오는 경우가 있다. 3. 1x1 gif투명 이미지를 만들어서 올려놓고 obj.src=''; 이 부분에 경로를 넣어주면 된다. 문제가 생겼을때 1번과 3번을 동시에 진행해서 해결을 보면 된다.

ie는 type="text" 와 type="images"가 가지는 영역을 다르게 랜더링한다. div.box{border:1px solid #3366ff;} input.style{border:1px solid #333;width:100px;height:20px;} <div class="box">  <input type="text" class="style" /> <input type="image" src="./images/common/login_btn.gif" /> </div> 이 부분은 우리가 각 태그가 가지는 영역을 없애기 위해  CSS시작에 padding:0px;margin:0px;를 주고 시작하듯 input 에 vertical-align:top;을 주면 해결이 된다. 그 후에는 컨디셔널코멘트로 위치값을 조정하자. Add *input 을 float으로 띄우는 방법도 있음.

<!--[if lte IE 6]><style type="text/css">.ie{ margin-top:30px;margin-bottom:-30px; }</style> <![endif]-->  이런식으로 IE 버전별로 적용을 시킬 수 있음.  XSL 에서는 <xsl:comment><![CDATA[[if lte IE 6]> <style type="text/css">.ie{ margin-top:30px;margin-bottom:-30px; }</style> <![endif]]]></xsl:comment> IE 선택적 적용(Conditional Comments) 부분,  ie에서만 동작기하길 원하는 js나 ie의 css 버그 처리 때문에 사용하는 경우 많음 gt = selects greater than  보다큰 :  if gt IE 6 ->  현재버전 > 6 lt = selects less than 보다 작은 :  if lt IE 6 ->  현재버전 < 6 gte = selects greater than or equal to 같거나 큰  :  if gte IE 6 ->  현재버전 >= 6 lte = selects less than or equal to 같거나 작은  :  if lte IE 6 ->  현재버전 <= 6 To select exclusivly for any  non IE  - use " IE  & !IE " for a downlevel-revealed within a downlevel-hidden CC <!--[if IE]><![if !IE]><![endif]-->  html ...