1 loxop이 작성한 주제

  • loxop
  • 식물애호가♡
  • 오프라인
  • 가입일자 2008-06-23
  • 글: 21

주제: IE/파폭 레이아웃이 다른 문제

(질문과 관련된 페이지는 http://loxop.cafe24.com/tc/ 요기 입니다)



IE을 기준으로 스킨 작업했더니,

파폭에서 볼 때 깨져서 나옵니다.

관련 내용을 검색해보니 "크로스 브라우징을 고려하지 않아서"라고 하시던데,



1. '크로스 브라우징'이라는게 파폭일때 마진,패딩값과 IE일때의 마진,패딩값을 따로 저장해뒀다가 웹에서 로드될때 브라우저 인식해서 각각에 맞게 보여주는것을 말하는건가요?

2. 만약 그렇다면, http://loxop.cafe24.com/tc/ 요기 레이아웃 깨지는것 역시 그 문제일까요?

3.그런데, 마진과 패딩 달라지는것은 둘째치고, 왼쪽오른쪽 사이드바를 나누어서 만들었는데 왜 사이드바엘리먼트가 왼쪽에 몰려서 나오죠??

4. 블로그 모양이 가운데로 오게 하기 위해서 스타일시트에서
#container {
        width:100%;
        text-align:center;
        background-color:#ffffff;
}

요렇게 해줬는데, IE에서는 가운데로 오지만 파폭에서는 왼쪽으로 몰려 나오네요.
파폭에서도 가운데로 옮기려면 어떻게 해야할까요??



끝까지 읽어주셔서 감사합니다, 질문이 많아서 좀 죄송하네요ㅠ

바쁘시겠지만 도움 좀 주시면 감사하겠습니다-.!

따오기 글 1

2 멀더끙이 작성한 답글

  • 지역 서울
  • 가입일자 2008-03-05
  • 글: 340

답글: IE/파폭 레이아웃이 다른 문제

loxop 작성:

(질문과 관련된 페이지는 http://loxop.cafe24.com/tc/ 요기 입니다)



IE을 기준으로 스킨 작업했더니,

파폭에서 볼 때 깨져서 나옵니다.

관련 내용을 검색해보니 "크로스 브라우징을 고려하지 않아서"라고 하시던데,



1. '크로스 브라우징'이라는게 파폭일때 마진,패딩값과 IE일때의 마진,패딩값을 따로 저장해뒀다가 웹에서 로드될때 브라우저 인식해서 각각에 맞게 보여주는것을 말하는건가요?

2. 만약 그렇다면, http://loxop.cafe24.com/tc/ 요기 레이아웃 깨지는것 역시 그 문제일까요?

3.그런데, 마진과 패딩 달라지는것은 둘째치고, 왼쪽오른쪽 사이드바를 나누어서 만들었는데 왜 사이드바엘리먼트가 왼쪽에 몰려서 나오죠??

4. 블로그 모양이 가운데로 오게 하기 위해서 스타일시트에서
#container {
        width:100%;
        text-align:center;
        background-color:#ffffff;
}

요렇게 해줬는데, IE에서는 가운데로 오지만 파폭에서는 왼쪽으로 몰려 나오네요.
파폭에서도 가운데로 옮기려면 어떻게 해야할까요??



끝까지 읽어주셔서 감사합니다, 질문이 많아서 좀 죄송하네요ㅠ

바쁘시겠지만 도움 좀 주시면 감사하겠습니다-.!

1. 크로스 브라우징이란 IE, FF, Safari, Opera 등 어느 브라우저를 사용 하든지 동일한 "정보"를 보여줄 수 있도록 하는 것을 말합니다.
IE로 보든, FF로 보든 1px의 차이도 없어야 한다는게 아니구요...
크로스 브라우징은 "웹표준화"와 면밀한 관계를 가지는데, 웹 접근성의 문제이지, px값등 세밀한 Visual의 문제는 아닙니다.
완전히 "똑같은" 페이지를 보여주고 싶다면 각각 브라우저의 특성을 고려하여 각각 브라우저에 맞는 CSS를 적용시켜야 하겠지만, "크로스 브라우징"과 "똑같은 모양"은 동일한 것이 아닙니다.


2,3. 레이아웃이 깨지는 이유는 header의 width는 900px 인데 그 패딩값 + 사이드바의 width 값 + contents의 width 값 + contents의 margin 값 을 계산해보면 이미 900px을 넘어섭니다. ( 10 + 20 + 150 + 150 +560 + 10 + 10 = 910px)
IE에서는 padding값을 width 안에 넣어서 계산하지만, FF에서는 width와 padding을 따로 계산하기 때문에 깨지는 현상이 발생하게 됩니다. 그러니 container안에는 900px로 잡는데 그걸 넘어서니 아래로 밀려 내려가서 표현될 수 밖에요...


3. 자세한 건 소스를 뜯어봐야 알겠지만, <s_t3> 태그 상위에 text-align : center CSS가 적용되는 DIV 박스를 넣어주시면 됩니다. 페이지에 보이는 소스로 봐서는 아마 <s_t3>태그 아래에 container 박스가 속해 있을 겁니다.

난 남자냐?

멀더끙의 웹사이트

따오기 글 2