IE와 FF에서의 div 레이아웃 차이
솔길
웹표준으로 페이지를 만들때 익스플로어와 파이어폭스에서 비교하며 최대한 비슷하게 나오게(똑같진 않더라구요 ㅜㅜ) 하려고 애쓰는데요, 한참 페이지를 쳐내고 있는데 기본적인걸 맞추지 않아서..이 부분을 다시 잡으려다 도저히안잡히는데 이유를 몰라서도움을 요청합니다.
기본div는 글로벌 네비게이션/컨테이너/풋터 세개로 나누고 컨테이너안에 다시 컨텐츠(float:left;)/스카이 스크랩퍼(float:right;)로 나눴구요. 아래 이미지에서 빨간 보더박스가 컨테이너고 컨테이너에 양쪽으로 옅은 회색 라인이 BG이미지로 깔려있어요.
익스플로어에서는 회색 라인 BG가 제대로 먹히고 컨텐츠와 스카이도 컨테이너 안에 잘 안착되어 있는데,
파이어폭스에서는 컨텐츠와 스카이가 컨테이너 바깥으로 튕겨 나와서 컨테이너 박스는 위에 한줄 라인처럼 들어있고 그로 인해 BG이미지가 안나오네요.
이궁~~
뭐가 잘못된걸까요??
파이어폭스에서도 컨테이너 안에 컨텐츠와 스카이를 들어가게 하려면 어떻게 해야 할까요?
바쁘시겠지만, 도움 요청 드려요 헬프~~
-
앨프레드
overflow:hidden; 은 가능한 사용하지마세요(__
이녀석은 말그대로 정해준 사이즈보다 넘치는 녀석을 숨겨주는 역활을 하는데요
자칫잘못하면 컨텐츠가 잘려버리는 현상이 발생할수있습니다(__
가능한float, margin, padding 등 으로 레이아웃을 잡으시는게 개인적으로 추천합니다.. -
리네
네 그렇네요, 가장 기본적인걸 놓치고 있었네요 ㅎㅎ 답변 주신 수다님/수다님/skell83님/수다님 감사합니다~
-
아련나래
객전으로 DIV 코딩하다가 터득했는데요.. 첨잡은 레이아웃은 그냥 나두고 내용문에서 간격을 설정해 주면 padding 값과 문제없이 레이아웃이 그러지던데요.. ^^* 더 신경많이 안써고 좋아요..
-
상처입은마음
아 그리고 dtd설정시 Strict이랑 transitional는 총 width= width+padding 값입니다
즉 100이라는 넓이의 Box가 있고 20의 padding이 들어가면 css코드에는 width:80px;padding-left:20px; 이라고 적어줘야합니다. -
베레기
대선배 수다님꼐서 이리 뛰어주시면...곰방 추락 합니다 ^^:;;
-
나샘
div#container overflow:hidden 을 한번 줘보시면...
-
새우깡
float 이놈이 좀 그래여 다른 일반 것들이랑 같은 위치에 있는것이 아니라 따로 떠있는거기때문에 플로트를 주는 순간 안에있던 컨텐츠랑 스카이프가 떠버리니깐 컨테이너가 높이를 못잡아서 그런거래요~
플로트 나 포시션 쪽이 이해하기 좀 어려워요 저도 아직 모르는거투성이에요 *_*;;
해결 방법은 위와 같이 overflow:hidden 을 주는 방법도 있고 컨테이너에도 float를 지정 해주고 푸터에 클리어 해주는 방법도 있습니다 ^^; 도움이 되었다니 다 -
곰돌츼
아~ 알겠다~!
컨테이너 안쪽에 컨텐츠와 스카이에 넓이를 픽셀로 주고 그 각각에 마진이나 패딩을 넣으니 원래 넓이에 패딩값이 더해지면서 넘치니까..밑으로 떨어뜨렸나 보네요 그죠? 와 그렇구나 수다님 너무너무 땡큐~! 오늘 좋은일 많이 생기셔요~~! ^____________________________________________^ -
흰추위
어머머~~ 수다님~! 넘 감사드려요!!! 거짓말처럼 해결됐네요??
컨테이너 안에 넘치는 뭔가 있어서 안쪽 레이어 둘이 컨테이너 바깥으로 뛰쳐나갔다는거네요. 그게 뭐지?? -
권뉴
수다님은 살아있는 자료실, 걸어다니는 도서관..
또... 음... 모르겠어요 _; 더 생각나는게 없네..