CSS 박스모델 그 오묘한 padding에 대

[leejin0]

viewtopic.php?t=2034 의 게시물은 꼼꼼하게 읽어

봤습니만 도통 감이 오질 않는군요. 다름이 아니라

http://optic.egloos.com 이라는 제 허접한 블로그 때문인데요.

자주 블로그 게시물이 우측 padding 값을 너무 먹습니다. 도무지 고칠 방법이 없네요.

몇 일씩 이것 저것 손 대봤는데도 고쳐지나 싶어서 refresh 해보면 문제는 여전하고요.

IE에서는 padding이 정상인 것처럼 뿌리는 것으로 보아 width와 margin, padding,

border 의 미묘한 박스모델 문제 때문인 것이 확실하다는 판단이 서기는 했는데

도대체 어떤 부분이 문제인지 알 수가 없네요.

전체(body) 720 px, 왼쪽 포스트 영역(div.post_area)은 522px, 포스트의 실제

글 영역(div.post_body)은 500px, 글 영역의 margin이나 padding 값들은 소스에서

div.post_body에 선언한 것처럼 보시는 바와 같고 클래스가 right_menu 영역은

소스에서 삭제하시고 보셔도 됩니다.

table 구조가 아니라 할 수 있는 한 DIV로 레이아웃 한거라서 보시기 난해할지도

모르겠습니다. 부탁하는 주제에 이런 거까지 너그럽게 봐달라고 말씀 드리는 점

너그러이 용서해주시기 바랍니다. 제 블로그에 한 줄기 희망의 빛을 내려 주실 분 안

계신가요?

p.s. 소스보기를 하니 비공개 글 제목이 다 보이는 근영.

[hyeonseok]

CSS 레이아웃을 사용하시려면 문법에 맞는 HTML 사용이 우선시 되어야 하는데 문서에 !DOCTYPE 선언이 없네요. !DOCTYPE 선언이 없으면 브라우져가 웹표준으로 랜더링을 하지 않기 때문에 스펙에 정의된 것과 화면이 다를 수 있습니다. 그리고 표준모드의 랜더링과 호환모드의 랜더링에 가장 큰 차이를 보이는 것은 padding 이고요.

블로그 자체의 우측여백이 많은 것이 문제라면 body 의 width 가 720px 로 고정되어 있기 때문에 현재와 같이 나오는 것입니다. !DOCTYPE 선언을 하여 IE 가 표준모드로 랜더링 될 수 있게 하면 IE 도 같은 화면을 보여줄 것 입니다.

Firefox 와 IE 의 모습이 같게 나오시게 하시려면 body 의 width 를 없애 주시면 됩니다. 하지만 이게 의도하신 화면은 아닌 것 같은데...-_-a

화면에 꽉차는 블로그 화면을 의도 하신 것이라면 body를 비롯한 하위 div 들의 width 를 없애셔야 합니다.

정확히 어떤 화면을 원하시는 것인지 잘 모르겠습니다. 원하시는 화면을 대강 그려서라도 올려주시면 더 정확히 고민해 보고 말씀 드릴 수 있을 것 같네요.. ^^

[leejin0]

현재 상황으로서는 제가 직접 !DOCTYPE을 선언할 수 없다는 것이 가장 큰 문제고요.

지금과 같이 보여지길 원하는 것인데 body에 width를 주지 않으면 우측 메뉴와 포스트

사이가 너무 벌어져서 진짜 엄한 디자인이 나오는 터라...

지금 FF로 http://optic.egloos.com 을 접속하면 post 영역 그러니까 제 글이 나타나는

영역의 우측 padding이 double-take 되는 느낌이라서요. 이것도 첫 접속에는 대체로

정상적으로 나오는데 refresh하게 되면 글의 왼쪽과 오른쪽이 그만....

설명 길게 할 것 없이 그림으로 보여드리겠습니다..... 만... 이미지를 어찌 올려야할지.. -.-;;;;

http://pds.egloos.com/pds/1/200504/11/8 ... 444243.png

어떻게든 한 번 올려봤습니다. BBCode로 묶고 싶었으나.. 화면을 삐져나가는

이미지 크기의 압박이네요.

[박민권]

문서타입을 선언하지 못한다면 익스는 익스전용 내맘대로 호완모드로 동작하기 때문에
불여우와 맞추려면 ㅡ0ㅡ;

문서타입을 선언하지 않더라도 그냥 테이블로 하신다면 그리 문제는 없는데
css 레이아웃으로 하신다면 정말 힘들죠. 익스가 표준 완전 무시하고 돌아가니까요.

[hyeonseok]

overflow: hidden 관련된 버그 같습니다.

div.post_body 에 overflow 를 빼시면 됩니다.

아마 이미지 같은거 깨지지 말라고 넣어놓으신 것 같은데...
img {
max-width: 500px;
}
나 CSS2 에는 없지만
* html div.post_body {
word-break: break-all;
}
정도면 될 것 같습니다.

아니면 post_body 상위에 div 를 하나 더 만드시고 post_body 는 margin: 10px 와 같이 하셔도 되고요.

결론은...랜더링 버그 입니다.

[leejin0]

문서타입을 선언하지 못한다면 익스는 익스전용 내맘대로 호완모드로 동작하기 때문에
불여우와 맞추려면 ㅡ0ㅡ;

문서타입을 선언하지 않더라도 그냥 테이블로 하신다면 그리 문제는 없는데
css 레이아웃으로 하신다면 정말 힘들죠. 익스가 표준 완전 무시하고 돌아가니까요.

익스가 아니라 FF가 문제를 일으키고 있습니다만.. FF도 이상 동작를 보인다는 것에

새삼 놀랐습니다. 테이블을 사용하지 않은 이유는 테이블은 디자인 요소가 아니고

데이터 표현 요소이기 때문에 table을 다 빼버리고 div로 넣은 것입니다. 보시면

table의 잔재가 CSS라던가 DIV 구조에서 느껴지실지도요.

overflow: hidden 관련된 버그 같습니다.

div.post_body 에 overflow 를 빼시면 됩니다.

아마 이미지 같은거 깨지지 말라고 넣어놓으신 것 같은데...
img {
max-width: 500px;
}
나 CSS2 에는 없지만
* html div.post_body {
word-break: break-all;
}
정도면 될 것 같습니다.

아니면 post_body 상위에 div 를 하나 더 만드시고 post_body 는 margin: 10px 와 같이 하셔도 되고요.

결론은...랜더링 버그 입니다. Smile

하하 저는 그것도 모르고... 몇 일을 고생했단 말인가... OTL

현석님 말씀대로 overflow: hidden 을 없애니까 그냥 고쳐지는군요.. 커헐..

현석님 덕분에 쉽게 해결했습니다. 감사합니다.

근데 요 렌더링 버그는 bugzilla에 올라와 있겠죠?

[박민권]

문서타입을 선언하지 못한다면 익스는 익스전용 내맘대로 호완모드로 동작하기 때문에
불여우와 맞추려면 ㅡ0ㅡ;

문서타입을 선언하지 않더라도 그냥 테이블로 하신다면 그리 문제는 없는데
css 레이아웃으로 하신다면 정말 힘들죠. 익스가 표준 완전 무시하고 돌아가니까요.

익스가 아니라 FF가 문제를 일으키고 있습니다만.. FF도 이상 동작를 보인다는 것에

새삼 놀랐습니다. 테이블을 사용하지 않은 이유는 테이블은 디자인 요소가 아니고

데이터 표현 요소이기 때문에 table을 다 빼버리고 div로 넣은 것입니다. 보시면

table의 잔재가 CSS라던가 DIV 구조에서 느껴지실지도요.

올리신 이미지를 못봤습니다. 자세히 글을 못보고 단순히 크기와 패딩값에 따른
익스와 불여우의 크기차이에 의한 문제라고 생각했습니다.
음.. 저런 버그도 있군요.
첫로드와 새로고쳤을때의 모습이 틀리니 버그라고 할 수 있겠네요.
그래도 충분히 피해갈 수 있는 문제 같기에 큰 문제는 아니겠네요.

테이블로 레이아웃 짜는 것이 잘못된것은 야생동물님 말씀이 맞습니다.
단지 문서타입 없이 하려면 사용가능한 스타일의 제약이 심하기에 말씀드렸습니다.
그래도 꿋꿋히 만드셨으니 정말 수고하셨습니다.
표준과 어긋나는 부분은 *html을 통해 익스만 따로 스타일을 잡아주는 방식으로
처리한다면 상당수 호완될 수 있을것 같습니다.

[hyeonseok]

근데 요 렌더링 버그는 bugzilla에 올라와 있겠죠?

bugzilla 에 바로 이 상황이 나와있지는 않은데 비슷한 버그를 보고 말씀 드린 것입니다. ^^