묻고답하기
호환가능한 레이아웃 코딩은 무엇일까요?
2008.06.01 02:12
안녕하세요.
제가 레이아웃을 만들어서 사용중입니다.
잘 모르는데 div를 어떻게든 조합해서 대충만들었습니다.
모르는 분의 도움을 받아 메뉴도 완성했구요.
아직 제로보드4처럼 많은게 없어서 첫페이지를 만들다 말았지만요.
그런데 오류가 생깁니다.
익스플로러 7.0에서는 너무 잘도는데, 6.0에서는 잘 안도는 것 같아요.
6.0에서의 에러는 로그인을 해야만 원래대로 보인다는 것이구요.
로그인 안하면 레이아웃 틀이 조금 깨집니다.
SP2가 아니어도 마찬가지구요.
호환성있게 한다는 게 뭔지를 잘 모르겠어요.
아래에 코드를 실어보겠습니다.
어떻게 고쳐야 6.0과 같은 곳에서도 읽힐까요? 제대로...
----------
<style type="text/css">
<!--
.text { padding:10px; }
-->
@charset "utf-8";
body{margin:0;padding:0;line-height: 1.5em;}
#js_total_wrap {width:100%}
#js_login {width:820px;height:30px;text-align:right;vertical-align:middle;}
#js_menu_wrap {width:100%;background:transparent url("../images/top_bg.jpg") repeat-x left top;}
#js_menu {width:820px;}
#js_menu_a {float:left;width:20px;}
#js_menu_b {float:left;width:179px;}
#js_menu_c {float:left;width:621px;}
#js_gap {clear:both;width:820px;height:10px;}
#js_gap_a {float:left;width:20px;}
#js_gap_b {float:left;width:179px;background:url("../images/left_bg.jpg") repeat-y center top;}
#js_gap_c {float:left;width:621px;}
#js_middle {clear:both;width:820px; background:url("../images/bg_js_middle.gif") repeat-y left top;}
#js_space_a {float:left;width:20px;}
#js_left {float:left;width:179px;background:url("../images/left_bg.jpg") repeat-y center top;}
#js_left_a {width:179px;}
#js_left_b {width:179px;}
#js_left_ba {width:162px; padding:6px 6px 10px 6px;}
#js_left_c {width:179px;}
#js_left_d {width:179px;}
#js_left_e {width:179px;center;}
#js_left_f {width:179px;}
#js_left_g {width:179px;}
#js_left_h {width:179px;}
#js_space_b {float:left;width:15px;}
#js_content {float:left;width:606px;}
#js_footer {clear:both;width:820px;}
#js_space_fa {float:left;width:20px;height:2px;background:url("../images/tail_01.jpg") no-repeat center top;}
#js_space_fb {float:left;width:179px;height:2px;background:url("../images/tail_02.jpg") no-repeat center top;}
#js_space_fc {float:left;width:621px;height:2px;background:url("../images/tail_03.jpg") no-repeat center top;}
#js_copyright {clear:both;width:820px;height:70px;}
#js_copy_a {float:left;width:20px;}
#js_copy_b {padding:4px 0px 0px 0px;float:left;width:179px;}
#js_copy_c {padding:4px 0px 0px 0px;float:left;width:621px;font:12px verdana;text-decoration: none; color:#999999;}
#gnb { position:absolute; top:48px; width:980px; left:170px; height:72px; overflow:hidden; white-space:nowrap; margin-bottom:10px;}
#gnb li { float:left; list-style:none; background:url(../images/default/bgGnbVr.gif) no-repeat left center; padding-left:2px; position:relative; left:-2px; white-space:nowrap;}
#gnb li a { display:block; float:left; margin-top:0px; margin-left:0px; padding:0px 0px 0 0px; height:40px; color:#e8e8e8; white-space:nowrap; text-decoration:none; font-family:"돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif;}
#gnb li a:hover,
#gnb li a:focus { color:#ffffff;}
#gnb li.on a { font-weight:bold; color:#ffffff; background:url(../images/default/bgGnbOn.gif) no-repeat center top;}
#lnb { border-top:0px solid #dddddd; padding:0px 0px; width:179px; margin:0px}
#lnb li { padding-bottom:4px;}
#lnb li a { padding:6px 5px 6px 11px; width:161px; display:block; border:1px solid #e8e8e8; background:url(../images/default/bgLnbOff.gif) repeat-x; color:#3e3e3e; position:relative; z-index:99; text-decoration:none;}
#lnb li a:hover,
#lnb li a:focus { color:#ffffff; background:#de4332; border:1px solid #de4332;}
#lnb li.on a { color:#ffffff; background:#de4332; border:1px solid #de4332;}
#lnb li.on a:hover,
#lnb li.on a:focus { font-weight:bold;}
#lnb li ul { display:none; position:relative; margin-left:10px; width:160px; padding:0 3px; position:relative; border-top:1px solid #ffffff; overflow:hidden;}
#lnb li.on ul { display:block;}
#lnb li ul li { padding:0; border-top:1px solid #f2f2f2; position:relative; top:-1px;}
#lnb li ul li a { padding:6px 5px 6px 10px; width:169px; color:#818181 !important; border:none; background:none !important; border:none !important;}
#lnb li ul li a:hover,
#lnb li ul li a:focus { font-weight:normal !important; color:#de4332 !important;}
#lnb li.on ul li.on a { color:#ff1a00 !important; font-weight:bold !important; background:url(../images/default/bulletLnb.gif) no-repeat 175px center !important;}
#it_search_form { position:absolute; top:-5px; right:-15px;}
#it_search_form .input { border:1px solid #bc4032; height:12px; width:120px; color:#888888; font-size:.9em;}
#it_search_form .submit_button { width:1px; height:1px; visibility:hidden; }
</style>
--------
제 사이트는 http://kimjaesoon.net 입니다.