브라우저 별로 상이한 리스트 마진 2007/01/30 15:43
홍커피님께서 주신 책으로 이래저래 공부하고 있습니다.
그런데 실상 메모장에 점을 찍어보니 책하고는 달리 제대로 작동안되는게 있어서,
의문차 공부차 포스팅을 한 번 올려봅니다~
혹시 고수님들께서 달아주시는 가르침의 리플도 감사히 받겠습니다~
ul과 li를 이용한 리스트를 만들어보겠습니다.
test.html
당연히 아주 똑같이 자~알 나옵니다.
그런데 CSS 왕초보 송군 다음소스에서 의아해집니다..
test.html
파이어폭스에서는 padding 값이 잘먹는 반면, 익스플로러에서는 블릿만 없어지고,
padding 값을 먹지않는 현상이 발생했습니다~!!!
이 글을 참고하시기 바랍니다~ IE에서 padding값 인식 에러와 대처요령
저의 경우에는 책에 나온 예제대로만 출력하는데 의의를 두고, margin 값을 추가하니 익스에서도 제대로 출력이 됐습니다~ 짠!
style.css
오늘은 이사 관계로... 요기까지만 하구요..
다음편에는 리스트에 블릿도 넣고, 저도 처음에 좀 신기했던, 이미지와 자바스크립트 없이
마우스 over 버튼 흉내내는 것도 해봐용!!!^^
그런데 실상 메모장에 점을 찍어보니 책하고는 달리 제대로 작동안되는게 있어서,
의문차 공부차 포스팅을 한 번 올려봅니다~
혹시 고수님들께서 달아주시는 가르침의 리플도 감사히 받겠습니다~
ul과 li를 이용한 리스트를 만들어보겠습니다.
test.html
<ul>이렇게 html 문서를 만들고 브라우저에서 보겠습니다.
<li>소개하고픈 링크</li>
<li>즐겨읽는 책</li>
<li>좋아하는 영화</li>
<li>함께듣는 음악</li>
</ul>
그런데 CSS 왕초보 송군 다음소스에서 의아해집니다..
test.html
<ul>style.css
<li>소개하고픈 링크</li>
<li>즐겨읽는 책</li>
<li>좋아하는 영화</li>
<li>함께듣는 음악</li>
</ul>
ul { list-style: none;test.html 파일에서 사용될 ul 태그앞에 붙는 불릿을 빼고, 앞쪽 여백을 0으로 지정해줬을 때, 두 브라우저간에 차이가 생겨버리는 현상이 생겼습니다.
padding-left:0 ;
}
파이어폭스에서는 padding 값이 잘먹는 반면, 익스플로러에서는 블릿만 없어지고,
padding 값을 먹지않는 현상이 발생했습니다~!!!
이 글을 참고하시기 바랍니다~ IE에서 padding값 인식 에러와 대처요령
저의 경우에는 책에 나온 예제대로만 출력하는데 의의를 두고, margin 값을 추가하니 익스에서도 제대로 출력이 됐습니다~ 짠!
style.css
ul { list-style: none;
padding-left:0 ;
margin-left: 0;
}
margin 값을 넣었더니 어쨌든 책과, 파폭, 익스에서 동일하게 출력은 된 모습
오늘은 이사 관계로... 요기까지만 하구요..
다음편에는 리스트에 블릿도 넣고, 저도 처음에 좀 신기했던, 이미지와 자바스크립트 없이
마우스 over 버튼 흉내내는 것도 해봐용!!!^^
http://monoeyes.com/trackback/54
