파이어버드에서 일부 gif 화일이 보이지 않습니다.

[설호규]

제목 그대로 일부 gif화일이 보이지 않습니다.

재미 있는 것은 익스플로6와 네스케이스7로는 모든 이미지가 다 보입니다.
하지만 파이어버드에서는 일부 페이지의 gif가 보이지 않습니다.
해당 공백에 마우스를 올려 놓고 이미지 보기를 하면 또 잘 보입니다.

원래 이미지가 800*120인데 파이어버드에서 gif이미지가 나오질 않을때는
800*800 크기로 해서 그냥 공백으로만 나옵니다.

처음에는 html태그를 잘 못 사용해서 테이블이 뒤로 밀렸다고 생각했는데
알고 봤더니 배너 이미지가 출력되지 않아서 그렇더군요.



이미지는 포토삽으로 제작한 것입니다.
정말 이미지 자체에 문제가 있는 것인지
다른 HTML 태그에 영향을 받아 그런 것인지 모르겠습니다.

비슷한 사례를 가지고 있는 분들의 조언을 기다립니다.

아래에 문제의 페이지를 올렸습니다.

[kheled]

전 배너 이미지 (다음 쇼핑)가 잘 보이네요. 혹시 AdBlock같은 광고 제거 확장을 쓰고 계신 것은 아닌가요?

[설호규]

예! 저도 파이어버드로 다른 사이트 들어가면 잘 나옵니다. 제 사이트도 잘 나오구요.
문제는 제 사이트의 특정한 몇 페이지에서 나오지 않는다는 것입니다.

기막힌 것은
문제의 이미지에 자바스크립트 같은 효과 같은 전혀 없습니다.
그냥 단순하게 출력하는 것입니다.
gif 이미지는 그냥 img 태고속에 있습니다. img 태스는 table태그속에 있구요.

[Channy]

그 특정한 몇 페이지 좀 알려 주세요..

[설호규]

1. 배너가 안 나오는 페이지.
<a href=http://www.bbpet.co.kr/NextN/NextN_PetD ... ood_code=0
target=_blank>http://www.bbpet.co.kr/NextN/NextN_PetD ... ood_code=0
</a>
<a href=http://www.bbpet.co.kr/NextN/NextN_PetD ... ood_code=0
target=_blank>http://www.bbpet.co.kr/NextN/NextN_PetD ... ood_code=0
</a>


2. 배너는 나오지만 상품 사진이 안 나오는 페이지.
<a href=http://www.bbpet.co.kr/NextN/NextN_PetS ... ice_code=2
target=_blank>http://www.bbpet.co.kr/NextN/NextN_PetS ... ice_code=2
</a>
<a href=http://www.bbpet.co.kr/NextN/NextN_PetS ... ice_code=3
target=_blank>http://www.bbpet.co.kr/NextN/NextN_PetS ... ice_code=3
</a>



* 문제가 해결되는 즉시 해답만 올리고 제 사이트 관련 링크는 삭제하겠습니다.

* 모질라 호환페이지를 만들기 위해 참 나름대로 자바스크립도 조심해서 쓰고
레이어도 문제 없이 동작하게 만들었는데...
예상하지도 않게도 단순한 이미지들이 나오지 않아
'내 사이트는 모질라에서도 문제 없다'라고 큰 소리 못 치고 있습니다...

[설호규]

현재 생각되는 문제 원인들

1. 이미지 자체의 문제
- 이미지 자체가 가지고 있는 정보의 오류의 가능성.

2. 파이어버드 엔진의 문제
- 네스케이프 7.1에서는 잘 보이는데 파이어버드 0.7에서는 안 나타남.

3. 작성자의 HTML, 레이어, 자바스크립트 실수
- 어떤 페이지에서는 나타나고 어떤 페이지에서는 동작하지 않는 것을 봐서 이 부분의 가능성ㄷ 있음.

[photon]

저는 아무리 둘러 보아도 모두 다 잘 보이는데요. fb 0.7과 fb 2004-01-31 cvs snapshot으로 보았습니다. 혹시 스크린 샷을 찍어 올려 주시겠습니까? 이곳에는 올릴 수 없으니 운영하시는 웹 사이트에 올리시고 주소를 적어 주세요. 그리고, 정확한 버전 번호(Help | About에 나오는)도 가르쳐 주시렵니까?

참, 두어 가지 고쳤으면 하는 점이 있어서 말씀 드립니다.

font-family 지정을 하실 때에 '돋음'과 같은 글꼴은 항상 '돋음, Dotum'과 같은 식으로 쓰십시오. 굴림(체), 바탕(체) 등도 모두 마찬가지입니다. 또, 윈도우 이외의 플랫폼 사용자를 위해 '돋음/굴림'에 해당하는 리눅스와 Mac용 글꼴 이름도 같이 적어 주시는 것이 좋습니다. 또, 맨 마지막에는 CSS에서 정한 5가지 일반 글꼴 이름 가운데 하나를 적어 주셔야 합니다. 즉, A와 같이 하지 마시고, B처럼 하십시오.

A. font-family: 굴림, 돋음, Arial
font-family: 바탕, Veranada

B. font-family: 굴림, Gulim, 돋음, Dotum, Baekmuk Gulim, UnDotum, AppleGothic, Arial, sans-serif
font-family: 바탕, Batang, Baekmuk Batang, UnBatang, AppleMyongjo, Veranada, serif

또, 브라우저 이름을 가지고 그 기능을 파악하는 것은 그리 좋은 생각이 아닙니다. getElementById만 가지고 W3C DOM 지원 여부를 가려서 MS IE 5 이후, gecko-based browser (mozilla, firebird 등), opera, safari 등을 한쪽에 놓고, document.all로 MS IE 4를 document.layer로 netscape 4.x를 가리면 되지 않을까요? 물론, 필요에 따라 구분은 더 세세하게 할 수도 있고, 더 간단하게 할 수도 있겠지요.

[설호규]

1. 사용하고 있는 파이어버드 버전

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.5) Gecko/20031007 Firebird/0.7



2. 파이어버드로 이미지가 보이지 않는 경우에 이미지 캡쳐.

<a href=http://www.bbpet.co.kr/NextN/NextN_PHOT ... =12&start=
target=_blank>http://www.bbpet.co.kr/NextN/NextN_PHOT ... =12&start=
</a>





* 지적해 주신 내용 감사합니다.
아주 오래전에 배운 HTML 지식을 바탕으로 사이트 만들다 보니까
제가 정말 HTML을 잘 모르고 있다는 것이 새삼 부끄럽네요.
지난 1년 6개월간 백수로 지내며 혼자 만들어온 사이트 오픈하고 공부해야 겠습니다.

* 곧 파이어버드 0.8이 나온다니... 그 친구는 어떻게 보일까 고민 & 기대 됩니다.

[photon]

귀신이 곡할 노릇이군요. 저는 아무리 해도 설호규님이 겪고 계신 버그를 재현할 수 없습니다. (Windows 2003 terminal server와 Linux에서) 저는 모두 다 잘 보이거든요. 짚히는 구석도 없고요.

참, 한국의 다른 웹 개발자들이 설호규님처럼 신경을 쓴다면 얼마나 좋겠습니까? 여기에 있는 'cross browser' guide와 거기서 언급한 여러 문헌, 여기 있는 FAQ 등을 참고해 보십시오. (예를 들어, <a href=http://www.cross-browser.com target=_blank>http://www.cross-browser.com</a> ) 또, WAI 관련 문헌도 보시고요. ( <a href=http://www.w3c.org/WAI target=_blank>http://www.w3c.org/WAI</a> <a href=http://www.gregshin.pe.kr/wcag target=_blank>http://www.gregshin.pe.kr/wcag</a> )

[설호규]

약 일주일 전에는
메뉴에 마우스 올라가면 안내하는 소리를 들려줄려고
표준이 아닌 줄 알면서 bgsound 태그에 '#'을 사용했는데
익스플로가 일부 웹페이지를 1~3번 읽어 들이는 심각한 버그
(쇼핑몰에서는 치명적인 버그)가 있어 참 고생했습니다.
이번 문제는 그것에 비하면 비교적 편하게 접근했습니다.
눈에 보이는 선명한 문제는 쉽게 해결할 수 있을 것이니까요.

일단 photon 님의 환경에서 문제 없이 보인다니 다행입니다.
새로운 파이어버드를 다른 PC에 설치해서 다시 봐야겠습니다.
이번 문제는 곧 자연히 해결되지 않을까라는 기대적인 전망을 가집니다.


그리고,
좋은 URL정보 감사합니다.
HTML의 근본을 아는 개발자가 되는데 큰 도움이 될 것입니다.