1 신요섭이 작성한 주제

  • 신요섭
  • 방문자

주제: 사이드바 수정시 문제가 생겼는데 좀 도와주세요..

제가 웹프로그래밍을 해본적도 없거니와, 더군다나 웹표준에 대해선 깜깜해서 어렵네요..;;

제 홈페이지는 http://www.b-612.kr/ 입니다.

들어가보시면 사이드바가 아래쪽에 있는데요,

스킨을 제가 수정을 좀 해서 최근 글 목록과 링크 부분을 좀 길게 만들었는데, 제대로 표시가 안됩니다.

어찌어찌 수정을 하다 보니 익스플로러6에서는 제대로 표시가 되는데,

익스플로러 7, 크롬, 파이어폭스에서는 다 이상하게 나오는 것이 아무래도 웹표준이 아닌가 봅니다.

css파일을 첨부합니다. 어딜 수정할지 잘 몰라서요..

조금 도와주세요..ㅠㅠ

미리 감사합니다 smile

ps. 아, 그리고, 블로그 폰트를 나눔고딕으로 바꿨는데, 역시 익스플로러 6에서만 제대로 표시가 됩니다.
(웹폰트는 아니구요..) 중요한 문제는 아니지만 이것도 도움말을 좀 주시면 감사하겠습니다.

@charset "utf-8";
/* 반드시 들어가야 하는 스타일 시작 */

/* 본문 공통 */
body{
        font:0.75em/1.5 NanumGothic, Dotum, Verdana, AppleGothic, Sans-serif;
        background-color:white;
        color:#666;
}
a:link          { color:#333;     text-decoration:none;}
a:visited       { color:#333;     text-decoration:none;}
a:hover         { color:red;  text-decoration:underline;}
a:active        { color:red;     text-decoration:none;}

/* 페이징 - 현재 페이지 */
    .selected               { text-align:center;   font-weight:bold;  color:#f30;} 
    .no-more                { color:#ccc;}

/* 카테고리 - 이미지 버튼 */
    .ib                     { cursor:pointer;}
/* 카테고리 - 트리 셀 */
    .branch3                { cursor:pointer;}
/* 카테고리 - 카테고리 옆 개수 스타일 */
    .c_cnt                  { font:0.75em NanumGothic, Tahoma;  color:#f30;}

/* 달력 월 표시 */
    .cal_month              { font:0.9em NanumGothic, Verdana;  height:18px; font-weight:bold; letter-spacing:normal;}
/* 달력 요일 표시(th 영역) */
    .cal_week1              { font:1em NanumGothic, dotum;   font-weight:normal;}
/* 달력 일요일 표시(th 영역) */
    .cal_week2              { font:1em NanumGothic, dotum;  color:#f30; }

/* 달력 Week(tr 영역)  */
    .cal_week               {  height:10px;}
    .cal_current_week       { background-color:#eee;}
    
/* 달력 Day(td 영역) */
    .cal_day                { font:0.85em NanumGothic, Verdana;  color:#999;  text-align:center;}
/* 달력 Day, 일요일 (td 영역)  */
    .cal_day_sunday         { color:#f30 !important;}
    .cal_day_sunday a        { color:#f30 !important;}
        
/* 달력 지난 달 날짜 표시(td)   */
    .cal_day1               { color:#ccc;}
/* 달력 다음 달 날짜 표시(td)   */
    .cal_day2               { color:#ccc;}
/* 달력 이번 달 날짜 표시(td) */
    .cal_day3               { color:#aaa;}
/* 달력 오늘 날짜 표시(td) */
    .cal_day4               { color:#333;  font-weight:bold;}
/* 달력 글쓴 날 링크 스타일 */
    a.cal_click:link        { color:#898989;  font-weight:bold;}
    a.cal_click:visited     { color:#898989;  font-weight:bold;}
    a.cal_click:hover       { color:white;  font-weight:bold;}
    
/* 종류별 코멘트 [##_rp_rep_class_##] */
    .rp_general             { }
    .rp_admin               { }
    .rp_secret              { color:#f30;   font-weight:bold;}
/* 종류별 코멘트 [##_guest_rep_class_##] */
    .guest_general          { }
    .guest_admin            { }    
/* 비밀 댓글 (로그아웃시 비밀글 표현)    */
    .hiddenComment { }
    
/* 이미지 아래 캡션 스타일 */
    .cap1                   { color:#999;  text-align:center;}    
/* 그림 */
    .imageblock             {  padding:0;  margin:5px 0;}
/* 왼쪽 */
    .left                   { }
/* 가운데 */
    .center                 { }
/* 오른쪽 */
    .right                  { }
/* 그림 2개 배치 */
    .dual                   { background-color:#fff; margin-bottom:5px;}
/* 그림 3개 배치 */
    .triple                 { background-color:#fff; margin-bottom:5px;}
    
/* 본문 - more / less */
    .moreless_fold          { background:url(images/iconMore.gif) top left no-repeat;  padding-left:20px; color:#000;}
    .moreless_top           { background:url(images/iconLess.gif) top left no-repeat;  padding-left:20px; color:#000;}
    .moreless_body          { }
    .moreless_bottom        { background:url(images/iconLess.gif) top right no-repeat;  padding-right:20px; color:#999; text-align:right;} 

/* 키워드 */ 
    .key1 { cursor: pointer; border-bottom: 1px dotted #ccc; } 

/* 반드시 들어가야하는 스타일 끝 */

/* 공통영역 */
 * { margin: 0; padding: 0; }
hr              { display:none;}
img             { border:0;}
h1, h2, h3, h4  { margin:0;  padding:0;}
input           { border:1px solid #aaa;}
textarea        { border:1px solid #aaa;}
ol, ul, li { list-style:none;}

/* 블로그 레이아웃 */
body { background:url(images/bg.jpg) 0 0 no-repeat fixed white; margin:0; padding:0;}
#content { width:740px; overflow:hidden; padding:10px 20px 0 19px; margin-left:425px; border-right:1px solid #ddd; border-left:1px solid #ddd; min-height:500px;}

/* ***** Header ******/
#header { padding-left:6px;}

#header .title { position:absolute; width:413px; margin:5px 0 0 -11px; padding:14px 0 0 12px; background:none; z-index:100;}
#header .title span { padding:5px 0 0 0; display:block; font:1em NanumGothic, dotum; letter-spacing:-1px;}
#header h1 {font:1.3em NanumGothic, Verdana;  font-weight:bold;  letter-spacing:-1px;  }
#header h1 a { color:black; padding-bottom:2px; }
#header h1 a:hover { color:#ff0096;  text-decoration:none;}

#header .blogMenu  { width:317px; height:54px; position:absolute; margin:0 0 0 70px;}
#header .blogMenu ul   { margin:0;  padding:0;  list-style:none; display:none;}
#header .blogMenu li   { display:inline;  background:url(images/bullBar.gif) no-repeat;  margin-left:3px;  padding-left:7px;}
#header .blogMenu li.tab_home { background:none;}
#header .blogMenu a { color:white;}
#header .blogMenu a:hover { color:#ff0096;} 
#header .desc { display:block; height:15px; padding-top:2px; width:300px; color:#ccc;}

#header .bloginfo img { width:53px; height:53px; border:4px solid #eee;}
.copyright {margin-top:60px; color:#999; font:0.9em NanumGothic, tahoma; letter-spacing:normal; clear:both; padding:4px 0 6px 7px;}
.copyright a:link, .copyright a:visited, .copyright a:hover { color:#999 !important;}

/* ***** content ***** */ 
#content .titleWrap h2, #content .titleWrap h3,
#content .guestbook h2, #content .guestbook h3,
#content .taglog h2, #content .taglog h3,
#content .localog h2, #content .localog h3,
#content .searchRplist h3,
#content .searchList h2, #content .searchList h3
{ width:716px; border:1px solid #e6e6e6; margin:0 -10px 10px -10px; background:url(images/bgTitle.gif) 0 0 repeat-x #fcfcfc;   padding:10px 10px 8px 33px; font:1.1em NanumGothic, gulim; font-weight:bold; color:#333; letter-spacing:normal;}

*html #content .titleWrap h2, *html #content .titleWrap h3 { padding:10px 10px 7px 33px;}
#content .titleWrap h2 a { color:#333;}
#content .titleWrap h2 a:hover { text-decoration:none;}



#content .titleWrap { margin:0 0 5px 0; padding-bottom:7px; clear:both;}
#content .titleWrap .category a { font:0.9em NanumGothic, dotum; letter-spacing:-1px; color:#999; }
#content .titleWrap .date { font:0.8em NanumGothic, tahoma; margin-left:5px; color:#aaa; letter-spacing:normal;}
#content .titleWrap .admin {  padding:5px 0; margin:2px 0; font:0.9em NanumGothic, dotum;color:#666;}
#content .titleWrap .admin a{ color:#444; font:1em NanumGothic, dotum;}

#content .entry { margin:10px 0 40px 0; color:#888;}
#content .entry h1, #content .entry h4, #content .entry h5, #content .entry  h6 { border-bottom:1px solid #ccc;  margin-bottom:3px; padding-bottom:1px;  color:#222; font:1.1em NanumGothic, "굴림"; font-weight:bold;}

#content .article { letter-spacing:normal; font-family:NanumGothic, "굴림"; width:740px; overflow:hidden; margin-bottom:15px;}
#content .entry .tagTrail { margin:15px 5px 0 0; padding-left:32px; height:auto; background:url(images/entryTag.gif) top left no-repeat;  clear:both; letter-spacing:normal; font:1em NanumGothic, dotum;}
#content .entry .tagTrail span { display:none; }
#content .entry .tagTrail a{ color:#aaa;}
#content .entry .actionTrail  { font:0.8em NanumGothic, tahoma; letter-spacing:normal; color:#909090; padding: 6px 0 7px 0; border-top:1px solid #f0f0f0; border-bottom:1px solid #f0f0f0; margin-top:15px;  clear:both;}
#content .entry .actionTrail a{color:#909090;}
#content .guestList {margin:10px 0 40px 0; color:#888;}

#content .article h2, #content .article h3 { border-bottom:1px solid #ccc;  margin-bottom:3px; padding-bottom:1px;  color:#222; font:1.1em NanumGothic, "굴림"; font-weight:bold;}

#content .article ol, #content .article ul { margin:10px 0; padding:0 0 0 30px;}
#content .article ol li { list-style:decimal outside; margin:0; padding:0;}
#content .article ul li { list-style:circle outside; margin:0; padding:0;}
#content .article dt { font-weight:bold;}
#content .article dd { margin-left:10px;}
#content .article BLOCKQUOTE { margin:10px 0 10px 20px; padding-left:6px; border-left:3px solid #eee;}
#content .article p { margin-bottom:15px;}


/* 코멘트 */
.commentWrite { padding:8px 0;}
.commentWrite label { display:none;}
.commentWrite input, .commentWrite textarea { width:454px; border:3px solid #e1e1e1; margin:1px 0; padding-left:60px; padding-top:3px; color:#808080; font:1em NanumGothic, gulim; height:15px;}
.commentWrite textarea  { height:70px; background:url(images/bgComment.gif) 0 0 no-repeat #ffffff; padding:22px 9px 9px 9px; width:496px;}
.commentWrite input.name { background:url(images/bgName.gif) 0 0 no-repeat;}
.commentWrite input.home { background:url(images/bgHome.gif) 0 0 no-repeat; font:0.8em NanumGothic, tahoma;}
.commentWrite input.pass { background:url(images/bgPass.gif) 0 0 no-repeat; }
.commentWrite p { border:1px solid white;}
.commentWrite .submit { border:0; padding:0; margin:0; width:325px; height:28px; margin-top:4px;}
.commentWrite .secretWrap .checkbox { border:0; padding:0; margin:0; position:absolute; width:20px; height:20px; margin:124px 0 0 328px;}
.commentWrite .secretWrap label { font:0.8em NanumGothic, tahoma; letter-spacing:normal; display:block; position:absolute;  margin:128px 0 0 348px; cursor:pointer;}


.comment {position:relative;}
.comment h3 { display:none;}
.commentList {background:#fcfcfc;}
.commentList li { margin-top:6px; border:1px solid #e6e6e6; background:url(images/commentBg.gif) 0 1px repeat-x #fcfcfc; width:498px; padding:10px 10px 8px 10px;}
.commentList li .date { font:0.8em NanumGothic, tahoma; letter-spacing:normal; color:#ccc;}
.commentList li .name { float:left; font-weight:bold; margin-right:7px;  color:black;}
.commentList li .name img { vertical-align:middle;}
.commentList li p { clear:left; padding-top:4px; padding-bottom:3px; width:493px; overflow:hidden;}
.commentList li ul { margin:0; padding:0 !important;}
.commentList li ul li { width:473px;}
.commentList li ul li p { width:463px;} 

.commentList li .control { float:right; margin-top:-5px; margin-right:-5px;}
.commentList li .control a { display:block; height:0; padding:9px 0 0 0; overflow:hidden; float:left; margin-top:4px; margin-right:3px;}
.commentList li .control .address { background:url(images/iconAdd.gif); width:23px; }
.commentList li .control .modify { background:url(images/iconModify.gif); width:24px;}
.commentList li .control .write { background:url(images/iconReply.gif); width:28px; }
.commentList .reply li .control  { margin-top:-22px;}

.trackback { border-bottom:1px dashed #ccc; padding-bottom:3px;}
.trackback h3 {margin-top:6px; border:1px solid #e6e6e6 !important; background:url(images/commentBg.gif) 0 1px repeat-x #fcfcfc;  padding:8px 10px !important; display:block; font:0.8em NanumGothic, tahoma !important; color:#888 !important; letter-spacing:normal;}
.trackback h3 span { border:0 !important; font-weight:normal;}
.trackback li {margin:5px 0; border:1px solid #e6e6e6; background:url(images/commentBg.gif) 0 1px repeat-x #fcfcfc;  padding:10px 10px 8px 10px; width:498px; overflow:hidden;} 
.trackback li h4 { font:1em NanumGothic, gulim; border-bottom:none !important; letter-spacing:normal; font-weight:bold;}
.trackback li p {clear:left; padding-top:7px; margin-top:4px; padding-bottom:3px; font:0.9em NanumGothic, dotum; border-top:1px dashed #ccc;}
.trackback li .date { font:0.8em NanumGothic, tahoma; letter-spacing:normal; color:#ccc;}
.trackback li .delete {  display:block; height:0; padding:9px 0 0 0; overflow:hidden; float:right; margin-top:-33px;  background:url(images/iconDelete.gif); width:22px;}

/* 공지 */
.entryNotice { margin-bottom:40px;}

/* 비밀글 */
.entryProtected { margin-bottom:50px;}
.entryProtected p.text   { background:url(images/imgProtected.gif) no-repeat ; padding-left:50px; margin-bottom:10px;}
.entryProtected input    { width:200px;}
.entryProtected .submit  { width:50px; padding-top:2px; height:20px; background-color:#ccc;}

/* 방명록 */
.guestbook {}
.guestbook li { margin-top:6px; border:1px solid #e6e6e6; background:url(images/commentBg.gif) 0 1px repeat-x #fcfcfc;  padding:10px 10px 8px 10px;}
.guestbook li .date { font:0.8em NanumGothic, tahoma; letter-spacing:normal; color:#ccc;}
.guestbook li .name { float:left; font-weight:bold; margin-right:7px; float:left; color:black;}
.guestbook li .name img { vertical-align:middle;}
.guestbook li p { clear:left; padding-top:4px; padding-bottom:3px; width:493px; overflow:hidden;}
.guestbook li ul li p { width:473px;} 

.guestbook .commentWrite { border-bottom:1px dashed #ccc;}
.guestbook li .control { float:right; margin-top:-5px; margin-right:-5px;}
.guestbook li .control a { display:block; height:0; padding:9px 0 0 0; overflow:hidden; float:left; margin-top:4px; margin-right:3px;}
.guestbook li .control .address { background:url(images/iconAdd.gif); width:23px; }
.guestbook li .control .modify { background:url(images/iconModify.gif); width:24px;}
.guestbook li .control .write { background:url(images/iconReply.gif); width:28px; }
.guestbook .reply li .control  { margin-top:-22px;}

/* 태그로그 */
.taglog .tagbox { padding:10px 0 30px 0;}
.taglog .tagbox .cloud1, .sidebarCenter .tagbox a.cloud1:visited{font-size:14px; color:#ff6600;}
.taglog .tagbox .cloud2, .sidebarCenter .tagbox a.cloud2:visited {font-size:13px; color:#ff9900;}
.taglog .tagbox .cloud3, .sidebarCenter .tagbox a.cloud3:visited {font-size:12px; color:#669900;}
.taglog .tagbox .cloud4, .sidebarCenter .tagbox a.cloud4:visited {font-size:12px; color:#0099CC;}
.taglog .tagbox .cloud5, .sidebarCenter .tagbox a.cloud5:visited {font-size:11px; color:#999;}
.taglog .tagbox li { display:inline; margin-right:5px;}
.taglog .tagbox a:hover { text-decoration:underline; }    

/* 위치로그 */
.localog { padding-bottom:20px;}
.localog h3 { margin-bottom:20px !important;}
.localog .spot              { background:url(images/iconIndentArrow_local.gif) 5px 0 no-repeat;  padding-left:20px;  margin-top:5px;}
.localog .info              { background:url(images/iconIndentArrow_localinfo.gif) 5px 3px no-repeat;  padding-left:15px;  margin-top:2px; font-weight:bold;}
.localog a:link             { color:#ff6600;}
.localog a:visited          { color:#ff6600;}
.localog a:hover            { color:#ff6600;  text-decoration:underline;}

/* 검색 리스트 */
.searchList ol, 
.searchRplist ol            { list-style:none;  padding:5px;  margin:0; margin-bottom:30px;}
.searchList li, 
.searchRplist li            { border-bottom:1px solid #eee;  padding-bottom:2px;  margin-bottom:4px; letter-spacing:normal;}
.searchList .date, 
.searchRplist .date         { font:0.8em NanumGothic, tahoma;  margin-right:10px; }
.searchList .cnt            { font:0.75em NanumGothic, Verdana, Helvetica, Arial, Gulim, sans-serif;  color:#f60;} 
.searchRplist .name         { font:0.95em NanumGothic, Dotum, Arial, sans-serif;    color:#999;  padding-left:8px;}

/* 페이징 */
#paging { text-align:center; font:9px NanumGothic, Verdana; font-weight: bold; letter-spacing:normal; padding-bottom:40px;}
.number { margin:0px; padding:0px 2px 0px 3px; font:9px NanumGothic, Verdana; font-weight: bold;}
a.number:link, a.number:visited  { background:#b7b7b7; color:#fff;}
a.number:hover {background:#f180ba; text-decoration:none;}

/* 사이드바 센터 */

.sidebarCenterBottom { padding:3px 0 5px 2px;}
.sidebarCenter { padding:10px 0 0 5px;  font-size:0.9em;  position:absolute; left:0; top:300px; width:420px;}

.sidebarCenter a { color:#e4e0db;}
.sidebarCenter a:hover { color:red;}
.sidebarCenter a:visited { color:#e4e0db;}

.sidebarBox div { padding:4px 0 6px 0;  border-top:1px solid #958269;}
.sidebarCenter div ul{  clear:both; padding-left:50px; }

.sidebarCenter ol, .sidebarCenter ul { margin:0; padding:0;  list-style:none;}
.sidebarCenter li { display:inline; margin-right:5px;}
.sidebarCenter .recentTrackback ul li{ display:inline;}
.sidebarCenter .date, .sidebarCenter .cnt { font:0.8em NanumGothic, tahoma; letter-spacing:normal;}

.sidebarCenter .notice { border-top:none !important;}
.sidebarCenter .notice li { padding-left:16px; margin-top:-1px; padding-top:1px; background:url(images/iconNotice2.gif) 0 0 no-repeat;}

.counter {  color:#666; font:0.9em NanumGothic, tahoma; letter-spacing:normal; clear:both; padding:4px 0 6px 0; }
.counter .total { color:#333;margin-left:10px;}


/* 사이드바 공통 스타일 */
.sideinfo { width:920px;  font:0.9em NanumGothic, dotum; }
.sideinfo a:link, .sideinfo a:visited{color:#999; }

.sideinfo .recentPost,
.sideinfo .recentComment,
.sideinfo .recentTrackback { height:180px;}

.sideinfo h3{width:177px; height:0; padding:19px 0 0 0; margin:0 0 6px 0 !important; padding-bottom:0 ; border-bottom:0 !important; overflow:hidden;}
.sideinfo .category h3 { background:url(images/barCategory.gif) !important; }
.sideinfo .recentPost li {width:377px;}
.sideinfo .recentPost h3 {width:397px; background:url(images/barRecentPost.gif);} 
.sideinfo .recentComment li {width:227px;}
.sideinfo .recentComment h3 {width:247px; background:url(images/barRecentComment.gif);}
.sideinfo .recentTrackback li {width:227px;}
.sideinfo .recentTrackback h3 {width:247px; background:url(images/barRecentTrackback.gif);}
.sideinfo .link li {width:237px;}
.sideinfo .link h3 {width:257px; background:url(images/barLink.gif);}
.sideinfo .calender h3 {background:url(images/barCalendar.gif);}

.sideinfo ul{margin:0 2px 15px 2px;}
.sideinfo li{ line-height:120%; padding-bottom:4px; padding-left:14px; margin-bottom:4px; border-bottom:1px solid #eee; background:url(images/btn_plus.gif) 0 2px no-repeat;}
.sideinfo li .cnt { color:#FF6600; font:70% NanumGothic, tahoma;}
.sideinfo li .name { color:#999;}
.sideinfo li .date { color:#999; font:70% NanumGothic, Verdana;}

/* 공지사항  */ 
.notice { padding:3px; background:#efefef; margin:0 -10px; margin-bottom:7px;}
.notice li {
background:url(images/iconNotice2.gif) no-repeat 0 50%;
padding-left:16px;
display:inline;
}
.notice li a{
    font-size:11px;
    color:#555;
}

/* 카테고리 */
#treeComponent { float:none !important;}
#treeComponent table { float:none !important;}
#treeComponent div { float:none !important;}

/* 사이드바 태그 */
.sideinfo .tag a{ text-decoration:none; font-family:NanumGothic, dotum;}
.sideinfo .tag { display:inline; padding:0; text-align:justify;}
.sideinfo .tag .cloud1 { font-weight:bold; font-size:130%; color:#222; background-color:#b0aba1; }
.sideinfo .tag .cloud2 { font-weight:bold; font-size:120%; color:#333; background-color:#b0aba1; }
.sideinfo .tag .cloud3 { font-weight:bold; font-size:110%; color:#555;}
.sideinfo .tag .cloud4 { font-size:100%; color:#666;}
.sideinfo .tag .cloud5 { font-size:90%; color:#666;}    
.sideinfo .tag a:hover{ background-color:#a09b91; color:#000;}    
.sideinfo .tag li{ background:none; display:inline; padding:0;}


.sideinfo .calender{font:100% NanumGothic, Verdana;}
.sideinfo .archive{font-family: NanumGothic, Verdana;}
.sideinfo .archive ul{ padding: 0 20px 0 10px; }
.sideinfo .archive .cnt{ padding-left:5px;}
#treeComponent  * { width:auto !important;}
.sideinfo{clear:both; margin-left:-11px; }
     .sideinfo div { width:177px; padding:0; margin-right:6px; float:left;}
    .sideinfo .clear{ float:none; clear:both;}


/* 하단 배너  */

.sidebarCenterBottom .search { position:absolute; margin:0 0 0 190px; width:337px; text-align:right; }
.sidebarCenterBottom input {width:100px; border:3px solid #ccc; padding-left:40px; padding-top:3px; color:#626262; font:1em NanumGothic, gulim; height:15px; background:url(images/bgSearch.gif); margin-top:3px;}
.sidebarCenterBottom .search .submit { display:none; }
.sidebarCenterBottom .banners { text-align:left; margin-top:-3px;}
.sidebarCenterBottom .banners img {  vertical-align:middle; margin-left:4px; margin-top:3px; }

/* ***** footer ***** */
#footer { clear:both; text-align:center; border-top:1px solid #eee;  border-bottom:1px solid #eee; margin-top:0; padding:20px 0 10px 0;  font:11px NanumGothic, dotum; letter-spacing:-1px; color:#666; margin:0 -10px;}
#footer a { color:#666;}
#footer a:hover  { color:#333;}
#footer .copyright { margin-top:5px;}


/* cover */

.post_tags { background:url(images/entryTag.gif) no-repeat 5px 7px !important; color:#aaa; padding-left:34px !important;}
.post_tags a{ color:#aaa; }
.coverpost h2 { font-size:12px !important;}
.post_info .category a, .post_info .date, .post_info .author  { color:#ccc !important;}
.coverpost .img_preview { padding:4px;}

따오기 글 1

2 멀더끙이 작성한 답글

  • 지역 서울
  • 가입일자 2008-03-05
  • 글: 340

답글: 사이드바 수정시 문제가 생겼는데 좀 도와주세요..

정확한건 테스트를 해 보아야 겠지만...

우선 눈에 띄는 걸로는


.sideinfo .recentPost li {width:377px;}
에서 먼저 width 값을 377px로 정의 했지만,

그 아래

#treeComponent  * { width:auto !important;}
.sideinfo{clear:both; margin-left:-11px; }
     .sideinfo div { width:177px; padding:0; margin-right:6px; float:left;}
    .sideinfo .clear{ float:none; clear:both;}


여기서 .sideinfo div 태그에 177px을 주었기 때문에

sideinfo 클래스를 가지는 div가 모두 177px을 가짐으로 인해서 생기는 오류로 보입니다.




그리고 한가지 추가로 참고하시라고 말씀드리면

FF, Opera, Safari 등의 브라우저와 IE와는 Box 모델링 방법이 다릅니다.

FF등의 브라우저에서는 width 값 계산 법이 width = border + padding + content 이지만,
IE 에서는 width 값 계산법이 width = content 값 만을 가집니다.

때문에 IE6.0 버전을 고려한다면 padding 값은 피해가거나 CSS Hack을 통해 해결해야 합니다.

http://zine.standardmag.org/200802/20 이 글을 참고해보시면 더 자세히 설명 되어 있습니다.
(위 글에서는 IE에서도 올바른 DTD를 설정하면 동일하게 렌더링이 된다고 하는데... IE6.0에서 만큼은 적용이 되지 않는 듯 합니다..... -_-;;; )

난 남자냐?

멀더끙의 웹사이트

따오기 글 2

3 신요섭이 작성한 답글

  • 신요섭
  • 방문자

답글: 사이드바 수정시 문제가 생겼는데 좀 도와주세요..

올려주신 답변을 참고해서 트리 부분의 width속성을 삭제했더니 크롬/파이어폭스에서 잘 표시가 됩니다.

그러나,

이번엔 익스플로러에서 캘린더 부분이 꺠져버리는군요...ㅠㅠ

아 정말 모르겠습니다. 어려워요..ㅠㅠ

하여튼, 답변 감사합니다:)

혹시 더 이상의 해결책이 있으시면 조언 부탁드리고요.^^

뭐 안되면 그냥 써야죠 ㅎㅎ

따오기 글 3

4 신요섭이 작성한 답글

  • 신요섭
  • 방문자

답글: 사이드바 수정시 문제가 생겼는데 좀 도와주세요..

아, 파이어폭스에서도 제대로 표시되지 않는군요. 크롬에서만 제대로 표시됩니다.

아 정말 ㅋㅋㅋㅋ

따오기 글 4

5 daybreaker이 작성한 답글

  • 지역 대한민국, 대전, KAIST
  • 가입일자 2006-04-04
  • 글: 1,319

답글: 사이드바 수정시 문제가 생겼는데 좀 도와주세요..

이 포럼보다는 CSS Design Korea 포럼을 이용하시는 것이 더 나은 답변을 받을 수 있지 않을까 싶습니다.

문제의 답은 우리 안에 있다.
내면에 귀를 기울여 보자.

daybreaker의 웹사이트

따오기 글 5