가로스크롤바가 생기는 것에 대한 질문입니다..

국내에 웹 사이트들이 웹 표준을 지키고 OS나 브라우저와 관계 없이 접근성을 향상 시키기 위한 사이트 버그 신고 및 문제 해결을 위한 게시판입니다.
Post Reply
bungul

가로스크롤바가 생기는 것에 대한 질문입니다..

Post by bungul »

http://www.bungul.net/tts/index.php?pl=775

태터툴즈를 사용하는데 스킨을 어느 정도 손을 보고선 이제 더 이상 못고치겠다, 라고 생각하고 창을 닫으려는 순간 무의미한 가로 스크롤바가 떡하니 생겨있는 것이 눈에 들어왔습니다. FF에서는 가로스크롤은 기미도 안보이는데 또 IE에서만 그러는데요.. 이녀석을 없애버리기 위해 이것저것 해 보긴 했는데 아직 어떻게 해야 할지 정하지를 못해서 그동안 시도했던 것들을 여기에다 적어놓고 질문드려봅니다.(여기서부터는 블로그에 적어놨던 글을 그대로 옮겨서 반말이..;;)

1. index.htm(l)에 정의된 frameset 구조 때문?
내 블로그의 경우는 태터툴즈의 index.php가 태터툴즈를 설치한 폴더인 tts에 있기 때문에 루트폴더의 index.htm에서 tts/index.php로 연결을 해주어야 한다. 그래서 다음과 같은 프레임셋으로 연결하고 있었는데, 이것을

<frameset rows="1*" cols="1*" border=0>
<frame src="tts/index.php" name="main" marginwidth="0" marginheight="100" scrolling="auto" />
</frameset>
</html>

이 방식으로 바꿔주니

<meta http-equiv='refresh' content='0; url=http://bungul.net/tts/'>

가로스크롤바가 없어졌다. 그럼 이렇게 하면 해결이 된다는 얘기여야 되는데 조금 꺼려지는 것이 meta를 사용해서 refresh해주는 방식은 이상하게 referer에서 직접 방문자를 체크를 하지 못하는 것 같다는 경험적인 느낌이 들어서인데.. 혹시 누가 시원하게 대답이라도 해주었으면.. ㅠ_ㅠ

2. DTD 때문이다?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

내 블로그야 아직 valid하진 않지만 일단 태터v1.0을 기다리며 IE6.0에서 css2.0이 제대로 돌아가게 하기 위해 선언해두었던 것인데 이 한줄을 지워버리니 가로스크롤바가 없어졌다. 하지만 대신 IE만의 렌더링 방식으로 돌아가서 엉망이 되어버린다.. --

3. IE 버그이므로 IE hack이 필요하다?
희한하게도 body { overflow: hidden; } 은 먹지않는데, html { overflow: hidden; } 으로 해주면 동작해서 가로스크롤바와 세로스크롤바가 모두 없어진다. 즉 html에 overflow를 넣어주는게 hack이다. 그런데 문제는 가로스크롤바만 없애고 싶으면 overflow-x:hidden; 을 사용해야 되는데 이건 css2.0 규격이 아니라서 word-break:break-all; 처럼 지금 사용하기가 참 망설여진다..

어떻게 해결하는게 가장 좋은 방법일까요?
hyeonseok
해커
해커
Posts: 691
Joined: 2004 08 11 22:14 59
Contact:

Re: 가로스크롤바가 생기는 것에 대한 질문입

Post by hyeonseok »

사이트 컬러가 참 이뻐요. ^^
bungul wrote:어떻게 해결하는게 가장 좋은 방법일까요?
첫째, 프레임을 사용하지 않는 것입니다.
접근성 측면에서도 좋지 않고, 화면이 프레임이 아니기 때문에 무의미 합니다.

둘째, IE확장 속성인 overflow-x: hidden을 사용합니다.
물론 valid 한 코드는 아니지만 IE의 특성때문에 발생하는 문제 이므로 IE의 확장 속성을 사용하는 것입니다.

좀더 복잡하게 하면 IE의 conditional comment 와 같이 사용하면 좋습니다.

Code: Select all

<!--[if IE]>
<style type="text/css">
html, 
body {
    overflow-x: hidden;
}
</style>
<![endif]-->
Post Reply

Who is online

Users browsing this forum: No registered users and 4 guests