div paddin 적용시 width값
라라
style type=text/css
#box1 { width:200px; height:100px; background:#693; }
#box1 #box { display:block; width:100px; height:100px; background:#999; }
#box2 { width:180px; height:100px; padding-left:20px; background:#693; }
#box2 #box { display:block; width:100px; height:100px; background:#999; }
#box3 { width:200px; height:100px; padding-left:20px; background:#693; }
#box3 #box { display:block; width:100px; height:100px; background:#999; }
/style
div id=box1div id=boxpadding 값이 없이 width를 200 줌 /div/div
div id=box2div id=boxpadding 값을 줘서 width 를 180으로 함/div/div
div id=box3div id=boxpadding 값을 줘서 width 를 180으로 함/div/div
질문을 위해 위에 적어놓았습니다.
위처럼 padding값을 줄경우 그 만큼 width 값을 빼주잖아요 아니면
box3처럼 padding값만큼 div가 늘어나는게 맞죠 ??
그래서 box2번처럼 코딩을 했거든요.
그런데 개발자 피씨에선 20px만큼 짤려서 백그라운드 이미지가 안보네요....그래서 그냥 box3번처럼 해놨습니다.
저와 개발자 모두 익스플로8버전이구요.
무엇때문인가요? 알려주세요 ~
-
피리
ie는 패딩값만큼 width값이 늘어나지만, 파이어폭스는 그렇지 않습니다.
지금 주신 소스만으로는 어떤게 문제인지 저는 알수가 없네요.
번외로 불필요한 속성을 뽑자면,
각 요소에 display:block속성과 #box1 #box2 #box3 에 height값은 없어도 되겠습니다.
그리고 ID의 경우 중복으로 사용하지 않습니다 class로 변경해 주세요. -
잎새
네 ^^ 답변모두 감사합니다 ~~
-
진달래
DTD가 정확하게 어떻게 들어가는지 확인하셔야할듯하네요. 한문구만 틀려도 쿽스모드로~
-
좍좍
음 그러면 혹시나 팍이어폭스를 감안한다면 box3번처럼 width 값을 줘야겠네요..
-
새밝
DTD를 개발자가 맘대로 빼버렸을수있음
쿽스모드시
width안에 padding border같이 들어감 -
죄암죄암
이런경우 #box3에 padding-left를 주는것 보다,
#box에 margin-left를 주는것이 좋지 않나 싶네요!
그리고, id=\box\보단 class=\box\가 맞는것 같습니다. id는 한번만 나와야하니까요. -
보르미
dtd의 유,무 (표준모드 / 쿽스모드)에 따라서 박스모델 계산 값이 달라집니다. ie에서만요..
-
박애교
확인해 봤는데 dtd 소스 넣었답니다 ㅡㅡ; 혹시 다른이유는 없을까요?
-
인1형녀
ie8 사용하시면, 개발된 페이지에서 f12눌러보세요.
개발자도구의 마지막 메뉴에 문서모드가 있습니다.
DTD가 제대로 적용되었다면, \ ie8(혹은 7) 표준 \ 이라고 나오겠지요.
DTD를 넣었지만, 올바르지 않은 형식일 경우 \ 쿼크모드 \로 렌더링 될수도 있습니다.
질문하시는 증상자체가 쿽스 모드에서 나타나는 현상이기에 드리는 말씀입니다. -
가람
아 위엔 예제로 그냥 만든거라서 id값이구요 소스내에선 class로 되어 있습니다.
근데 id 나 class 부분 둘다 이런문제가 생깁니다.
백그라운드 깔고 원하는 위치에 텍스트를 넣다보니까 padding값을 줄수밖에 없네요..
| 번호 | 제 목 | 글쓴이 | 날짜 |
|---|---|---|---|
| 2696094 | exe 파일 | 제철 | 2025-05-26 |
| 2696043 | 제이쿼리 .scroll() 관련 질문드립니다 | 이거이름임 | 2025-05-26 |
| 2695984 | 마크업상으로 하단에 있으나 우선적으로 이미지파일을 다운로드받는 방법 (1) | 들꿈 | 2025-05-25 |
| 2695934 | tr 속성값 (9) | 새 | 2025-05-25 |
| 2695905 | ASP로 개발됐을 때 css가 달라져요 ㅠㅠ (4) | 슬아라 | 2025-05-24 |
| 2695878 | form을 이용한 다른 페이지로 넘기는 방법을 알려주세요 (1) | 핫파랑 | 2025-05-24 |
| 2695844 | 저기 암호화 및 복호화 프로그램.. 만들어볼려는대 (2) | 한빛 | 2025-05-24 |
| 2695814 | [질문] PDA에서 애플릿이 가능한가요? (1) | 봄시내 | 2025-05-24 |
| 2695785 | 웹 설정 도와줄분 | 화이트캣 | 2025-05-23 |
| 2695730 | 갑자기 기억이 안나는데 accesskey 속성.. | 빛나라 | 2025-05-23 |
| 2695702 | [질문] Java 버전 차이에 의한 오류?!! (2) | 검사 | 2025-05-23 |
| 2695672 | 자바 임베디드 쪽으로 배우고 싶은데요..질문이요.. (1) | 뽀그리 | 2025-05-22 |
| 2695647 | 헉! 이클립스(v3.1)에서 발생되는 널포인트 익셉션? ;;; (3) | 아빠몬 | 2025-05-22 |
| 2695586 | IFRAME 캐싱 질문 | 봄나비 | 2025-05-22 |
| 2695498 | [질문]실행가능한 jar파일.. 정말 이해가 안가네요... ㅡㅜ;; | 터1프한렩 | 2025-05-21 |
| 2695468 | 자바랑 이클립스에서요.. | 스킬 | 2025-05-21 |
| 2695375 | Mysql 연동하는 자바 질문있습니다. | 아리솔 | 2025-05-20 |
| 2695319 | 파워포인트 파일을 저장할 수 있을까요? | 시윤 | 2025-05-19 |
| 2695289 | [질문]Tween 값의 정도를 알고 싶습니다. | 타마 | 2025-05-19 |
| 2695238 | c 와 c++의 시작 (10) | ChocoHoilc | 2025-05-18 |