달력

092017  이전 다음

  •  
  •  
  •  
  •  
  •  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

'DHTML/CSS'에 해당되는 글 5건

  1. 2010.07.05 [펌] Internet Explorer CSS bug fixes
  2. 2007.06.14 CSS 참고할곳
  3. 2007.04.18 CSS Layout 공부하기...
  4. 2006.10.09 CSS Tab Designer
  5. 2006.09.06 CSS Navigation Techniques (37 entries).

 

 


 

 

 

구글, 유튜브 등이 2010년부터 인터넷익스플로어6를 더이상 지원하지 않는다고 발표했고, 심지어 IE6의 장례까지 치루었지만, 크로스 브라우저 테스트시 광란의 CSS 버그마저 그냥 지나치는 웹디자이너/개발자는 없을 것입니다.

이 포스트는 ie의 시각적인 버그들을 잘 정리하고 있는 positioniseverything.net를 토대로 간략히 정리하면서 일부 수정하고 추가한 것입니다. 하지만 개인적인 필요에 의해 정리해둔 거라서 내용이 친절하지 않으므로, 자세한 내용은 위 사이트를 참고하시길…

IE 버그 원인과 해결책을 찾기위해 시간을 보내는 일은 매우 스트레스 받는 일이며, 궁극적인 해결이 아닌 버그 회피인지라 머릿속에 잘 남지도 않습니다. 때문에 굳이 아래 내용을 다 읽고 숙지할 필요는 없습니다. 레이아웃이 뭔가 이상하다 싶을때, 대충 height:1%, display:inline, position:relative, width:100% 중 하나를 쳐넣어보세요. 그래도 해결되지않을때 아래 내용을 참고하세요.

——

Doubled Float-Margin Bug
버전: IE6
문제: float 요소에 margin을 적용했을 경우, margin이 이중으로 표현되는 문제
해결: float 요소에 display:inline 적용
참고: http://positioniseverything.net/explorer/doubled-margin.html

——

Peekaboo Bug
버전: IE6, IE7
문제: float 요소 안의 내용이 나오지 않다가, 브라우저 창 크기를 조절하거나 스크롤했을때에만 가끔 내용이 나타나는 문제
해결: float 요소와 그 요소를 감싸는 요소 모두 적용
position: relative; /* IE6 bugfix */
min-width: 0; /* IE7 bugfix */
참고: http://positioniseverything.net/explorer/peekaboo.html
참고: http://www.brownbatterystudios.com/sixthings/2007/01/06/css-first-aid-for-ie-peekaboo-bug/

——

Duplicate Characters Bug
버전: IE6
문제: float 요소가 1개 이상 연속될때 마지막 float 요소의 문자 끝부분이 중복 출력되는 문제로, float 요소 내부에 <!– comment –>, <input type=”hidden” />, { display:none; } 와 같은 요소들이 포함되어있을때 발생.
해결: float 요소에 display:inline 적용
참고: http://positioniseverything.net/explorer/dup-characters.html

——

Expanding Box Problem
버전: IE6
문제: 레이아웃 요소의 크기를 지정했음에도 불구하고, 지정한 크기보다 큰 텍스트(띄어쓰기가 없는 긴 텍스트)를 포함할 경우 요소의 크기가 늘어나버리는 문제
해결: 해당 요소에 word-wrap:break-word; overflow: hidden; 적용
참고: http://positioniseverything.net/explorer/expandingboxbug.html

——

Guillotine Bug
버전: IE6, IE7
문제: float 요소의 하단이 잘리거나(IE6), float 요소를 포함하는 컨테이너 요소의 크기가 늘어나버리는(IE7) 문제
해결: float 요소를 포함하는 컨테이너 요소 바로 뒤에 clear해주는 요소를 삽입(예: <div style=”clear: both”></div>)
참고: http://positioniseverything.net/explorer/guillotine.html

——

IE6 Float Model Problem
버전: IE6
문제: float 요소 다음에 width가 선언되지 않은 non-floated 요소가 위치하면, 두 요소의 바운더리는 겹쳐야 한다. 하지만 non-floated 요소의 width가 선언되면, non-floated 요소가 float 요소 옆으로 나란히 위치하는 문제.
해결: 없다. 두 요소의 바운더리가 겹쳐져야 하는 상황을 아예 만들지 말거나, 꼭 겹쳐져야한다면 position을 사용하는 등의 다른 방법을 구사.
참고: http://positioniseverything.net/explorer/floatmodel.html

——

Three Pixel Text-Jog
버전: IE6
문제: float 요소 다음에 non-floated 요소가 위치하면, non-floated 요소의 텍스트가 3 pixel 밀리는 문제.
해결: float 요소에 {margin-right:-3px}, non-floated 요소에 {height:1%; margin-left:0} 적용
참고: http://positioniseverything.net/explorer/threepxtest.html

——

Inherited margins on form elements
버전: IE6, IE7
문제: form을 포함하는 컨테이너 요소에 margin이 적용되어있을때, 특정 input 요소들이 컨테이너의 margin을 상속받는 오류.
해결: input 요소 앞에 inline 요소를 삽입하거나, span, label 등의 컨테이너 요소로 input 요소를 감싼다.
참고: http://positioniseverything.net/explorer/inherited_margin.html

——

Line-height Bug
버전: IE6
문제: plain text 중간에 inline으로 img, input, textarea, select, object가 삽입되어있을 경우 line-height 제대로 표현하지 못하는(collapse됨) 문제.
해결: inline으로 삽입된 img, input… 요소의 상하 margin을 교정 (예: {margin:45px 0; vertical-align:middle;})
참고: http://positioniseverything.net/explorer/lineheightbug.html

——

Border Chaos
버전: IE6
상황: block 요소가 두개 있다. 두번째 요소의
문제: 연속되는 block 요소중 두번째 이후 요소들의 margin-top이 음수이고, border가 적용되어있을때, 나타나는 광란의 버그
해결: 연속되는 block 요소들의 컨테이너(parent)에 {position: relative;} 적용
참고: http://positioniseverything.net/explorer/border-chaos.html

——

Disappearing List-Background Bug
버전: IE6
문제: 리스트(ol, ul, dl)를 감싸는 div의 position이 relative이고 float되어있으며, 리스트요소(li, dt)에 background가 사라지는 문제(background를 적용했을때).
해결: 리스트요소(li, dt)에 {display:inline} 적용
참고: http://positioniseverything.net/explorer/ie-listbug.html

——

Unscrollable Content Bug
버전: IE6
문제: position이 relative이고 크기가 지정되지않은 컨테이너 요소가, position이 absolute이고 크기가 페이지보다 큰 컨텐츠를 포함하고 있다면 스크롤바가 나타나야 하지만 그렇지않은 문제.
해결: 컨테이너 요소에 {height:1%} 적용
참고: http://positioniseverything.net/explorer/unscrollable.html

——

Duplicate Indent Bug
버전: IE6
문제: float요소가 padding 또는 margin이 적용된 컨테이너에 위치하고 있다면, 이중으로 적용되는 문제.
해결: 경우의 수가 워낙 많지만, 대부분의 경우 {display:inline} 으로 해결 가능.
참고: http://positioniseverything.net/explorer/floatIndent.html

——

Escaping Floats Bug
버전: IE6
문제: 크기를 지정하지 않은 컨테이너가 float요소 여러개를 포함하고 있는데(clear 요소로 float 해제했음), 컨테이너 영역이 제대로 표현되지 못하는 문제.
해결: 컨테이너에 {height:1%} 적용
참고: http://positioniseverything.net/explorer/escape-floats.html

——

Creeping Text Bug
버전: IE6
문제: block요소가 또 다른 block요소를 포함하고 있고, border-left, padding-bottom이 적용되어있을때, 내부의 block요소가 1px씩 좌측으로 기어들어가는 문제
해결: 외부 block요소에 {height:1%;} 적용
참고: http://positioniseverything.net/explorer/creep.html

——

기타
문제: a를 block으로 지정하면, 블록 전체가 마우스에 반응해야하는데 여전히 텍스트에만 반응하는 문제
해결: height:1%

문제: 리스트요소(li)간 간격이 발생하는 문제
해결: display: inline

문제: {position:absolute; bottom:0; right:0}인 요소가 relative인 부모의 우측하단에 위치하지 않고 전체 화면의 우측하단에 위치하는 문제
해결: height:1%

——

FireFox의 버그
문제: 배경 이미지의 위치를 bottom으로 했을 경우, 브라우저 크기보다 컨텐츠의 크기가 짧다면, 배경이미지가 컨텐츠 하단에 위치하는 버그
해결: html {height:100%}

신고

'DHTML > CSS' 카테고리의 다른 글

[펌] Internet Explorer CSS bug fixes  (0) 2010.07.05
CSS 참고할곳  (0) 2007.06.14
CSS Layout 공부하기...  (0) 2007.04.18
CSS Tab Designer  (0) 2006.10.09
CSS Navigation Techniques (37 entries).  (0) 2006.09.06
Posted by Tornado tornado
TAG CSS, HTML, ie6

CSS 참고할곳

DHTML/CSS 2007.06.14 11:33
CSS 참고

http://www.cssplay.co.uk/
신고

'DHTML > CSS' 카테고리의 다른 글

[펌] Internet Explorer CSS bug fixes  (0) 2010.07.05
CSS 참고할곳  (0) 2007.06.14
CSS Layout 공부하기...  (0) 2007.04.18
CSS Tab Designer  (0) 2006.10.09
CSS Navigation Techniques (37 entries).  (0) 2006.09.06
Posted by Tornado tornado
TAG CSS
http://www.subcide.com/tutorials/csslayout/

쉽게 잘 나와있어서 보고 따라하기 좋음..

하지만~~~ 나도 안해봤다는거.
신고

'DHTML > CSS' 카테고리의 다른 글

[펌] Internet Explorer CSS bug fixes  (0) 2010.07.05
CSS 참고할곳  (0) 2007.06.14
CSS Layout 공부하기...  (0) 2007.04.18
CSS Tab Designer  (0) 2006.10.09
CSS Navigation Techniques (37 entries).  (0) 2006.09.06
Posted by Tornado tornado

CSS Tab Designer

DHTML/CSS 2006.10.09 16:23

http://www.anticlue.net/archives/000684.htm

 

CSS Tab Designer

A nice tip from Sandy Clark, the CSS Tab Designer. The nice functionality is the visual creation, WYSIWYG.

신고

'DHTML > CSS' 카테고리의 다른 글

[펌] Internet Explorer CSS bug fixes  (0) 2010.07.05
CSS 참고할곳  (0) 2007.06.14
CSS Layout 공부하기...  (0) 2007.04.18
CSS Tab Designer  (0) 2006.10.09
CSS Navigation Techniques (37 entries).  (0) 2006.09.06
Posted by Tornado tornado

css 메뉴 처리


http://alvit.de/css-showcase/css-navigation-techniques-showcase.php




>더보기


신고

'DHTML > CSS' 카테고리의 다른 글

[펌] Internet Explorer CSS bug fixes  (0) 2010.07.05
CSS 참고할곳  (0) 2007.06.14
CSS Layout 공부하기...  (0) 2007.04.18
CSS Tab Designer  (0) 2006.10.09
CSS Navigation Techniques (37 entries).  (0) 2006.09.06
Posted by Tornado tornado