CSS 뭐가 문제죠?? (크로스브라우징)

· 2012-06-27 (수) 22:01:43 · 1635 · 1
크롬.png
1.gif
위에가 크롬

아래가 IE8 인데요

그림처럼 가로 간격에 문제가 있네요..

padding으로 인해 발생하는 문제고요 width를 그냥 줄이면 크롬에서는 맞는데 익플에서는

짧게나와서 어떻게 해야할지를 모르겠습니다...

아래가 그림 부분의 CSS 고요

#mw-outlogin .login-title { position:absolute; padding:5px 5px 5px 10px; background-color:#ececec; margin:0; width:250px; border-bottom:1px solid #D9D9D9; }


아래는 아웃로그인 스킨2 전체입니다.

<!-- 로그인 후 외부로그인 시작 -->
<div id="mw-outlogin">
<form name="flogin" method="post" action="javascript:flogin_submit(document.flogin);" autocomplete="off">
<input type="hidden" name="url" value="<?=$url?>">
<div class="box-outside">
<div class="box-inside">
<? if ($is_admin == "super" || $is_auth) { ?>
<div class="login-title"><a href="<?=$g4[admin_path]?>/"><strong><?=$nick?></strong></a></div>
<? } else { ?>
<div class="login-title"><strong><?=$nick?></strong></div>
<? } ?>
<div class="login-btn"><a href="<?=$g4[bbs_path]?>/logout.php?url=<?=$urlencode?>"><img src="<?=$outlogin_skin_path?>/img/outlogin2_button.gif" align="absmiddle" border="0"></a></div>
<div class="login-memo"><a href="javascript:win_memo();"><?=$memo_not_read?></a></div>
<div class="login-point"><a href="javascript:win_point();"><?=$point?>p</div>
<div class="login-cash"><a href="<?=$g4[path]?>/plugin/cybercash/"><span class="login-cash-number"><?=number_format($mw_cash[mb_cash])?></span> <?=$mw_cash[cf_cash_unit]?></a></div>
<div class="login-membership">
<span class="scrap"><a href="javascript:win_scrap();">스크랩</a></span>
<span class="div">|</span>
<span class="user"><a href="<?=$g4[bbs_path]?>/member_confirm.php?url=register_form.php">내정보</a></span>
<span class="div">|</span>
<span class="attendance"><a href="<?=$g4[path]?>/plugin/attendance/index.php">출석부</a></span>
</div>
</div>
</div>
</form>
</div>
<!-- 로그인 후 외부로그인 끝 -->

<style type="text/css">
#mw-outlogin a { color:#454545; font-size:8pt; text-decoration:none; }
#mw-outlogin .box-outside { width:250px; height:100px; background-color:#D9D9D9; }
#mw-outlogin .box-inside { position:absolute; margin:1px 0 1px 0; width:250px; height:98px; background-color:#f4f4f4; }
#mw-outlogin .box-inside { line-height:16px; color:#7dacd8; font-size:9pt; font-family:굴림; }
#mw-outlogin .login-title { position:absolute; padding:5px 5px 5px 10px; background-color:#ececec; margin:0; width:250px; border-bottom:1px solid #D9D9D9; }
#mw-outlogin .login-btn { position:absolute; margin:3px 0 0 180px; }
#mw-outlogin .login-point { position:absolute; background:url(<?=$outlogin_skin_path?>/img/ico-coin.png) no-repeat; font-weight:bold; padding:0 0 0 25px; margin:40px 0 0 15px; }
#mw-outlogin .login-memo { position:absolute; background:url(<?=$outlogin_skin_path?>/img/ico-memo.png) no-repeat; font-weight:bold; padding:0 0 0 25px; margin:40px 0 0 120px; }
#mw-outlogin .login-cash { position:absolute; background:url(<?=$outlogin_skin_path?>/img/ico-cash.png) no-repeat; font-weight:bold; padding:0 0 0 25px; margin:40px 0 0 180px; }
#mw-outlogin .login-membership { position:absolute; background-color:#EAEAEA; margin:65px 0 0 10px; padding:5px 0 0 0; width:232px; height:25px; }
#mw-outlogin .login-membership { text-align:center; font-size:9pt; color:#d0e1f1; }
#mw-outlogin .login-membership a { font-size:9pt; }
#mw-outlogin .login-membership .scrap { background:url(<?=$outlogin_skin_path?>/img/ico-scrap.png) no-repeat; margin:2px 0 0 0px; padding:1px 0 0 18px; letter-spacing:-1px; }
#mw-outlogin .login-membership .user { background:url(<?=$outlogin_skin_path?>/img/ico-user.png) no-repeat; margin:3px 0 0 0px; padding:0px 0 0 18px; letter-spacing:-1px; }
#mw-outlogin .login-membership .attendance { background:url(<?=$outlogin_skin_path?>/img/ico-attendance.png) no-repeat; margin:3px 0 0 3px; padding:0px 0 0 18px; letter-spacing:-1px; }
#mw-outlogin .login-membership .div { color:#C8C8C8; margin:3px 0 0 5px; }
</style>

첨부파일

크롬.png (4.1 KB)
0회 2012-06-27 22:01
1.gif (3.6 KB)
0회 2012-06-27 22:01
|

댓글 1개

2012-06-27 (수) 22:26:16
padding을 줄경우 width 포함이냐 아니면 미포함이냐 문제인 듯 싶습니다.
이 문제는 document선언을 xhtml로 안했을 경우 생기는 문제입니다.
(다른 문서 선언시에 어떻게 되는지는 잘모르겠습니다만;;)

보통 브라우저마다 padding을 width에 포함하냐 안포함하냐의 여부가 조금 다르기 때문에
잘 안될 경우 margin 을 주시거나 아니면 부모 <div> 를 하나 만들어서 부모 div에 padding을 주는 꼼수를 쓰시면 해결 될 듯 보입니다.
댓글을 작성하시려면 로그인이 필요합니다.

그누4 질문답변

66,531건

그누보드4 관련 질문은 QA 로 이전됩니다. QA 그누보드4 바로가기 기존 게시물은 열람만 가능합니다.

+
제목 글쓴이 날짜 조회
12-06-27 조회 1,050
12-06-27 조회 1,636
12-06-27 조회 1,118
12-06-27 조회 890
12-06-27 조회 1,041
12-06-27 조회 1,065
12-06-27 조회 1,699
12-06-27 조회 1,768
12-06-27 조회 1,697
12-06-27 조회 1,136
12-06-27 조회 1,582
12-06-27 조회 1,093
12-06-27 조회 924
12-06-27 조회 2,438
12-06-27 조회 1,667
12-06-27 조회 1,074
12-06-27 조회 896
12-06-27 조회 1,645
12-06-27 조회 874
12-06-27 조회 818