인터넷 익스플로러의 float-margin 버그

팁 2007. 2. 4. 10:53
Letter To You 1.1 스킨을 만들면서 수신인 부분 (저 위에 보면 그대에게. 라고 써있는 부분 말이죠.) 이 원하는 대로 표시되지 않아서 고심을 한 적이 있습니다.

수신인 부분은 div 태그로 영역을 정하고 float:left; 로 띄운 다음 margin-left: 로 적당한 거리만큼 우측으로 보냈는데 파이어폭스와 오페라에서는 원하는 거리 만큼 적당히 떨어졌는데 유독 인터넷 익스플로러 (이하 IE)에서만 엄청나게 멀리 떨어지는 거예요. ㅠ.ㅠ

블로그 제목은 margin-left 값이 얼마 되지 않아 차이가 나도 그리 크지 않아서 내버려뒀는데, 수신인 부분은 영역을 벗어나서 아예 화면에 나타나지 않기 때문에 어쩔 수 없이 !ie를 이용한 IE hack을 썼습니다.

#header1 .blog-receiver {margin-left:330px;}
#header1 .blog-receiver {margin-left:170px !ie;}

예를 들어 이런 식으로 적어주면 IE를 제외한 다른 브라우저는 위의 정의를 따르고, IE만 아래의 정의를 따릅니다. 즉 !ie 를 적어주면 IE만 알아듣는다는 뜻이죠.

그러다가 IE에 이와 관련된 버그가 있다는 걸 알게 되었습니다. 파이닷넷 (positioniseverything.net)의 글에 의하면 float:left 한 것에 margin-left 값을 주게 되면 IE에서는 margin-left 값의 두 배가 설정된다는 것이죠.

.floatbox {
  float: left;
  width: 150px;
  height: 150px;
  margin: 5px 0 5px 100px;
  /*This last value applies the 100px left margin */
}

위와 같이 설정되었을 때의 경우를 그림으로 나타내면 다음과 같습니다. 그림 출처는 역시 파이닷넷.

일반적인 경우

보통의 브라우저에서 margin-left:100px; 인 경우

IE의

IE는 두 배가 떨어. 오마이갓!


이런 !@##$@$#@!!# 같은 IE 같으니라고. 그것도 모르고 열심히 삽질했던 거죠. ㅠ.ㅠ

여기서 또 한가지 알아둬야 할 사실은 첫번째로 float된 객체만 이처럼 두 배로 떨어지게 되며, 그 이후에 float된 객체들에는 문제가 없다고 합니다.

해결책은? 다행이 있습니다. float으로 띄우는 객체 (대부분은 div겠죠)가 대부분 display:block;으로 정의되어 있을텐데 이를 display:inline; 으로 정의하면 된다고 합니다. 직접 해보니 아주 잘 됩니다. :)

정리하면 다음과 같습니다.

float:left; 로 띄운 객체에 margin-left 값을 주게 되면 IE에서는 그 값의 두 배만큼 떨어진다.
그럴 때는 해당 객체를 display:inline; 으로 정의해주면 해결된다.

IE 7 에서는 이 버그가 고쳐졌을까요? 배포한 Letter To You 1.1 스킨에는 아직 반영하지 않았지만, 제 블로그 위의 수신인 부분 (To. 그대에게.)을 우선 고쳐놨습니다. 어떻게 보이나요? 적당한 위치에 보이나요? (예전엔 안보였거든요.) IE 7으로 접속하시는 분들이 알려주시면 고맙겠습니다. ^^
,

티스토리용 스킨에서 키로그 치환자 문제

팁 2007. 2. 3. 18:53
Letter To You 1.1 스킨을 배포하고, 문제가 없는지 다시 테스트를 해보는데 티스토리에서 키로그 표시가 잘 안되더라고요. 이 주소 말이죠. http://bones.tistory.com/keylog

티스토리와 태터툴즈의 치환자를 적는 방법이 다른 것도 알고 있어서 그것도 처리했고, 배포하기 전에도 테스트를 여러 번이나 했는데 왠 날벼락.

알고 보니 제가 배포하기 직전에 skin.html의 키로그 표시 부분에 태터툴즈용 표시를 그냥 주석으로 남겨뒀는데 그것 때문에 문제가 되었습니다. 제 딴에는 친절하게 차이를 보여주겠다고 생각하고 남겨둔 건데, 오히려 그것 때문에 작동이 안되었군요.

keylog 부분 소스 캡쳐 화면

keylog 부분에 이런 식으로 주석을 남겼거든요.


생각해 본 즉 skin.html에서 html 태그들은 주석처리가 되는 반면 치환자들은 주석의 영향을 받지 않나봐요. 위에서 태터툴즈용으로 한번 뺑뺑이를 돌고 나오니 그 아래에서는 처리가 안되었나 봅니다(하고 추측할 따름이예요). 태터툴즈용으로 해놨던 주석을 지우니 잘 작동됩니다.

혹시 스킨을 만드시는 분들 중에서 치환자가 제대로 작동하지 않으면 저런 식의 코딩이 있었는지 한번 생각해보세요. ^^

어쨌든 지금은 수정이 된 상태이니 Letter To You 1.1 스킨을 이전에 받으신 분들 중 티스토리에 설치하신 분들은 다시 다운 받아주세요. 죄송합니다. :|




,

태터툴즈의 두 치환자와 웹표준 테스트 통과 이야기

기타 2007. 2. 3. 15:21
저는 태터툴즈의 기본형 스킨을 기반으로 스킨을 만들고 있습니다. 당연하지요. 제작자들이 프로그램의 기능을 그야말로 특별한 에러없이 기본적으로 표현해낸 것이 기본형 스킨일테니까 말이죠.

따라서, 왠만한 경우면 skin.html 이나 style.css 에 들어있는 기본적인 뼈대는 손대지 않고 있습니다. 예를 들면 a 태그에 쓰이는 여러 id 라든지, 여러군데에서 사용되는 치환자 같은 것들 말이죠. 개발을 위해 혹은 디버깅을 위해 조금 남겨놓았나 하는 생각이 드는 것들도 있어요. 왜냐면 스킨 내에서 특별한 기능을 하지 않기 때문이지요.

이번에 Letter To You 1.1 을 만들면서 트랙백과 태그의 개수를 표시하고 레이어를 열고 닫는 부분에 쓰인 치환자 두 개를 삭제했습니다. 실제로 코드에서는 이렇게 표현됩니다.

<a id="[ ##_article_rep_tb_cnt_id_## ]" href="#tb" onclick="[ ##_article_rep_tb_link_## ]" onfocus="this.blur();"><s_tb_count> 트랙백 <span class="cnt">[ ##_article_rep_tb_cnt_## ]</span>개</s_tb_count></a>,
<a id="[ ##_article_rep_rp_cnt_id_## ]" href="#rp" onclick="[ ##_article_rep_rp_link_## ]" onfocus="this.blur();"><s_rp_count> 댓글 <span class="cnt">[ ##_article_rep_rp_cnt_## ]</span>개가 달렸습니다.</s_rp_count></a>

제가 삭제한 건 저 위에 핑크색으로 표시된 두 부분입니다. 지워도 특별한 문제점이 없었어요. 엄밀히 말하자면 저 치환자들을 필요로 하는 기능이 제 스킨에는 없다는 것이겠지요.

저 치환자들은 퍼머링크의 트랙백과 댓글을 표시해주는 기능을 하는 듯 합니다. 예를 들면 http://bones.tistory.com/3 이라는 주소 안에서 저 치환자들은 각각 trackbackCount3, commentCount3 으로 표현됩니다.

저 치환자를 이용한 기능으로 어떤 게 있을까요? 특정한 포스트에만 트랙백과 댓글을 나타내는 링크를 표현하지 않는다거나 여느 포스트와는 별다른 형태로 a 태그를 사용할 수 있겠지요. css를 이용하면 더욱 편리하겠지요.

어쨌든 일반적인 기능에는 필요치 않는 것을 테스트하고 제 스킨에는 별다른 영향이 없다는 것을 확인 한 후 삭제를 완료했습니다. 제가 왜 그랬냐고요?

바로 w3c의 웹표준 테스트 (validation test)를 통과하기 위해서입니다. Letter To You 1.1은 사실 레이아웃의 형태상 모두 div 를 사용하지 못했습니다. 전체적인 틀거리는 table 태그를 사용했지요. 그래서, 혹시나 하는 마음에 w3c의 validator를 통과시켜 보면서 몇 가지 오류들을 잡다보니 저 두 치환자만 남더군요. 삭제해도 문제가 없는 것 같아 삭제했고요. (그런데, 왜 오류가 나는지는 모르겠어요.)

그래서, 결국 Letter To You 1.1 은 공식적으로 w3c의 웹표준 테스트 (Validation test)를 통과했습니다. (자축의 박수~ 짝짝짝[각주:1])

w3c의 validator를 통과

간단한 페이지들은 w3c의 validator를 통과했습니다. :)


  1. 하지만 모든 페이지가 다 통과하는 것은 아닙니다. 본문에 링크도 걸고 이미지도 올리고 이것저것 편집을 하다보면 본문에 들어있는 태그들 때문에 통과하지는 못하더군요. 하지만, 그건 지금 제가 할 수 있는 부분이 아니잖아요. 물론 스킨 상에서 제가 할 수 있는 부분이 더 있는지는 확인 해 볼 생각입니다. :) [본문으로]
,

스킨을 배포합니다. Letter To You 1.1

스킨/배포 2007. 2. 2. 22:53
스킨을 배포합니다.

Letter To You 1.1

Letter To You 1.1 스킨입니다.


스킨명

Letter To You 1.1


개요

예, 편지입니다. 제가 예전에 좀 멀리서(^^) 블로깅을 한 적이 있었는데, 블로그에 접속해서 글을 적고 답글을 달고 하다보니 마치 편지를 적는 듯한 느낌이 들더군요. 안부를 묻고 전하고 그런 느낌 말이죠. 그 때 생각했던 컨셉을 완성했습니다. 편지봉투와 편지지 그리고 연필로 분위기를 잡아주고 있습니다.


내용

- 2단형 스킨입니다. 태터툴즈의 사이드바 기능을 지원합니다.
  (관리자 모드에서 바로 넣었다 뺐다 할 수 있어요.)

- 블로그 로고 이미지를 보여줍니다.
  단, 너무 큰 이미지는 넣지 말아주세요.
  자동으로 리사이즈하는 태그를 넣지 않았습니다.

- 컨텐츠가 들어가는 부분의 가로폭은 500px 에 맞춰져 있습니다.
  물론 제가 만든 여느 스킨들처럼 가로폭을 수정하는 게 그리 어렵지는 않으나
  위의 편지봉투와 메뉴들 간의 레이아웃을 고려하면서 수정하는 게 쉽지는 않을 듯 합니다.

- 하지만 당근 직접 수정을 하실 수도 있지요.
  역시 style.css 와 index.xml 만 수정하면 됩니다.
  대부분의 경우 style.css의 주석에 적어둔
  contentWidth과 관련된 수식에 맞춰서 수정하면 큰 문제는 없을 것입니다.

- 또한 폰트 크기라든지 색깔, 사용된 이미지 등은 style.css 파일을 수정하는 것만으로 가능합니다.

- 자유롭게 수정이 가능하며, 저작권 표시하에 재배포 가능합니다.

- 테스트 환경은 윈도우XP + 파이어폭스 2.0.0.1, 인터넷 익스플로러 6.0, 오페라 9.10 입니다.
  태터툴즈 1.1과 티스토리 1.1에서 잘 작동합니다.

- 자유롭게 수정이 가능하며, 저작권 표시하에 재배포 가능합니다.



그리고 몇 가지 설명할 게 있습니다.

0. 스킨을 다운 받아 압축을 풀면 2개의 폴더가 있습니다.
    예, 하나는 설치형 태터툴즈용이고 다른 하나는 티스토리용이죠.
    폴더명 끝에 표시가 되어 있으니 선택해서 사용하시면 됩니다.

1. 관리자 로그인을 하려면 우측 상단의 연필심 부분을 클릭해주세요.
   따로 버튼이 보이지는 않습니다.

사용자 삽입 이미지

2. 좌측 상단에 From 부분의 이름은 블로그의 주인장 이름입니다.
    이름에는 rss 링크가 걸려있어요.
    (물론 사이드바 하단에 rss 버튼이 따로 존재합니다.)
    skin.html 을 열어서 조사 (~가, ~이)를 수정할 수 있습니다.
    <div id="blog-author"><a href="[ ##_rss_url_## ]" onclick="window.open(this.href); return false;" onfocus="this.blur();">[ ##_blogger_## ]</a>가.</div>
    18번째 줄이죠.

사용자 삽입 이미지

3. 물론 편지봉투 좌측 하단에 나타나는 어두운 갈색 바탕의 글자는 블로그 제목입니다.

4. To 즉, 받는 사람의 경우에는 skin.html 을 열어서 직접 수정할 수 있습니다.
   <div class="blog-receiver">그대에게.</div>
   22번째 줄이죠.

사용자 삽입 이미지

5. From 과 To 의 이름을 css의 float으로 맞춰놨는데, 이상하게도
    파이어폭스와 인터넷 익스플로러, 오페라에서 모두 제각각 나타나더군요.
    브라우저마다 조금씩 위치가 다릅니다. 이점 이해해주시고,
    혹시 완전히 이상하게 나오는 (혹은 아예 안나오는) 브라우저가 있으면 알려주세요.



다운로드 받으러 가기

▶ (클릭) 태터툴즈 스킨 자료실 [TT 1.1 & 티스토리 1.1] Letter To You 1.1



그리고

익스플로러 7에서 제목 부분에 문제가 있다고 하는군요. ㅜ.ㅜ 이 스킨으로 보자면 [To. 그대에게] 부분과 [Skins And Bones] 부분이 겹친다고 합니다. 브라우저마다 표시가 다 다르게 되니 참 어렵군요. 이 부분은 아무래도 다른 방안을 생각해 봐야겠어요. (예를 들자면 psd 파일을 제공해서 각자 직접 이름을 적게 한다든지 하는 방안 말이죠.) 하지만, 그 밖의 브라우저에서는 별 다른 이상 없을 거예요. ==> 인터넷 익스플로러의 float-margin 버그 를 알아서 일단 제 블로그에만 조처를 해두었습니다. 만약 이게 여러 브라우저에서 잘 보이면 이 방법으로 패치를 할 생각입니다.

또한 코멘트 폼에서 탭키를 누르면 순차적으로 이동해서 '댓글달기'버튼으로 가게 되어있는데, 익스플로러 7에서는 역시 사파리에서 잘 안된다고 합니다. 으윽; (그래도 이건 치명적인 건 아니니까;;; )



그리고

2007년 2월 3일 6시 30분 이전에 받으신 분들 중 키로그 출력이 잘 안되시는 분들은 다시 받아서 skin.html을 재설치 해주세요. (특히 티스토리를 쓰시는 분들) 키로그 쪽에 주석을 달아뒀는데, 그게 출력에 영향을 끼친다는 걸 발견했습니다. 설치용 태터툴즈용 주석을 지우니 잘 작동되는군요. 죄송합니다. :|



그리고

설치형 사용자들 중에서 빨간테두리가 나오시는 분들은 style.css에 가서 136번째 줄의 border:1px solid #f33; 으로 되어 있는 걸 지워주세요. 디버깅용으로 남겨두었던 것인데 제가 위의 주석 지우다가 다시 활성화시켰더군요. 죄송합니다. 물론 지금 다운로드 버전은 괜찮습니다. 스킨 배포 하면서 실수가 정말 많군요.
,

스킨 업그레이드 Drips And Dips 1.1b

스킨/업그레이드 2007. 2. 2. 12:09
Dris & Dips 1.1 스킨이 1.1b로 업그레이드 되었습니다.
우선 이 스킨에 대한 설명은 아래 링크에서 확인 할 수 있습니다.


업그레이드 된 것은 두 가지입니다.

Drips And Dips 1.1b

Drips And Dips 1.1b는 미디어로그와 키로그를 지원합니다.


1. 키로그 (키워드)를 지원한다.
2. (티스토리에서) 미디어로그를 지원한다.

invalid-file

Drips And Dips 1.1b 다운받기


기존의 스킨에서 크게 달라진 것은 위의 두 가지 뿐입니다. 하지만, 설치형 태터툴즈와 티스토리가 다른 부분이 있기 때문에 다운 받은 후 해줘야 할 게 있습니다.

다운 받은 압축 파일을 푼 후,
설치형 태터툴즈 사용자는 skin.tattertools.html 을 skin.html 로 변경해서,
티스토리 사용자는 skin.tistory.html 을 skin.html 로 변경해서 사용하시면 됩니다.

이상입니다. 위나 아래로 가는 버튼도 하나 두려고 했으나 마땅한 곳을 찾지 못했습니다. -_-; 좋은 곳을 알려주시면 후에 다시 정비하게 될 때 염두하겠습니다;;;



[덧붙임]

혹시 예전 버전을 쓰시고 계신 분들 중에서 단순히 추가만 하려고 하는 분들을 위해 간단하게 설명을 추가하자면,

1. 새로 추가된 이미지 파일은 총 네 개입니다.
  sidebar-menu-04-off.gif
  sidebar-menu-04-on.gif
  sidebar-menu-05-off.gif
  sidebar-menu-05-on.gif

2. skin.tistory.html 에서 media와 keylog 메뉴와 이를 표시하기 위한 치환자들에 대한 내용이 추가되었습니다.

3. style.css에서 media와 keylog를 표시하기 위한 속성이 추가되었습니다.

,
글 목록 번호 : 1 ··· 4 5 6 7 8 9 10
◀ 다음 글 목록 이전 글 목록 ▶

티스토리툴바