Mozilla 한국 커뮤니티

IE와 FF의 list모델링....
달라도, 어떻게 이렇게 틀립니까..ㅠ,.ㅠ

미치겟습니다..ㅠ,.ㅠ

IE에 마추니, FF에선 엉망이고.....
반대로 해도 마찬가지고....

으......
정말, 너무 하는군요..ㅠ,.ㅠ

그리고, IE에서는..도대체!!, 왜!!
list속성 tag에 자동으로 10px정도의 block(margin) 이 생기는지....
아주 미치겠습니다.

그냥, 이 세상에서 IE가 사라졌으면 좋겠습니다 ㅡ,.ㅡ;

margin, padding 둘다 0으로 하시고 작업해 보세요. IE의 경우는 불렛들어가는 영역이margin으로, 다른 브라우져의 경우 padding으로 구현이 되어 있습니다.

li에 여백 생기는 거는 여러가지 경우가 있을 수 있는데...
ul이나 ol에 width나 height를 지정하고 li에는 width나 height를 지정하지 않으면 해결이 될 수 있습니다. 또는 li안의 img에 float속성을 주어도 됩니다.

hyeonseok wrote:margin, padding 둘다 0으로 하시고 작업해 보세요. IE의 경우는 불렛들어가는 영역이margin으로, 다른 브라우져의 경우 padding으로 구현이 되어 있습니다.

당연히, ul, ol margin, padding 0 으로 했지요...
그래도, 여전히 상단에 10px의 공백이 생겨요..

결국 margin-top:-10px 이런식으로 처리를 했지만..
FF에서는 또 대략 난감한 시츄에이션이 되죠 -_-;;

그리고, li 에서, width 혹은 height 선언하면,
왼쪽으로 부터, 10px blank가 또 생겨요..
이것도 마찬가지고
li에다가 margin-left:-10px해서 해결은 했지만..
역시나 FF에서.......

이럴꺼면, 차라리 table 로 짜는게 속시원할 것 같네요 ㅡ,.ㅡ;

이쯤 되면 코드를 보여주시는 것이 더 빠를 것 같습니다.

제경우에는
ie에서 위쪽에 float된 Element가 있을경우 다음에 나온 clear된 Element 상단에 10px 정도의 padding이 생기던데요.
이것도 핵으로 음수 마진값을 주는 경우외엔 방법이 없더군요.

hyeonseok wrote:이쯤 되면 코드를 보여주시는 것이 더 빠를 것 같습니다. Smile

대략 정리를 하면..

Code: Select all

<img src="a.gif" style="vertical-align:top;">(여기서 display:block 해도 마찬가지)
<ul style="width:220px;margin:-4 0 0 0;list-style:none inside;">
    <li style="margin-left:-10px;height:19px;background:url('aa.gif') no-repeat 12px 7px;padding:1 0 1 18;vertical-align:middle"></li>
</ul>

oragi wrote:제경우에는
ie에서 위쪽에 float된 Element가 있을경우 다음에 나온 clear된 Element 상단에 10px 정도의 padding이 생기던데요.
이것도 핵으로 음수 마진값을 주는 경우외엔 방법이 없더군요.

흠, 만약 상위에 있는 Element의 display 속성이 inline 이실경우...

Code: Select all

display:block

로도 한번 해보세요~

아, 그리고 그냥, 신세한탄 할려고 쓴건데, 어떻하다보니..
여기까지 왔네요 -_-;;

그리고, IE에 맞춰서 코딩완료했습니다..ㅠ,.ㅠ

그냥, 핵을 이용해서,
IE, FF에 둘다 만족하도록 만들었습니다..;;

li 태그에 line-height 와 font-size 속성을 작게 잡아줘보세요.
기본 설정된 off-set 탓입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>목록태그 마진, 패딩 초기화 예제</title>
<style type="text/css">

</style>
</head>
<body>
<div id="ex">
<ul>
<li>첫번째</li>
<li>두번째</li>
<li>세번째 </li>
</ul>
</div>
</body>
</html>

================================================

"*" 공통선택자를 이용해서 마진과 패딩 정도는 모두 0으로 초기화 하는 것이 크로스 브라우징에 좋을 것 같습니다. 많은 분들이 이미 사용하고 계시구요.

위 예제를 보시면 핵을 쓰지 않고도 마진이나 패딩 문제는 해결이 된다는 것을 보여드리기 위해서 작성 했습니다.

핵을 쓰는 것은 아무리~ 아무리~ 해결하려 해도 해결되지 않을 때 가장 최후에 눈물을 머금고 정말 신세한탄 나올 때 써야 하는 것이라 생각 됩니다. (개인적으로 핵을 써서 무언가를 구현해야 하는 상황이 오면 차라리 다른 방법으로 구현하는 방식을 취하거나 하여 핵을 금기시 하고 있습니다.)

이미 늦은 답변은 아닌지 모르겠네요..

아..아쉽네요..
글쓸 당시에 봤었다면 더 좋았을텐데, ㅎㅎ

지금은 이미 다 해결된 상태에요..
좋은 답글 달아주셔서 정말 감사합니다.

이런 좋은 답글이 달려야, 시간이 흐른뒤, 저같은 사람이 와서 검색했을때
기쁜마음으로 해답을 찾고 돌아가겠죠..

Mozilla 한국 커뮤니티

으~, 왜 list 속성의 tag!!

으~, 왜 list 속성의 tag!!

제목에

핵을 쓰지 않고도 "*" 공통선택자로 처리..