Search Results for 'ie'


15 POSTS

  1. 2008/04/01 [캐동감] 나를 미치게 하는 PNG by mkyoon
  2. 2008/03/29 IE의 Select 콤보 박스와 CSS 그리고 Encoding by mkyoon
  3. 2008/03/07 IE8 Beta 1 그리고 Developer Toolbar by mkyoon (2)
  4. 2007/12/11 IE6 과 max-width 그리고 expression by mkyoon
  5. 2007/12/03 Filter - AlphaImageLoader 와 PNG 그리고 Link by mkyoon

[캐동감] 나를 미치게 하는 PNG


원래 "개, 캐" 라는 접두어를 싫어한다. (내가 개띠라서 그런거 절대 아니;;)
하지만 정말 사용 안할래야 안할 수가 없는 동감 백배천배만배의 글을 보고야 말았으니-

나를 미치게 하는 PNG - http://html.nhndesign.com/blog/?p=142

어흑 -_ㅠ

ps.
여기에 IE 버그를 더하자면.
AlphaImageLoader를 사용하면 링크가 안먹힌다는거~

Posted by mkyoon

Tag
css, ie, PNG, 뷁
Response
No Trackback , No Comment

IE의 Select 콤보 박스와 CSS 그리고 Encoding


IE에서 지원되는 CSS 목록은 다음에서 확인할 수 있다.

<select>　 http://msdn2.microsoft.com/en-us/library/ms535893.aspx
<option>　 http://msdn2.microsoft.com/en-us/library/ms535877.aspx

그리고 다음 문구도 확인할 수 있다.
- option Object Remarks -
Except for background-color and color, style settings applied through the style object for the option element are ignored. In addition, style settings applied directly to individual options override those applied to the containing SELECT element as a whole.
option 엘리먼트에는 오직 배경색과 글씨색만 바꿀 수 있다는 얘기다.
그래. 원래 IE에는 기대조차 안하고 있었으니 그렇다 치자.

하지만 "신기한" 현상을 목격해버렸..-_-
예제 파일을 만들어 보았으니 같이 함 보십시다.

- 예제 File Link 1 - select_euckr.html (ASCII / EUC-KR)
- 예제 File Link 2 - select_utf8.html (UTF-8)

두개의 문서의 차이는 단 하나. 인코딩-_-

select_euckr.html은 저장할 때 파일형식을 ASCII (notepad에선 ANSI)로 저장했고
select_utf8.html은 저장할 때 파일형식을 UTF-8로 저장했다.
물론 각각 character set(EUC-KR, UTF-8)도 알맞게 넣었다.

그럼 소스코드를 확인해보자.

<!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=euc-kr 또는 utf-8" />
<title>ASCII / EUC-KR 또는 UTF-8</title>
<style type="text/css">
body { font-family: Tahoma; }
select {
　 　 width: 120px;
　 　 height: 200px;
　 　 padding: 5px;
　 　 background: #ff0;
　 　 color: #f00;
　 　 font-family: Dotum;
　 　 font-size: 12px;
　 　 line-height: 2em;
}
option.test {
　 　 height: 20px;
　 　 margin: 5px;
　 　 padding: 10px;
　 　 background: #000 url(http://mkyoon.tomeii.com/mstar.gif) no-repeat 0 0;
　 　 color: #0ff;
　 　 font-family: Gungsuh;
　 　 font-size: 16px;
　 　 line-height: 2em;
}
</style>
</head>
<body>
<h1>EUC-KR 또는 UTF-8</h1>
<select size="5">
　 　 <option>IE 좀맞을래연</option>
　 　 <option class="test">IE 좀맞을래연</option>
　 　 <option>IE 좀맞을래연</option>
　 　 <option class="test">IE 좀맞을래연</option>
　 　 <option>IE 좀맞을래연</option>
　 　 <option>IE 좀맞을래연</option>
　 　 <option>IE 좀맞을래연</option>
　 　 <option>IE 좀맞을래연</option>
　 　 <option>IE 좀맞을래연</option>
　 　 <option class="test">IE 좀맞을래연</option>
　 　 <option>IE 좀맞을래연</option>
　 　 <option class="test">IE 좀맞을래연</option>
　 　 <option>IE 좀맞을래연</option>
　 　 <option>IE 좀맞을래연</option>
　 　 <option>IE 좀맞을래연</option>
　 　 <option>IE 좀맞을래연</option>
　 　 <option>IE 좀맞을래연</option>
</select>
</body>
</html>

두개 링크를 각각 IE(6,7다 똑같음-_-)와 FF에서 열어보면 다음과 같다.

- IE -
IE - ASCII EUC-KRIE - UTF-8
스타일 먹은거라곤
select : background-color, color, font-family, font-size, height, width
object : background-color, color 끝.

- FF -
FF - ASCII EUC-KRFF - UTF-8
select : background, color, font-family, font-size, height, line-height, padding, width
object : background, color, font-family, font-size, height, line-height, margin, padding
스타일 다 먹어주시고~ 훗-_-

여기서 끝이 아니라.
IE 스크린샷을 한번 보자. 뭔가 이상하지 않은가.
문서 인코딩 형식을 바꿨다고 저렇게 줄간격이 바뀌어도 되는건가?
IE에선 object는 height도 line-height도 안먹는단 말이다!

이건 뭥미?

Posted by mkyoon

Tag
css, encoding, ie, object, select, 뭥미, 셀렉트박스, 인코딩
Response
No Trackback , No Comment

IE8 Beta 1 그리고 Developer Toolbar


드디어.
마이크로소프트 인터넷 익스플로러 팀에서
Internet Explorer 8 베타 버전을 배포하였습니다.

후덜덜덜덜덜 거리는 마음으로 설치를 하고 보니
생긴것은 IE7과 많이 다르지 않아 거부감은 덜하네요^^

사용자 삽입 이미지

파이어폭스 3 에서 대폭 바뀐 디자인에 거부감을 일으켰었던 것에 비하면
시작은 괜찮습니다.

그러나.
웹서핑은-

OTL

렌더링이 왜이럽니까- 대다수의 페이지들이 깨져 보입니다 -_ㅠ
결국 Emulate IE7을 눌러놓고 웹서핑을 하고 다니지만
정말이지 앞으로의 갈길이 멀고도 험함을 여실히 느낄 수 있었습니다.
(IE는 제발 그만 날 좀 내버려둬ㅠㅠ)

하지만.
IE Developer Toolbar 요건 물건이네요.
백문이 불여일견.

사용자 삽입 이미지
오우!!! 직접 attribute 수정도 가능하네요!!
(attribute"만" 수정 가능합니다-_-;)
게다가 스타일 상속관계와 무시된 스타일까지 친절하게 보여주네요+_+
체크박스를 해제함으로써 스타일을 무시할 수도 있군요~
(값은 수정이 안됩니다-_-;)
그런데-_-
왜 속성 추가는 없어졌단 말입니까 ㅠㅁㅠ꺼이꺼이 그걸 없애면 어쩌라고오오~


사용자 삽입 이미지

이건 script debug 입니다~
뭔가 Firebug랑 비슷하게 돌아갈 것 같은데, 좀더 봐야겠습니다.


Firebug에서 볼 수 있는 엄청나게 강력한 기능에 비하면 새발의 피지만,
예전에 보여줬던 toolbar(뭐 어쩌라는건지-_-;) 와는 상당히 좋아졌습니다.

IE8 과 함께하는 Debugging은 지금보다 더 쉬워질 것 같아
기분은 일단 좋습니다. (과연?)

자. 빠져듭시다.






Posted by mkyoon

Tag
css, debug, ie, ie8, ms, toolbar
Response
No Trackback , 2 Comments

IE6 과 max-width 그리고 expression


min-height 속성을 IE6 에 주는 방법에서도 언급했듯이
IE6 은 max, min 개념이 없기 때문에 Hack을 써서 넣어주어야 한다. (IE6 *\#&*$@)

어떠한 이미지의 너비를 최대 500px 이상으로 넘어가지 않도록 하기 위해서는
IE6 을 제외한 모든 브라우저에서

#somewhere img {
　　 max-width: 500px;
}

라고 "한줄" 넣으면 끝난다.

그러나 우리의 구닥다리 IE6 은
저 속성을 읽지 못하고 img 너비를 있는 그대로 뿌려준다-_-

IE6 에만 적용해야 할 Hack은 다음과 같다.

#somewhere img {
　　 width: expression( this.clientWidth > 499 ? "500px" : "auto" );
}

expression 으로 IE6 만의 자바스크립트를 작성할 수 있으니 good.
하지만 어쩔 수 없이 꼼수를 써야 한다는 거~ 슬픈 현실ㅠㅠ

Posted by mkyoon

Tag
css, expression, ie, IE6, max-width
Response
No Trackback , No Comment

Filter - AlphaImageLoader 와 PNG 그리고 Link


투명처리된 PNG 파일은 IE 6 에서 회색 바탕으로 나옵니다.
이를 해결하기 위해 PNG를 배경그림으로 넣고
AlphaImageLoader 필터를 씌우는데요.

특수한 경우
필터 먹은 DIV 안에 있는 링크를 아무리 눌러도
클릭이 되지 않는 현상이 생깁니다. (IE-_-신발)

필터먹인 DIV에
position: relative, absolute 설정을 주면
안에 있는 링크는 무용지물이 되고 맙니다.

해결방법

1. 필터 먹인 DIV에는 position 설정이 없거나 position: static;
2. 그 안에 들어있는 링크(a)에 relative 혹은 absolute 를 주세요.

끗.

Posted by mkyoon

Tag
hack, ie, IE6, link, PNG
Response
No Trackback , No Comment
« Previous : 1 : 2 : 3 : Next »