VoidNoble IT Zone

IE에서는 padding값을 width 안에 넣어서 계산하지만 FF에서는 width와 padding을 따로 계산한다. 예를들어 총 넓이가 70px 인 박스를 만들고 싶을 때 IE에서는 width:65px; padding-right:5px FF에서는 width:70px; padding-right:5px 으로 해 줘야 맞는다는 것이다. DTD 선언을 제대로 해 주면 동일해진다고 해서 갖가지 선언을 해 보았으나 width와 padding의 차이는 있었다.

IE와 non-IE에서는 width 인식 범위가 padding를 포함/안함 계산되어 한쪽 브라우저에서만 표준코딩을 하면 나중에 넓이 문제가 나오게 된다. 하여 구글링을 하다가 별의 별 핵을 다 써보았으나 ie7,8 과 non-ie 구분적 hack 적용은 아래와 같은 CSS if Condition 만 자꾸 검색되어서 CSS를 두개씩 만들어야 되나... 하다가 결국 인라인에 적용할 수 있는 hack 하나 건졌다. ; 전에 !ie 이면 IE 전용 ; 전에 ie 이면 Non-IE 전용 IE만 적용 예 : width:990px; width:950px !ie; 공통적인 값을 먼저 적고, 다음에 특수 브라우저용을 적으면 되겠다.

목표는 아래와 같다 구현해봤던 CSS .main02 { font:normal 9pt dotum,Verdana; border-bottom:1px dotted lightgray; margin:0 0 15px 0; padding:0 0 10px 0; } .main02 .pic { width:90px; height:60px; overflow:hidden; border:1px solid silver; float:left; margin:0 15px 5px 0; } .main02 .pic img { width:100%; border:0; } .main02 .title { width:350px; overflow:hidden; font:bold 12pt dotum,Verdana } .main02 .subtitle { m..

-------------------------------------- | 제목 more | -------------------------------------- 제목 more

http://www.sohtanaka.com/web-design/protect-your-images-with-css-watermarks/

http://www.sohtanaka.com/web-design/css-overflow-property-quick-tip/

http://www.smashingmagazine.com/2009/10/05/mastering-css-coding-getting-started/ We’ll start with what you could call the fundamental properties and capabilities of CSS, ones that we commonly use to build CSS-based websites: Padding vs. margin Floats Center alignment Ordered vs. unordered lists Styling headings Overflow Position Once you are comfortable with the basics, we will kick it up a notc..

http://fetchak.com/ie-css3/ 이게 뭔가요? IE-CSS3 는 인터넷 익스플로러에서 곧 다가올 CSS3 표준에서 가능한 인기있는 새로운 스타일들의 지원을 제공해줍니다. 동작은 인터넷 익스플로러로 페이지를 보고 있다면, 몇몇 요서들은 스크립트에 의해 벡터 마크업 언어(VML) 내에서 재생성되어 있을겁니다. IE-특화 벡터 그림 언어는 IE가 못하는 둥근 모서리나 블러 효과와 같은 CSS 표현을 제공합니다. 사용법 평소 하던대로 CSS 를 작성하되 새 한 줄을 더하세요: .box { -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; /* Safari and Chrome */ border-radius: 15px; /*..

롤오버 효과를 내는데는 아래 그림에서와 같이 2가지 방법이 있다. 방법1. 그림 2개를 만들어서 스위칭. 방법2. 하나의 그림 파일에 위,아래로 마우스OUT, 마우스OVER 이미지를 올려놓고 CSS로 조절. RSS Feed #navigation li a#rssfeed { background: url(images/rssfeed_bg.jpg) no-repeat top left; } #navigation li a#rssfeed:hover { background-position: bottom left; } [출처] http://www.teddy-o-ted.com/tutorials/rollover-effects-made-easy-with-css/

A live example for this post (view source for CSS and XHTML) gonzo fozzie statler waldorf gonzo fozzie statler waldorf