파이어폭스에서 li 줄간격문제 입니다 조언좀요
거늘
.info_a {
margin-top: 15px; margin-left: 15px; width: 377px; height: 114px; border: 1px solid #eaeaea;
}
.info_a .info_ul {
margin-right: 8px; margin-left: 8px;
}
.info_a .info_ul li {
background: url(ico_pc_dot_1.gif) repeat-x bottom; padding-top: 7px; padding-bottom: 4px;
}
.info_a .info_ul a {
background: url(news_dot.gif) no-repeat 0px 5px; padding-left: 7px; float: left;
}
.info_a .info_ul .date {
color: #989898; margin-right: 4px; float: right;
}
div class=info_a
ul class=info_ul
lia href=#[Hauri] 악성코드 1061개 패턴 업데이트/aspan class=date2009.07.17/span/li
lia href=#[Kaspersky] 악성코드 1878개 패턴 업데이트/a/li
lia href=#[Kaspersky] 악성코드 1878개 패턴 업데이트/a/li
lia href=#[Kaspersky] 악성코드 3817개 패턴 업데이트/a/li
/ul
/div
.info_a {
margin-top: 15px; margin-left: 15px; width: 377px; height: 114px; border: 1px solid #eaeaea;
}
.info_a .info_ul {
margin-right: 8px; margin-left: 8px;
}
.info_a .info_ul li {
background: url(ico_pc_dot_1.gif) repeat-x bottom; padding-top: 7px; padding-bottom: 4px;
}
.info_a .info_ul a {
background: url(news_dot.gif) no-repeat 0px 5px; padding-left: 7px;
}
.info_a .info_ul .date {
color: #989898; margin-right: 4px;
}
div class=info_a
ul class=info_ul
lia href=#[Hauri] 악성코드 1061개 패턴 업데이트/aspan class=date2009.07.17/span/li
lia href=#[Kaspersky] 악성코드 1878개 패턴 업데이트/a/li
lia href=#[Kaspersky] 악성코드 1878개 패턴 업데이트/a/li
lia href=#[Kaspersky] 악성코드 3817개 패턴 업데이트/a/li
/ul
/div
.info_a {
margin-top: 15px; margin-left: 15px; width: 377px; height: 114px; border: 1px solid #eaeaea;
}
.info_a .info_ul {
margin-right: 8px; margin-left: 8px;
}
.info_a .info_ul li {
background: url(ico_pc_dot_1.gif) repeat-x bottom; padding-top: 7px; padding-bottom: 4px; height: 19px;
}
.info_a .info_ul a {
background: url(news_dot.gif) no-repeat 0px 5px; padding-left: 7px; float: left;
}
.info_a .info_ul .date {
color: #989898; margin-right: 4px; float: right;
}
div class=info_a
ul class=info_ul
lia href=#[Hauri] 악성코드 1061개 패턴 업데이트/aspan class=date2009.07.17/span/li
lia href=#[Kaspersky] 악성코드 1878개 패턴 업데이트/a/li
lia href=#[Kaspersky] 악성코드 1878개 패턴 업데이트/a/li
lia href=#[Kaspersky] 악성코드 3817개 패턴 업데이트/a/li
/ul
/div
.info_a {
margin-top: 15px; margin-left: 15px; width: 377px; height: 114px; border: 1px solid #eaeaea;
}
.info_a .info_ul {
margin-right: 8px; margin-left: 8px;
}
.info_a .info_ul li {
background: url(ico_pc_dot_1.gif) repeat-x bottom; padding-top: 7px; padding-bottom: 4px; height: 19px; border:1px solid red;
}
.info_a .info_ul a {
background: url(news_dot.gif) no-repeat 0px 5px; padding-left: 7px; float: left;
}
.info_a .info_ul .date {
color: #989898; margin-right: 4px; float: right;
}
div class=info_a
ul class=info_ul
lia href=#[Hauri] 악성코드 1061개 패턴 업데이트/aspan class=date2009.07.17/span/li
lia href=#[Kaspersky] 악성코드 1878개 패턴 업데이트/a/li
lia href=#&gef=#[Kaspersky] 악성코드 1878개 패턴 업데이트/a/li
lia href=#[Kaspersky] 악성코드 3817개 패턴 업데이트/a/li
/ul
/div파이어폭스에서 li 줄간격 문제가 있어서 질문글을 올립니다
제일 위의 첫번째 경우 보시면 익스플로러 같은경우 제대로 보입니다 줄간격도 딱 좋구요
근데 파이어폭스에서 줄간격이 완젼 무시가 되길래
두번째 스샷처럼 플로트를 없애봤습니다 없애니까 파이어폭스에서도 줄간격이 익스하고 똑같더군요
그래서 고민끝에 세번째 스샷처럼 li에다가 높이값을 직접 줬습니다 그랬더니 파이어폭스에서 나름 잘 표시가 되더군요
근데 문제는 그럴경우 익스플로러화면에서 박스의 세로값이 좀 더 길어졌더라구요 그래서 확인차 li에 보더값을 줘봤습니다
네번째 스샷처럼 각 li 간격에 약간의 패딩? 혹은 마진? 정도가 들어갔더라구요 빨간 박스 간격이 떨어져서 보이시죠? 원래는 파이어폭스처럼 딱 붙어야하는데 말이죠...
첫번째 화면에서는 줄간격이 무시가 되고 마지막 스샷처럼에서는 익스에서 li의 간격에 빈공백이 들어가서 전체길이가 늘어나고...
조언좀 부탁드리겠습니다 이걸로 3시간은 혼자 고민하다가 글 올립니다....
-
휘율
가끔 overflow를 왜 줘야하지? 하면서 궁금해했었는데...
언급하신거처럼 overflow는 1번과 2번항목의 경우에만 준다고 하시니 궁금증이 바로 해결되네요 -
남자
overflow를 주는곳은 크게 2곳에 준답니다.
1. 게시물이 넘치는것을 처리하기 위해
2. 자식이 float된 부모의 높이를 줄때 (위의 소스는 a와 span이 같이 float된 li가 있겠네요) -
시내
IE의 버그 그리고 파이어폭스의 까다로움....
진짜 쉽게쉽게 까다롭지 않게 잘 적용되는 브라우져 어디 없을지 잠시 생각해봅니다 -
크리에이터
인류의 적 ie... 마소 좀 브라우저사업 접자..
-
행운아
와우 a태그에 진짜 그렇게 하니 괜찬아지네요
좋은 노하우 감사드립니다 -
찰스
음... 그렇군요
일단은 공식 외우듯이 써봐야겠습니다 -
한지잠
부끄럽지만 저도 정확히 이해하지는 못하고 있습니다. css3.info 사이트 메인의 게시판을 카피해 보다가, 게시물 제목과 본문 사이의 가로줄에 border를 사용하지 않고 1픽셀 도트를 백그라운드로 깔아서 한 것이 overflow:hidden 을 넣지 않으면 질문하신 첫번째 경우처럼 가로줄이 게시물 제목을 뚫고 올라오는 현상이 있더군요. 이게 잘 안되서 고생하다가 소스의 css를 읽어보고 overflow:hidden을 넣었더니 바로 해결되길래 기억하고
-
해까닥
아이구 답변 감사합니다
제가 조언해주신대로 이리저리 테스트 해봤는데요
li에 overflow: hidden; 을 주니까 파이어폭스에서 줄간격 무시된게 제대로 표현이 되더라구요
결국은 해결이 되었습니다
overflow: hidden; 이라는게 A와 B가 있을때 서로의 영역을 침범했을때 서로 패딩이나 마진 값이 지장 없이 그리고 스크롤 없이 섞이며 중복되는 영역은 숨겨지는는 걸로 알고있어서 상관 없을줄 알았는데...
제가 혹시 overflow를 제 -
큰힘
네째 스샷에서 보이는 정체불명의 간격은 아마 IE에서 여러군데 넣는 디폴트 마진일겁니다. margin:0 을 추가해보시면 해결될 것 같습니다.
-
찬놀
IE의 경우 약간의 버그가있습니다.
앵크를 block를 한다 헌들 block의 속성으로 100%바뀌는게 아니고 inline속성을 유지하고있습니다.
그중하나가 하단의 3px-_-;
해결방법은 전체 감싸는곳(li)에 overflow:hidden;을 주면 당연히 하단 사이즈가 사라져서 안나오겠지만
단순하게 a에 vertical-align: top; 을주셔도 해결된답니다.